Inspect Element

Web Design & Development Blog

Twitter has become one of the most popular forms of social media in use on the web today and it has been widely adopted by web designers and developers alike. There are many ways of integrating Twitter onto your site.

By integrating Twitter with your site, you can get a community discussing your brand or service which doubles up as a great way of promotion. Here is a look at some of the most useful and interesting methods to get you started.

1. Displaying Latest Tweets

When showing off your latest tweets on your site, you are giving the user a glimpse as whether or not they should follow you. They will be more likely to click through to your twitter page and follow you if they like what you tweet and by giving them a sample of your micro-blogging content.

Implementation

One of the easiest ways to display your latest tweets on your website is to use Remy Sharp’s twitterjs. Just include the following code just before the close body tag in your HTML.

<script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"></script>
<script type="text/javascript" charset="utf-8">
getTwitters('tweet', {
    id: 'username',
    count: 3,
    enableLinks: true,
    ignoreReplies: true,
    clearContents: true,
    template: '"%text%" <a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>'
});
</script>

Placing it at the bottom allows your site to load before Twitter does. Very handy, as if (or should that be when?) Twitter is down it won’t affect the loading of the rest of your site.

NOTE: The example code below links to the script on Google’s server. You can download it and host it on your own server if you wish.

Change the ‘id’ to your Twitter username and the ‘count’ number for the number of latest tweets to display. You can also choose to ignore @replies which could confuse readers as it will only display one half of a conversation.

Then, you need to include the following line of code wherever you want your tweets to appear on your page.

<div id="tweet"></div>

Finally, the script renders your tweets out as an unordered list with span tags separating out different elements of tweets such as the time of tweet making it very simple to style through CSS.

Examples of Latest Tweet Displays

2. Displaying Favourite Tweets

A feature of Twitter is the ability to ‘favourite’ Tweets. Basically this bookmarks a tweet and adds it to your favourites page on Twitter. The simplest way of achieving this is by using SimplePie because allows you to display an RSS feed on any site.

Make sure you are logged in to your Twitter account at Twitter.com then navigate to your favourites. While there is no link to an RSS feed anywhere on the page itself, browsers pick up that there is an RSS feed for your favourites so check your favourite browser for a link to the RSS. Safari and Firefox both display an RSS button beside the URL.

So for example, my Twitter favourites feed is:

feed:https://twitter.com/favorites/12633712.rss

Implementation:

As for integrating it into your site with SimplePie, I won’t reinvent the wheel here as Chris Coyier has done a superb job of running through this in a screencast over on his site, CSS-Tricks.

This method will also render out the tweets in your HTML semantically as an unordered list.

3. Tweet this/Retweet Button

John Resig, the creator jQuery, has developed a simple way of tweeting the current page URL and title while also displaying a number of the amount of times that particular page has been tweeted. You can see an example of this implementation here on Inspect Element at the top of the page and in the share links immediately after the article.

Implementation:

Only a couple of lines of code are need for this. First you need to include the javascript file in the header of your site with the following code.

NOTE: Again, if you want to host the file on your own server, make sure that you download it and link to that instead.

<script src="http://ejohn.org/files/retweet.js"></script>

Then include HTML as below:

<a class="retweet self"></a>

The class of ’self’ will automatically tweet the title of the page with a short, bit.ly URL link such as this:

RT @tkenny Making the Most of Icons in Web Design – Inspect Element http://bit.ly/rc1rD

Make sure you check out John’s post about the Easy Retweet Button to see all of the options for customisation.

With the sharing nature of Twitter users in the web design and development industry, as well as Twitter as a whole, this gives the reader/user a quick way of sharing what they like with their followers.

4. Display a Twitter Discussion

On the right hand side of this page you will see a section titled Twitter Activity. Anytime someone tweets the words ‘Inspect Element’, it automatically gets displayed in that section.

This is great because it allows me to see who mentions anything about the blog and see what people are saying.

Implementation

It is performed with the help of a jQuery plugin called Juitter.

As with all jQuery plugins make sure you include a reference to the javascript file in your header below the reference to the actual jQuery file itself.

<script language="javascript" src="/yourlocation/jquery.juitter.js" type="text/javascript"></script>
<script language="javascript" src="/yourlocation/system.js" type="text/javascript"></script>

Much like the previous examples, include the a single line of HTML code anywhere you want it to appear.

<div id="juitterContainer"></div>

Likewise, the code that comes back is nice to work with.