Now that I finally gave in and signed up for Twitter, I want to add my Twitter feed to my blog. And as one might suspect, Twitter offers a few options to help you get their product on your site. Here’s how I put my Twitter updates in the TechTraction sidebar.

Turn-key solutions for putting Twitter on MySpace, Facebook, Blogger, or Typepad

If you want to add Twitter to your MySpace, Facebook, Blogger, or Typepad accounts, turn-key solutions already exist. I don’t use any of these services, but I do have a Facebook account (just because). Therefore, I walked through the basic installation process for Facebook just to get a sense what it was like for those users. Here’s what I did:

1. I logged into my Twitter account and looked near the top of the right-hand sidebar for a link that says “Put your updates on your site!”
2. I followed that link and then selected the corresponding service from the list (e.g. MySpace, Facebook, etc)
3. In my case I selected Facebook which gave me a button labelled “Install Twitter in Facebook”
4. I pressed the button and, since I was already logged into Facebook, was taken to Facebook where the application was installed

There were several access options I needed to confirm, which I suspect regular Facebook users are familiar with. Since I rarely use Facebook, I wasn’t confident about giving up all this access so I canceled the installation at this point. I believe that had I continued, a Twitter application would have appeared on my Facebook home page displaying the latest updates from my feed.

The “other” option for putting Twitter on your web site

Not interested in putting Twitter on any of the predefined destinations? Follow the first 2 steps listed above and during step number 2, select the “other” option (last option in the list). This option provides 3 general purpose ways to put Twitter on your web site:

• Flash, Just Me: Add just your updates to your site with embedded Flash. This option allows you to customize the color so that it compliments your site.
• Flash, With Friends: Your updates along with the updates of the individuals you’re following. This option allows you to customize the size, shape and color of the embedded Flash solution.
• HTML/Javascript: This option is fully customizable with CSS so you can make your updates display on your site in a manner that completely blends in with your site’s overall design. To use this option, you must be able to insert Javascript into your site design.

Since I have a WordPress powered blog, which uses a custom theme, I selected the HTML/Javascript option. This option relies mostly on customization through a site’s CSS definitions but does offer some interactive options:

• You can set and test the title for your Twitter feed
• You can specify how many updates should display in your Twitter feed
• As you adjust the settings, you can immediately view the results in the Twitter feed preview that appears to the right of your settings
• Please note, this option is limited to displaying your updates only. If you want to display your updates and the updates from the people you follow, you need to select the second Flash based option, or search for a non-Twitter created option (I suspect they do exist)

I altered the suggested title and chose to display the last 3 updates. Twitter provided the necessary HTML mark up in a text box that I could cut and paste into my blog’s theme. Unfortunately, a straight cut-n-paste won’t work unless you want everything at the bottom of your web page. In order to make the provided mark up work correctly, I had to split it into two sections and put it in different parts of my blog’s theme:

1. Copy all of the information enclosed in the < div > tags including the tags themselves. This section of code is your feed display
2. Paste this bit of code where you want it to appear on your site. In my case I pasted into my sidebar.php file for my WordPress theme. This particular file is what makes up the sidebar portion of my blog. If your theme uses more than one sidebar.php file, you’ll need to paste this code into each of those sidebar files if you want the update feed to display throughout your site
3. Save your changes
4. Next, all of the information enclosed in the < script > tags including the tags themselves. This section of code is the necessary Javascript for feed retrieval
5. Paste this bit of code just above the < / body > tag at the bottom of your site’s design. In my case, the < / body > tag is contained in the footer.php file of my blog’s theme
6. Save your changes and then view the results. Keep in mind, if your site caches it’s pages to improve performance, you might have to clear your site’s cache or simply wait for the cache to refresh itself

Other ways to place Twitter on your web site probably exist

The end result placed my Twitter feed in the sidebar of my blog in a way that blends fairly well with the rest of my site’s design. Some people might prefer the Flash based options because it stands out better than the pure HTML/Javascript option; however, I suspect there are countless people out there that have come up with some very creative and interesting ways to put Twitter on a web site. If you’re not satisfied with what Twitter offers, just search around for something else. If you find a particularly interesting way to put Twitter on your site, please share it with the rest of the TechTraction readers by posting a comment below.

Share, Bookmark, or Email this post

If you liked this post, subscribe to TechTraction's RSS feed or TechTraction's email feed

Filed under: How-To & Tech Tips