2 steps to Integrate Twitter onto your site

Using Twitter and want to display tweets on your website?

Here’s a handy guide to how we integrated it on the Jealous Design site.

The method we use on the Jealous site involves adding a bit of code to your web pages, so before we begin, you might need a web designer to assist you with this guide (unless you are a web designer ofcourse).

1. Firstly, you need to grab some Javascript (available from Twitter), and place it before your final body tag – . The code from the Jealous site looks like this – ‘‘

The bits you can modify are highlighted above, basically you need to add your username and how many tweets you would like displayed.

Design tip: We like to add 1 tip, otherwise your website could start to look cluttered with loads of text, and we like to keep things clean.

2. Once you’ve added the line of Javascript, you need to add a placeholder (using the code below) for your Twitter feeds and pretty it up with a bit of CSS.

Here’s an example of the code we use:

<div id=”tweet”>

<div id=”twitter_update_list”></div>

<br/>

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td width=”9%”><p><a href=”http://twitter.com/jealousdesign”><img src=”images/twitter.png” alt=”Twitter” /></a></p></td>

<td width=”91%”><p><a href=”http://twitter.com/jealousdesign”>follow us on Twitter</a></p></td>

</tr>

</table>

</div>

Here’s the CSS:

#tweet {

margin: 0 0 10px 645px;

padding: 10px;

color: #FFF;

min-height: 200px;

list-style-type: none;

}

#tweet ul {

margin: 0px;

padding: 0px;

list-style-type: none;

}

#tweet li {

font-size:12px;

line-height:15px;

}

#twitter_update_list {}

#tweet a {

color: #F04E23;

text-decoration: none;

}

Here’s an image of our completed Twitter feed (see below):

Take a look at the real thing by visiting the Jealous website – www.jealousdesign.co.uk

That’s it!

If you would like help with your website please let us know, we’d be more than happy to add a Twitter feed or anything else you might need?

Get in touch email us: hello@jealousdesign.co.uk

Or, leave a comment below.

Tags:

This entry was posted on November 17th, 2009 and is filed under Everything, Tutorials and Guides. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response or Trackback from your own site.