How To Make A Custom Twitter Feed For Your Website

Twitter has become very popular and has turned into a tool that a lot of websites have used to connect with their customers and promote themselves. A great, and now popular, way to show those who visit your website that you have an active Twitter account is to add a Twitter feed to it. In this post I will show you how to add a custom Twitter feed to your website, providing you with code and styling tips (don’t worry… it is actually very easy).

Twitter provides you with various free widgets that are easy to integrate with your website for those who are not capable of easily designing anything custom, but if you can, try to go the custom rout of creating (or having someone create for you) a custom looking feed.

Picking where to place your custom Twitter feed

The first thing to do is to figure out where you would like to add your custom Twitter feed. Typical places to add your feed would be to your homepage, your global footer (especially if you have a large one), or a sidebar that might have navigation or promotional things. Once you know where you would like to place your Twitter feed, figure out the exact size that you have to work with. Remember that you only have 140 characters maximum in each post on Twitter so there will be a maximum amount of space needed, but make sure that the area you have allotted for your custom Twitter feed has some flexibility to become slightly larger or smaller, based off of what is needed when you test it out for the first time.

Designing your custom Twitter feed

There are not a lot of limitations to how fancy you can design your custom Twitter feed and you can easily match it to the look and feel of your website. You can define how many of your tweets (posts on Twitter) you would like to show up, but I will be talking about using just your most recent (only one) tweet, which is the most popular thing to do.

First try creating a new document in Photoshop (or another image editing tool) at the size you have allotted your Twitter feed to rest in. Reference a recent tweet that you made that is close to the maximum 140 characters. Select that text and paste it into your image editor. Then snag some more text that references how long ago that you tweeted that post (such as “about an hour ago”), copy, and then paste it after your post that you originally pasted. This will mimic the amount of text your feed will dynamically place on your website within the area you allotted.

If possible, try to style that text similar to the style you currently use on your website, or how you would like it to appear once live on your website. Pay close attention to the font and size (make sure it is a web-safe font). This will give you a good idea how much space your text will take up. If it takes up too much space, try playing with the font size and/or line height.

Once you have spent time with your text, then style the rest of the custom Twitter feed. This is everything else that you would like to mold to look like the rest of your website, such as the background color, shadow, outline, texture, or anything else that will apply to the appearance behind the text from your Twitter posts. After you have the appearance of your custom Twitter feed designed exactly the way you want it, you will start chopping it apart to integrate it into the code.

The way that I have found that works best is to have a top image, a bottom image, and a one pixel tall middle image that will scale/tile. The middle image will end up going just where your text from your most recent tweet is. The top image will go above your tweet and the bottom will go below that. Taking into account padding/spacing, chop the top part from the top of your image down to right above where your text starts. Your bottom image will be the same but be cut from the bottom of your image up to where your text ends. This will account for the spacing/padding that will occur above and below your tweet. Then cut, going from left to right, one pixel high, for your middle image. If you have a gradient applied to the background of your custom Twitter feed, make sure that this middle section is set up to be a solid color with the gradient stopping at the end of the image where it had met the text for the top and bottom portions. If you have certain styles (such as gradients, while using Photoshop or other popular image editing software) applied to your image, make sure you flatten your image, eliminating the layers, in order to preserve the appearance and not have your gradient or styles reshaped to the new size that you just cropped.

Save your three image files (the top, bottom, and middle sections) as something that indicates what it is, such as that it is being used for Twitter as well as what section it is for. An example would be “twitter_t.png,” with “t” indicating that it is for the top section”

Styling the CSS

CSS allows us to do a lot with the appearance of your feed, including stylizing the text. You will mainly be creating an area for the top image, one image for the bottom area, and then (most importantly) the middle section, where all of the magic will happen. Remember that this is set up to have the middle section tile so keep that image one pixel high, spanning the width you would like to have your background for your Twitter feed. I have my top image set up to be 34 pixels high and my bottom image set to be 29 pixels high. Those all will be thrown into a container for the area you designated for your Twitter feed. To allow people to visit my Twitter account page, I use the bottom image to link to my page (a popular thing to do, with your “follow me” text placed on there) but this is completely optional.

#twitter_t {
   width: 445px;
   height: 34px;
   background-image:url("your top image");
}

#twitter_m {
   width: 415px;
   padding: 0 15px;
   background:url("your middle image")  0 0 repeat-y;
}

   #twitter_container {
       min-height:45px;
       height:auto !important;
       height:40px;
       padding-bottom:10px;
   }

       #twitter_update_list {
           width: 415px;
           padding: 0;
           overflow: hidden;
           font-family: Georgia;
           font-size: 14px;
           font-style: italic;
           color: #31353d;
           line-height: 16px;
           font-weight:bold;
       }

       #twitter_update_list li {
           width: 415px;
           list-style: none;
       }

       #twitter_update_list li a {
           color: #5f6d76;
           border-bottom: dotted 1px;
           text-decoration: none;
       }

       #twitter_update_list li a:hover {
           color: #31353d;
           background: #d3f1f9;
       }

#twitter_b {
   width: 445px;
   height: 29px;
   background-image:url("your bottom image");
}

I have my site structured so that it is 900 pixels wide with two columns split up with a ten pixel margin between the two columns (with no margin on the outer sides). My custom Twitter feed and my list of recent blog posts are standing side by side, taking up a width of 445 pixels each (both added up with the 10 pixel margin totaling 900 pixels wide). You can adjust the above code to work best within the area you have designated for your custom Twitter feed.

To keep things organized, I named everything starting with the word “twitter,” followed by an underscore with what it does after. Like my images, I have “t” indicating it will be the top section, with “b” the bottom. “twitter_m” will be acting as my middle section and this is where I have my middle image tiling from top to bottom of whatever space is taken up by the things inside. I have the width and padding adjusted to make sure that whatever is inside “twitter_m” will be gapped out from the left and right side similarly to the space I have given using the top and bottom images. To be placed within “twitter_m” is “twitter_container” which will hold the portion that makes up the text of the Twitter feed, called “twitter_update_list.” In the CSS above, you will see mostly things that apply to the appearance of the text that will be populating the custom Twitter feed, coming right from your Twitter account. If you have your main CSS file organized with all the text styles together in one part of it, you could go ahead and take “twitter_update_list” portions and throw them together with your other text styles.

Since I want to keep the general alignment of things on my site perfect, I would like to try to keep my Twitter feed taking up about the same height as what the list of my 4 recent blog posts are (since they are side by side with the feed in the left column and blog posts in the right). I have my custom Twitter feed set up so that “twitter_container” keeps the height at the minimum desired height to make it look good next to my blog posts section and also have the ability to grow downward if for some reason my most recent Twitter post caused a few characters to jump to the next line. I implemented a hack to get this sort of thing to work cross browser. I have designed it very carefully so almost in all situations, if I max out the 140 characters that Twitter allows, along with the “posted such and such time ago” text, it will stay within the amount of space I have given it and not have to grow downward. It is better to be safe than sorry and I have seen plenty of these custom Twitter feeds that have characters jumping below where it should, in some cases below the box/graphic the text is meant to stay inside.

Inserting JavaScript

To get your Twitter feed to pull from your latest tweet from your Twitter account, you are going to need to insert some JavaScript into the page your feed will rest in. There are several areas where you can place this code but I, and many others, have found that the best place is to place it at the very end of your code, right before the end </body> tag.

In the code above, swap the word “REPLACE” with your account name. An example would be if your account name was “twitter.com/ChrisKirkman,” you would just place “ChrisKirkman” in there instead of the word “REPLACE.” If you do decide to display multiple tweets, instead of the one that I suggested, then all you will have to do is change where it says “count=1″ to whatever number of tweets you would like to display. Where it links to “blogger.js,” you can have your own file on your server that you link to that has the same information with some minor tweaks, if you like.

Inserting the HTML into your page

<div id="twitter_t"></div>
<div id="twitter_m">
   <div id="twitter_container">
       <ul id="twitter_update_list"></ul>
   </div>
</div>
<div id="twitter_b">

The code above references the CSS that was styled earlier on. Based off of your layout, all of that code could be thrown into another container (or table) to allow it to work best with the rest of your layout design.

Putting it all together

Once you have everything in place, push it live on a page that you can test it on. It will more than likely take some tweaks and changes to get it perfect but once you have everything adjusted, it will work fantastically and serve its purpose of allowing visitors of your website to see that you have a Twitter account, are active on Twitter, read what your last tweet was, and possibly become one of your Twitter followers.

Something like this has potential to connect you with your website visitors on Twitter a lot more effectively than placing a button or link on your website, usually hidden at the bottom of your page.

Want more, follow Chris on Twitter!

If you enjoyed this post, please consider leaving a comment or subscribe to the feed and get future articles delivered to your feed reader.

Powered by Wordpress. Copyright 2008 - 2010. Miva Merchant E-commerce Blog. All rights reserved

• Home
• About
• Miva Merchant Video Library
• Store Spotlight Submission
• Twitter
• Resources