Monday, 11 April 2011

Client Twitter Integration

In order to keep up with the latest web trends I thought it was important that my client has good links with social networks. I wanted to incorporate a Twitter feed into their website, but in a more interesting way than just featuring 'tweets' at the side of the page in a big row. I came up with the idea of having a ribbon across the top of the page, above the navigation. I feel this breaks up the page nicely and looks really cool;



To call in the correct Twitter feed JavaScript is referenced at the bottom of each HTML page the feed is required on;



Where it says "/user_timeline/thebluebellinn.json" is where the Twitter username is referenced, this code can be applied to any Twitter feed and and in any HTML page. To stop multiple posts appearing the code "twitterCallback2&count=1" is used, where '1' can be changed to whichever number you choose.

The CSS for the feed is as follows;



It is very easy to customise and it wasn't too difficult for me to correctly align the text in the ribbon to make it look good. After this I have also used the same JavaScript to create a Twitter feed on my own website; http://www.georgewood.me and as you can see there is a massive difference in the way I have displayed the information, showing how customisable this bit of JavaScript is.

No comments: