• Home
• Blog
• Portfolio
• Contact

How to insert posts / tweets from your Twitter account onto your website.

Posted 25 Sep 2009 - No Comments - leave yours now!

Every time you post a new tweet to your Twitter account it will automatically appear on your website, allowing you to make minor updates to your website on the move or post messages to your audience which are too small for a regular blog post (aka micro blogging). The process is very simple but a basic understanding of html and css is very helpful especially in controlling the look of your post.

View the example | download the demo html & screenshots

The really, really easy bit.

• First off log into your twitter account.
• Click on the “Settings” tab in the navigation at the top of the page, then, just below the “More info URL” click on “(You can also add Twitter to your site here)”.

Next page… here you will see the options for adding twitter to various apps in this case I will ignore any option that isn’t relevant

• click on “other” then click “continue”.

Next page… here you also have the option to add a flash widget to your site, we’re not interested in that on this occasion as we want to style our tweets to our liking which means using html/css

• Select “HTML widget” and “Continue”

Next page…

• Choose the number of Tweets you wish to show on your page (maximum of 20).
• Type the title you wish to use for your tweets (if applicable).
• Select all of the code in the “Get the code box” and copy it.

That bit was ridiculously easy, right? – here’s the bit you might be a little scared of if you’re not familiar with html/css.

The next thing we need to do is to paste the code we’ve just copied into our webpage. Here’s a very basic page I made earlier.

• We need to get to the code in your webpage so open your html file in notepad/dreamweaver or similar (in this example I’m using Smultron for OSX).

Most likely you would want your Tweets to appear in your websites sidebar, which is where we will place them in this tutorial.

• Paste the code we copied from twitter inside the sidebar div.

• Once pasted in the code we copied makes more sense. We have a div with the id “twitter_div”, our Title appears in a h2 tag, next we have an empty unordered list followed by a link to our Twitter page. Our “twitter_div” is then closed followed by our Javascript. You will notice at the end of our Javascript we have “count=5″ if we wish we can change this to display a different amount of Tweets (upto 20) at a later stage without having to go back into Twitter and create new code.
• You may have noticed back in our Twitter page there was a “hot tip” suggesting we copy our Javascript code to the bottom of our webpage, this will prevent the loading of our page slowing down by pulling in the Twitter posts before the rest of the page loads – so we can cut these lines of code and paste them just before our body closes (</body>).

Now lets check how that looks in a browser… (open your html in firefox/safari/opera… or if you really must internet explorer)

Woohoo, now you can see our Tweets appearing in our sidebar. They do however look a little messy… we can change this with css.

Because we already have an unordered list (<ul>…</ul>) in our page which we are happy with the look of we need to target our Tweets ul (unordered list) independently. In the code we copied from Twitter our ul (unordered list) already has a unique id “twitter_update_list” which we can refer to in our css, we’ll then refer to our list items (<li>) within that list.

Admitedly the above is still not asthetically pleasing but works well enough as an example in this case – here’s the css I have used to style our Tweets… (you can obviously style your own to suit)

ul#twitter_update_list {list-style-type:none; padding:0;}   /* this refers to our unordered list */

ul#twitter_update_list li {font-size:1.2em; line-height:1.2em; margin:0 0 10px 0; font-weight:bold;}   /* this refers to our list items within our unordered list */

ul#twitter_update_list li a {color:#666666; font-weight:normal; text-decoration:none;}   /* refers to links within our list items */

ul#twitter_update_list li a:hover {border-bottom:dotted 1px #f58428;}   /* hover effect for our links */

The only bit left to style is our “follow me on Twitter” link at the bottom of our tweets. In the code we pasted into our page this link was styled using inline styles, although it still had its own presodo selecor (id) so we can remove the inline styles and target the link in the head of our page instead (or your external stylesheet on your own site).

So in this case I have inserted the following into the css and removed the inline style from my html.

/*style the follow us on twitter link */

#twitter-link {float:right; color:#f58428; text-decoration:none; border-bottom:dotted 1px #f58428;}

If you enjoyed this post why not sign up to get automatic email updates whenever I post something new?
• Subscribe to email updates • Subscribe to my RSS feed
• Follow me on twitter • Join me on Facebook

- leave a comment!
 

© Ken Reynolds Design