How To Display Twitter Updates In Speech Bubble Using CSS

in CSS

Updated: On March 5th 2013 Twitter is closing down the first version of the API and it will be fully replaced by version 1.1. Learn how to use the new API here http://www.paulund.co.uk/using-the-new-twitter-api-v1-1

Do you want to display your twitter feed on your wordpress for your visitors to have easily access to your latest news.

I found a good article about how you can make a shape in pure CSS which looks just like a speech bubble. When you put this together with your twitter feed you can represent you speaking your twitter feed to your visitors.

This tutorial will show you how to display your latest tweet on any page and place this tweet inside a speech bubble in pure CSS.

Twitter Image?

1. First we need a picture to be used as your twitter logo. I like using a big picture of a blue bird. Twitter Blue Bird

Display Latest Tweets On Your Web Page

Twitter have released some api javascript files to allow you access to your twitter feed. These javascript files can be used directly from twitter.

Add a list element to your page where you want to display the twitter update with an id of twitter_update_list.

<ul id="twitter_update_list">
	<li>Loading Tweets..</li>
</ul>

Then add the 2 javascript files from twitter directly below this list.

<ul id="twitter_update_list">
	<li>Loading Tweets..</li>
</ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&count=1"></script>

You can see on the second javascript file where it says /username.json? you need to change this to the username of the twitter user who's updates you want to display. The next thing you need to note is the last parameter count=1, this is the amount of tweets you want to return from twitter. In this example we are just displaying the latest tweet we just need to put 1 as the count.

Now look at your page in the browser you should see your latest tweet in the list.

CSS To Display The Speech Bubble

Now we are getting the tweet in the list we can now style the list item to look like a speech bubble. In this example I am putting the list above the bird image so it represents the twitter bird speaking the status.

First lets remove the list styling so it doesn't look like your update is in a list

#twitter_update_list{
	list-style:none;
}

Now we can style the list item to look like a speech bubble. First were start off by making the status look like it is in a oval. This is done by applying a background colour, with lots of padding and rounded corners. Copy and paste the following CSS.

#twitter_update_list li{
     background: #f4f8f9; /* Old browsers */
     background: -moz-linear-gradient(top, #f4f8f9 1%, #e8f0f2 100%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f4f8f9), color-stop(100%,#e8f0f2)); /* Chrome

Subscribe To Newsletter

Get weekly updates to your email