Forums / Craftwork / Client-side / Adding Twitter To Your Site

A tutorial on how to add twitter to your forum

AerialAngel
#1 2009-08-01 23:20
So here is my tut on how to add Twitter feeds to your cotoni/seditio forum.

Alternatively you can use this twitter plug in from Cotoni that is adapted for cotonti :)
Linky

You can view a live demo on my site here - http://fallenangels.host56.com/

Some of you may have noticed some sites have a small twtter feed on their website and it will retrieve information from their twitter and display it their. Since twitter has become widely popular i think its time to speak up and show peeps how to add it :D

Step 1
Download Twitter 1.12.2
Rename the file to twitter.js

---------------------------------------------

Step 2
Go to your file manager (where your uploaded cotoni files are). Go to "JS" folder. Upload the twitter.js

---------------------------------------------

Step 3
We dont have to mess with the twitter.js. So now go into your header.tpl file.

<!-- BEGIN: HEADER -->
{HEADER_DOCTYPE}
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-type" content="{HEADER_META_CONTENTTYPE}; charset={HEADER_META_CHARSET}" />

<meta name="description" content="{HEADER_META_DESCRIPTION}" />[/color]


In between what is in purple above. Were going to add a little code for the feed, below here is the code.
Remember to edit the "Yoursite.com" to your site URL.
Add this code in between <HEAD> and <META>

<script src="Yoursite.com/js/twitter.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
getTwitters('tweet', {
id: 'MyTwitter',
count: 5,
enableLinks: true,
ignoreReplies: false,
clearContents: true,
template: '<span class="prefix"><img height="20" width="20" src="%user_profile_image_url%" /> - </span> <span class="status">"%text%"</span> <span class="time"><a href="http://twitter.com/%user_screen_name%/statuses/%id%"> - %time%</a></span>'
});
</script>


---------------------------------------------

Step 4 (Reference)

id: 'MYTwitter' - This will be your twitter url. So if your Twitter is twitter.com/cotoni. Then you will just place "cotoni" in for the ID.

count: 5, - Count means how many of your updates will be displayed. 5 will display 5 of the most recent updates, 2 will display 2 of the most recent updates, and so on.

enableLinks: true - This means that it will display links that you post in your updates. If you post a link such as "cotoni.com" in your tweet. If this code is set to "True" then it will display it. if it is set to "False" it will not display it.
ignoreReplies : false - When you reply to others, It will show up at "@username - hey" If you wish to disable replies to other users. Then set to true, if left at false, then it will display tweets that are replies to other usrs.

clearContents : true - hmm not sure what this realy means, Just set to true.

Template : - will determine how it will look on your forum -Img src will retrieve your twitter avatar. %text% will display your tweets, %time% will post when you posted the tweet.

---------------------------------------------

Step 5

Now lets edit the index.tpl

Now add this code in any block.
<div id="tweet">
<p>Please wait while my tweets load <img src="/images/indicator.gif" /></p>
<p><a href="http://twitter.com/MyTwitter">If you can't wait - check out what I've been twittering</a></p>
</div>]



This is the final step. this will add the twitter to your site. You can edit the "Please wait while.." and "If you cant wait..." if you wish.

Dit bericht is bewerkt door AerialAngel (2009-09-03 04:26, 14 jaren ago)
robotik
#2 2009-08-01 23:51
Nice tut, easy to understand!
minoation
#3 2009-08-02 00:25
Thanks.
Awesome!
AerialAngel
#4 2009-08-02 00:58
It looks like your tweets are not showing. I just checked your sites coding and i found the issue. In your Index.tpl file

Remember for "id:" you must put in your twitter feed. so it should be

id:'minoation';
tobto
#5 2010-05-17 05:47
Very nice addition! Thank you!