Add a twitter feed to your portal

Nov

2009

Twitter Feed on your portal

Add a twitter feed/ticker on your site.
No template editing , or skill required!
This is a global code, can be used in the portal, forum widget , homepage message , html page

The result:

Tools you may need:

A small twitter icon if you wish to edit the default 1 I prepared
An active portal (I chose the portal because the feed looks the best in the portal)
Motivation and 15 minutes

Preparing the portal

I suggest posting this feed in the center column, or in the top or bottom modules. The feed looks really good if it is found in those sections.
Go to Admin panel-> Modules -> Portal management -> structure
Scroll down and click create a new widget.

Adding the code

After you clicked create a new widget, into the
name type in "twitter feed" for quick refrence
select "yes" to use standard tables (unless you want to customize the block yourself)
No need for a title, unless you want one.

Into the box you paste this code:

Code:: <div class="twitterfeed"><div id="twitter_div" style="margin-left: 35px; padding-top: 3px;"><ul id="twitter_update_list" style=" list-style-image : url(http://hitskin.com/themes/13/34/38/i_icon_minipost_participate.png); font-size: 12px; line-height: 15px;"><li style="padding-top: 3px; padding-left 20px;"> </li></ul></div><p align="right" style="margin-top: 2px; font-size: 11px;">recently twittered on <a href="http://twitter.com/forumotion">Forumotion</a></div><script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script><script type="text/javascript" src="http://twitter.com/statuses/user_timeline/forumotion.json?callback=twitterCallback2&count=1"></script>

I'm explaining now:
<div class="twitterfeed"> - this is a special additional class I added to keep your feed aligned. If you want to modify the twitter feed you'll do it to this class.

<div id="twitter_div ...> - this is the base defined code for the javascript, do not modify. the only items you can change in this div is the style="";

<ul id="twitter ...> - this is an unorganized list that is needed for the javascript. The only thing you can modify is the image url. This is the mini icon (the blue box in my example) its a bullet point. You can change the point if you wish.

The rest of the insides you must leave alone... but when you see this part:
recently twittered on <a href="twitter.com/forumotion">Forumotion</a> - make sure to change forumotion to your forums name.

The last and most important part is the actual feed.

Code:: <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script><script type="text/javascript" src="http://twitter.com/statuses/user_timeline/forumotion.json?callback=twitterCallback2&count=1">

There are 2 things you have to edit here.
1) - statuses/user_timeline/your twitter account name.json?
* - change the twitter account from forumotion to your twitter account

2) - twitterCallback2&count=1
* - my code only displays your last tweet. if you want the last 2 or 3 you have to change the "count" to your desired number of tweets. (don't go over 5 it doesn't look nice)

once you are done editing - save and add your new widget to your portal (recommended in the center/top/bottom column )

CSS additions

It be fun to leave it like this ... but you have to add a few CSS classes.
Go to Admin panel -> display -> colors -> CSS tab

All you have to do is paste these classes

Code:: #twitter_div a:link{ color: #fff; } #twitter_div a:hover{ color: #03a5b4; } #twitter_div{ color: #006383; }.twitterfeed{ margin: 0 auto; width: 700px; height: 40px; background-image: url(http://i33.tinypic.com/14kblfo.png); /* desired twitter image */ background-repeat: no-repeat; }

To modify the twitter block you use the #twitterfeed class.
you can modify its width , height and the icon.
The #twitter_div a:link and a:hover are the colors of twitter links and the recently twittered on links
modify the color depending on your forums background.

Tutorial Written by Jalokim , special thanks to the original author of blogger.js