Spice Up Your Twitter Feed Display Box Using CSS

Spice Up Your Twitter Feed Display Box Using CSS

Everyone has a twitter account nowadays and all like to showcase their most recent tweets on their websites. This is generally done by displaying the tweets enclosed in a visually appealing box or the twitter bird shouting it. Here is a small tutorial on how you can increase the interactivity further with the help of CSS.

For a very long time now there has been this trend of displaying tweets on the website’s sidebar, footer or the header. Many designers have designed ingenious ways of displaying the tweets by creating beautiful eye-catching illustrations containing them. The main purpose of making them visually attractive is so that the visitors can get interested and read the fresh updates that the site’s owner is providing. What this tutorial is going to do is enable to you to make your twitter feed display box interactive so that your visitors can go ‘wow! That’s pretty cool’ when they visit your site or read your feeds. So here it goes:

Step 1. How do I insert the feed in my website?

Inserting your twitter account’s feed in your website may become tricky. It’s a good thing there are so many tutorials out there which provide you with the knowledge of inserting these feeds easily. Here are some resources which will enable you to get the feeds from twitter onto your very own site:

1.Designing a Unique Page for Twitter Updates
2.10 Awesome Ways to Integrate Twitter With Your Website
3.Tweet!

WordPress users can use some awesome plugins to get their twitter feed on their site:

1.35 Awesome Twitter Plugins for WordPress
2.Juitter
3.jQuery Plugin For Twitter

Step 2. Creating the image sprite.

Now that you have successfully learned how to import the twitter feed, it’s time to configure the display area. For this tutorial, I am going to use the same design for the twitter box as I have used in this site’s footer i.e. a twitter bird staring at the tweets.

Normal Twitter Feed Box

What our primary aim is that when ever the user hover’s over the twitter feed box, some action is going to take place. In our case the twitter bird will look towards the user.

Twitter Feed Box On Hover

You can create designs like this using various twitter icons made by some wonderful designers who love to share their work with the web community. Here is an ultimate source to these icons.

100+ Remarkably Beautiful Twitter Icons And Buttons (Always remember to ask the designer first before using these icons.)
Free vector icon set by ProductiveDreams.com

I have used the icons made by ProductiveDreams. After creating a simple box in photoshop. Place the normal twitter bird icon i.e. the one with the cross sectional view of the bird, at the bottom right side of the box such that the bird appears to be looking inside the box. Now paste the other twitter bird icon, the one which appears to be looking towards the viewer.

Slowly push the image over the normal icon

Then push the tilted bird icon above the older icon which you placed at the bottom right corner of the box such that it appears like a two headed twitter bird as shown below

After the icon is pushed over the previously placed icon

Now hide the tilted twitter bird icon and properly mark a square containing the normal twitter bird using guide lines. Make sure that both the tilted and the normal bird fit properly in the same square made by the guidelines.

Guides marked to contain the twitter bird
Guides marked to contain the twitter bird tilted

Crop the image with the normal twitter bird icon along the guidelines and open a new file and paste it there. Then check the height of the cropped image and increase the canvas size by that amount vertically. This is done so that you can paste the tilted twitter bird version on the same canvas to give the final touches to the image sprite.

height of the cropped image
increasing the canvas size

Hide the normal twitter bird icon and make the other tilted bird visible. Then crop the image again along the guide lines just as you did for the previous image. Copy the image and paste it on the newly created canvas where you pasted the other image. Adjust the images so that they properly fit the whole canvas. Your image sprite is ready for use and should look like this:

the final css sprite after completion

Step 3. Coding the bird to life!

The html skeleton of the twitter feed box is going to be a simple one. There would be a main container div containing the twitter feed, the bird and an optional “Follow Me” link.

The CSS for the ‘#twitter’ container div is very simple. The ‘#twitter-bird’ div is going to contain the bird. It should have half the height of the original sprite we made because only one of the two images in the sprite will be displayed. Using CSS sprites is a good practice because it reduces server requests, hence decreases the load time and prevents the sudden flashes of the image when hovered upon for the first time.

The twitter bird div should be floated to the right and a negative margin should be assigned to it so that the bird appears to be some what outside the container div. Make the background position ‘top’ so that the normal twitter bird is displayed. To give the finishing touches to our twitter feed box, just change the background image position of the ‘twitter-bird’ div to ‘bottom’ when ever the user hovers over the container div.

To see how the final result would look like, just scroll down to the footer at the bottom of this page.

Examples

Gopal Raju from ProductiveDreams has made his twitter feed look very lively and bright. The twitter bird is interactive in a very friendly and casual way. It winks and displays the total number of followers that he has.

Before Hovering:

Productive Dreams Before Hover

After Hover:

Productive Dreams After Hover

This was the only site I could find which made the twitter feed box interactive. If you guys find any other site which follows this trend just post about it in the comment and I will make sure to add it here.


Discussion 19 Responses

Excellent tutorial, thanks for the share.

Very nice tutorial! I’ve been using the Google Twitter API for awhile now. I love showing my clients that I can implement their social media sites and regular websites together.

Really useful tutorial for a lot of people. Keep up the great work bro.

Jacques
Creativeoverflow
.-= Jacques//An1ken´s last blog ..Slice your Designs with Pixelcrayons our New Sponsor =-.

Awesome blog post, thanks for keeping me busy!

Hi that is a genuinely interesting view, It does give one food for thought, I am very delighted I stumbled on your blog, i was using Stumbleupon at the time, in any case i don

Yo, I read your blog every once in a while.. i’d be great to know if you have any difficulties with spam posts. I happen to on my web log.. Which plugin do you use to prevent it?

Thank you :) Well, yeah almost every blog which has a slight traffic has problems with spam posts. In wordpress, the best spam protecting plug-in is Akismet. You need a wordpress API key to activate it though. You can get the API key from an account at wordpress.com Let me know if your spam problem is solved ;)

Thanks for taking the time on this, I was looking everywhere for something similar, though this is just as helpful.

Hello : good weblog, simply trying around a blogs, appears the reasonably nice platform you’re using. I am currently using Live journal for some associated with my websites however wanting to change one in all associated with them over to a platform kind of like yours like a chance run. Something in explicit might recommend concerning it?

Nice post. Pretty good info for everyone who’s into social networking.

nice hover play…
clear in explanation thanks ^^

This is an awesome tutorial.was searching for this since i see the same on ProductiveDreams by Gopal Raju.if you can can you make an another tutorial too ie the same hover effect displaying number of followers

hey
really awesom hover play with twitter but i want some help i want to put this
on blogger and i have added css but i want to know where the html goes
thanks

Well, you can include the HTML part in the footer of your blogger page. :)

nice works and very detail, i like it.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>