Forum Home Enhancements - [CM] Twitter SlideBox (Widget)

[CM] Twitter SlideBox (Widget)


Notice: Please be adviced that the Twitter code has changed since this mod was created. All though you can still use the new Code using our method. You just have to play arround with the new code befor implementing the code in your modfication.

::::::::::::::: Other Social Mods Related to this :::::::::::::::

Facebook SlideBox: Click Here
Floating SideBar: Click Here

Download Mod For vBulletin 3.8.x. CLICK HERE! (NEW)

Hey Everyone, I made this first as a Facebook LikeBox, and now you can get it as Twitter Widget too. Its very small and simple! I hope you will like it.. And what you will achieve with this tutorial is that when mouse over the image, it will shift / slide your Twitter-Box Widget.

Lets Start with the Example Images First, and then the Modification!

The modification may look a bit scary or confusing, but its very easy and after 1 time, you will install it without any help the next time!

Only 3 Template Edits

Image: Slide In


Image: Slide Out

==================== Modification Starts =====================

Step 1: Go to your ADMINCP, and then Styles & Templates.
Now to your right in the Dropdown menu, click on Edit Template, now find the "headinclude" template, which is the best place to add your Javascript or Jquery codes. And thats whats what we are going to do! Scroll all the way down, and to add the code below everything else...

Code to add:

PHP Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".twitbox").hover(function(){
jQuery(".twitbox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".twitbox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script> 


Step 2: Now we have to add the CSS, Go back to your Styles & Templates in (ADMINCP) and in your Templates Dropdown choose "Edit Templates"!

Now scroll down till you find the CSS Templates. In the CSS Templates click and open the "additional.css" template! And add the following code below all the other codes: (If its empty, just add it in the front)

Code to add:

PHP Code:

.twitbox {
float:right;
width:288px;
height:345px;
background: url(images/twitbox.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.twitboxwrap {
margin-top:2px;
margin-left:-5px;
background: #fff;
width:238px;
height:325px;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.twitboxwrap iframe {margin:-1px} 


Step 3: Go to this Site https://twitter.com/settings/widgets

Login with your own account... Or if you dont have an account then signup for one!

The Widget option can also be seen in your PROFILE, below! Its called WIDGETS! Now you can click on it and on you right side click on options are on your right side it says "Create new"!

Click on CREATE NEW, and after creating your widget, simply COPY the code from BELOW! We need to embed the code on your webpage, but in a bit...

Widget Settings: You can leave the Width and Height as it is. It will also ask you for a Scrollbar, and make sure to Click and mark it YES! Click SAVE on your twitter accounts widget that you created...

When you are done, Click on Finish & Grab Code!

Step 4: Now add the CODE inside the original code showen below, instead of the BLUE TEXT. After you have added the code, your full code should be ready!

Look for the BLUE TEXT below, and replace it with the code you just got for the Widget!:

Code to add:

<div   class="twitbox"><div style="color: rgb(255, 255, 255); padding:   8px 5px 0pt 50px;"><span><div class='twitboxwrap'>PUT THE WIDGET CODE HERE</div></span></div></div>

REPLACE THIS PART --> "PUT THE WIDGET CODE HERE" WITH THE WIDGET CODE.

STEP 5: When your are done putting the WIDGET CODE inside the real code, Then now we need to put it all in your HEADER template, or footer...

Put the code below everything else in the tempplate. And you are DONE! (You can see an example of my CODE, used on my site below this post, so you get an idea of how it looks like when finished)

STEP 6: Now copy the "twitbox.png" image from the attachment below, or from below the text, and upload it in your "images" folder in the root of your ftp!

We are DONE, Please its very important that you click INSTALLED after Installing, for future support! Thank you!

=================== Modification End ==================


Extra Troubleshoots & Info

Below you see example of the full code used in my forum:
The code in BLUE color is the twitter widget code:

<div  class="twitbox"><div style="color: rgb(255, 255, 255); padding:  8px 5px 0pt 50px;"><span><div class='twitboxwrap'><a class="twitter-timeline"  href="https://twitter.com/ChiNaCheats" data-widget-id="267073824858710017">Tweets by @ChiNaCheats</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div></span></div></div>

[Dispersion]

For some reason it wouldn't show anything other than "tweets by X", any idea why?

[Bruce1984]

Awesome mod! Changed the image slightly to fit the themes we have installed, but besides that it looks great!

There is however some issue and I'm not sure what it is. The reply box (textarea) will be greyed out, for the quick reply as well as the 'advanced' one. Sometimes it works and shows/loads properly, but usually it doesn't. It usually works when the page is loaded a first time, when it's loaded a second time, for example after a refresh, the box will be grey. Any consecutive refresh/load results in the same. Also, it happens on any theme.

The strange thing is, when I comment the <script> bit from the 'header' template edit out, it'll work properly. When I remove the comment-out bit (<!-- and -->), it won't function anymore. Now I'm not sure if it's that part that's faulty or if it's something to do with the other two code bit edits.

Any help would be greatly appreciated.

Here's, for example, the three bits from the default vB style:

'header'

<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">
	<vb:if condition="$stylevar['titleimage']"><div><a name="top" href="{vb:link forumhome}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div></vb:if>
	<div id="toplinks" class="toplinks">
		<vb:if condition="$show['member']">
			<ul class="isuser">
				<li><a href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li>
				<vb:if condition="$show['registerbutton']">
				<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
				</vb:if>
				<li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase user_control_panel}</a></li>
				<li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
				<vb:if condition="$notifications_total">
				<li class="popupmenu notifications" id="notifications">
					<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>
					<ul class="popupbody popuphover">
						{vb:raw notifications_menubits}
					</ul>
				</li>
				<vb:else />
				<li class="popupmenu nonotifications" id="nonotifications">
					<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
					<ul class="popupbody popuphover">
						<li>{vb:rawphrase no_new_messages}</li>
						<vb:if condition="$show['pmmainlink']"><li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li></vb:if>
					</ul>
				</li>
				</vb:if>
				<li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
				<vb:if condition="$vboptions['enablefacebookconnect']">
					{vb:raw facebook_header}
				</vb:if>
			</ul>
            {vb:raw template_hook.header_userinfo}
			<vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment>
		<vb:else />
			<ul class="nouser">
			<vb:if condition="$show['registerbutton']">
				<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
			</vb:if>
				<li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a></li>
				<li>
			<script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
			<form id="navbar_loginform" action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
				<fieldset id="logindetails" class="logindetails">
					<div>
						<div>
					<input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />
					<input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />
					<input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />
					<input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />
						</div>
					</div>
				</fieldset>
				<div id="remember" class="remember">
					<label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>
				</div>

				<input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
				<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
				<input type="hidden" name="do" value="login" />
				<input type="hidden" name="vb_login_md5password" />
				<input type="hidden" name="vb_login_md5password_utf" />
			</form>
			<script type="text/javascript">
			YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
			YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
			vB_XHTML_Ready.subscribe(function()
			{
			//
				YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus);
				YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur);
				YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint);
				YAHOO.util.Event.on('navbar_password', "blur", navbar_password);
			});
			
			function navbar_username_focus(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				if (textbox.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>')
				{
				//
					textbox.value='';
					textbox.style.color='{vb:stylevar input_color}';
				}
			}

			function navbar_username_blur(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				if (textbox.value == '')
				{
				//
					textbox.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>';
					textbox.style.color='{vb:stylevar shade_color}';
				}
			}
			
			function navbar_password_hint(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				
				YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none");
				YAHOO.util.Dom.setStyle('navbar_password', "display", "inline");
				YAHOO.util.Dom.get('navbar_password').focus();
			}

			function navbar_password(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				
				if (textbox.value == '')
				{
					YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
					YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
				}
			}
			</script>
				</li>
				<vb:if condition="$vboptions['enablefacebookconnect']">
					{vb:raw facebook_header}
				</vb:if>
			</ul>
		</vb:if>
	</div>
	<div class="ad_global_header">
		{vb:raw ad_location.global_header1}
		{vb:raw ad_location.global_header2}
	</div>
	<hr />
</div>

<div   class="twitbox"><div style="color: rgb(255, 255, 255); padding:   8px 5px 0pt 50px;"><span><div class='twitboxwrap'><a class="twitter-timeline"  href="https://twitter.com/FENIXGamingOrg"  data-widget-id="300668398495473666">Tweets by @FENIXGamingOrg</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div></span></div></div>

'headinclude'

<link rel="icon" href="http://yoursite.com/images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.fenixgaming.com/home/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset={vb:stylevar charset}" />
<meta id="e_vb_meta_bburl" name="vb_meta_bburl" content="{vb:raw vboptions.bburl}" />
<base href="{vb:raw basepath}" /><!--[if IE]></base><![endif]-->
<meta name="generator" content="vBulletin {vb:raw vboptions.templateversion}" />
<vb:if condition="$stylevar['favicon']">
	<link rel="Shortcut Icon" href="{vb:stylevar favicon}" type="image/x-icon" />
</vb:if>
<vb:if condition="$show['threadinfo']">

<vb:elseif condition="$show['foruminfo']" />
		<meta name="keywords" content="{vb:raw foruminfo.title_clean}, {vb:raw vboptions.keywords}" />
		<meta name="description" content="<vb:if condition="$pagenumber > 1">{vb:rawphrase page_x, {vb:raw pagenumber}}-</vb:if>{vb:raw foruminfo.description_clean}" />
<vb:else />
		<meta name="keywords" content="{vb:raw vboptions.keywords}" />
		<meta name="description" content="{vb:raw vboptions.description}" />
</vb:if>

<vb:if condition="$show['fb_opengraph']">
	{vb:raw facebook_opengraph}
</vb:if>

<vb:if condition="$show['remoteyui']">
	<vb:if condition="$show['remoteyuicombo']">
		<script type="text/javascript" src="{vb:stylevar yuicombopath}?{vb:stylevar yuiversion}/build/yuiloader-dom-event/yuiloader-dom-event.js&amp;{vb:stylevar yuiversion}/build/connection/connection-min.js"></script>
	<vb:else />
		<script type="text/javascript" src="{vb:stylevar yuipath}/yuiloader-dom-event/yuiloader-dom-event.js"></script>
	</vb:if>
</vb:if>
<script type="text/javascript">
<!--
	if (typeof YAHOO === 'undefined') // Load ALL YUI Local
	{
		document.write('<script type="text/javascript" src="clientscript/yui/yuiloader-dom-event/yuiloader-dom-event.js?v={vb:raw vboptions.simpleversion}"><\/script>');
		document.write('<script type="text/javascript" src="clientscript/yui/connection/connection-min.js?v={vb:raw vboptions.simpleversion}"><\/script>');
		var yuipath = 'clientscript/yui';
		var yuicombopath = '';
		var remoteyui = false;
	}
	else	// Load Rest of YUI remotely (where possible)
	{
		var yuipath = '{vb:stylevar yuipath}';
		var yuicombopath = '{vb:stylevar yuicombopath}';
		var remoteyui = true;
		if (!yuicombopath)
		{
			document.write('<script type="text/javascript" src="{vb:stylevar yuipath}/connection/connection-min.js"><\/script>');
		}
	}
	var SESSIONURL = "{vb:raw session.sessionurl_js}";
	var SECURITYTOKEN = "{vb:raw bbuserinfo.securitytoken}";
	var IMGDIR_MISC = "{vb:stylevar imgdir_misc}";
	var IMGDIR_BUTTON = "{vb:stylevar imgdir_button}";
	var vb_disable_ajax = parseInt("{vb:raw vboptions.disable_ajax}", 10);
	var SIMPLEVERSION = "{vb:raw vboptions.simpleversion}";
	var BBURL = "{vb:raw vboptions.bburl}";
	var LOGGEDIN = {vb:raw bbuserinfo.userid} > 0 ? true : false;
	var THIS_SCRIPT = "{vb:raw this_script}";
	var RELPATH = "{vb:raw relpath}";
	var PATHS = {
		forum : "{vb:raw vboptions.vbforum_url}",
		cms   : "{vb:raw vboptions.vbcms_url}",
		blog  : "{vb:raw vboptions.vbblog_url}"
	};
	var AJAXBASEURL = "{vb:raw ajaxbaseurl}";
// -->
</script>
<script type="text/javascript" src="{vb:raw vboptions.bburl}/clientscript/vbulletin-core.js?v={vb:raw vboptions.simpleversion}"></script>
{vb:raw template_hook.headinclude_javascript}

<vb:if condition="$vboptions['externalrss']">
	<link rel="alternate" type="application/rss+xml" title="{vb:raw vboptions.bbtitle} {vb:rawphrase rss_feed}" href="{vb:raw vboptions.bburl}/external.php?type=RSS2" />
	<vb:if condition="$show['foruminfo'] OR $show['threadinfo']">
		<link rel="alternate" type="application/rss+xml" title="{vb:raw vboptions.bbtitle} - {vb:raw foruminfo.title_clean} - {vb:rawphrase rss_feed}" href="{vb:raw vboptions.bburl}/external.php?type=RSS2&amp;forumids={vb:raw foruminfo.forumid}" />
	</vb:if>
</vb:if>

<vb:if condition="$vboptions['storecssasfile']">
	{vb:cssfile main-rollup.css}
        {vb:raw template_hook.custom_css_links}
<vb:else />
	{vb:cssfile bbcode.css,editor.css,popupmenu.css,reset-fonts.css,vbulletin.css,vbulletin-chrome.css,vbulletin-formcontrols.css{vb:raw template_hook.custom_css_list}}
</vb:if>
	<!--[if lt IE 8]>
	{vb:cssfile popupmenu-ie.css,vbulletin-ie.css,vbulletin-chrome-ie.css,vbulletin-formcontrols-ie.css,editor-ie.css}
	<![endif]-->
{vb:raw template_hook.headinclude_css}


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".twitbox").hover(function(){
jQuery(".twitbox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".twitbox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>]

additional.css

.twitbox {
float:right;
width:288px;
height:345px;
background: url(images/twitbox.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.twitboxwrap {
margin-top:2px;
margin-left:-5px;
background: #fff;
width:238px;
height:325px;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.twitboxwrap iframe {margin:-1px}

[elazanak]

Instead of my twitter feed will I be able to show a twitter feed of people that I am following? for example, I have a sports forum and I want the twitter feed to show important news reporters/athletes instead of it showing my feed.

Please advise when you have a free moment.

[ChiNa]

@Bruce1984 , Thank you for your feedback. I am sure others will find your method helpful..

Notice to Forum Members

Please be adviced that the Twitter HTML code has changed. You can still use the new Code using the method above. Just play arround with the new code to understand how it works.

[T.P.]

i was testing it, but the slide does not work.

[MdSWolfy]

I have it installed but nothing happens when I Hover over the pop out tab. Any suggestions?