Put Twitter on your site Put Twitter on your site

This detailed tutorial will tell you 2 ways to put Twitter o your site.

Adding Twitter To Your Site

#1. Tutorial 1 by AerialAngel

So here is my tut on how to add Twitter feeds to your cotoni/seditio forum.

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 -->
<html xmlns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="content-type" content="{HEADER_META_CONTENTTYPE}; charset={HEADER_META_CHARSET}" />

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

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>'


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>

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.

#2. Tutorial 2 by minoation

Okay before I tell you how to put Twitter updates on your site,I 'd like to thank AerialAngel for teaching me how to do it one way. Thanks a lot AerialAngel. God Bless you!

An easier way to put Twitter on your site is to go to Settings in your cPanel at twitter.com. Then,look for the More Info URL field. Under it,there will be a link saying "You can also add Twitter to your site here" or something to that affect. Choose were you want it. Some choices are myspace, blogger, etc. But for adding it to your site, just click other and continue.

On the next step, you'll be seeing to choices for the way you can make your Twitter updates look like. The Flash widget and the HTML widget. Either one is fine but I chose the HTML widget. The last thing you need to do on Twitter.com is get your code. There, you can edit the # of tweets and the title. Once you get the widget on your site,you also can edit the title by going to this code:

<h2 class="sidebar-title">Twitter Updates</h2>

.The text inside <h2></h2> is the title of the widget. That's what you edit to change the title. Copy and the code to your clipboard.
The next thing to do is open your FTP Client. Connect to your server. Go to public_html/skins/yourskin. Right-click on your index.tpl folder and choose "View/Edit". If you want to add the widget to the left side of the page look for the code:

<div id="lSide">

and if you want it at your right look for:

<div id="rSide">

Then paste your code under either one of the codes above. I pasted the code under the other codes. If you want it in a different order then put it somewhere else. Make sure that you put in between one of the codes I mentioned previously and


. The last thing you need to do is close the index.tpl after you have added the code. Then it will ask you if you want to save it. Click yes. Then the FTP Client will ask you "Upload this file back to the server?". Click "Finish editing and delete local file and click yes.
Once your file transfer is complete go back to your site and see if it is there.I f you had any problems, PM me. Thanks for reading. :)

No comments yet
Only registered users can post new comments