Visit http://twitter.com/settings/widgets and follow the instructions to create a new Search widget that returns results for the relevant hashtag.
If you saw yesterday's post about embedding a Twitter hashtag in a blog, you might be thinking "That's all very well, but I don't like widgets."
I don't blame you - I'm not a fan of them either. Customisable though they may be, they'll never quite match the rest of your post, or page, or template, or site. The only real way to manage that is to use a format that can be styled using CSS.
But wait - you can do that with a Twitter search too.
The RSS Feed
First you'll need your Twitter search as an RSS feed. It's not hard. Use one of the structures below:
http://search.twitter.com/search.atom?q=%23hashtag
http://search.twitter.com/search.atom?q=textsearch
The only difference is the inclusion of '%23' - the code for a hash symbol - if you specifically want results containing a hashtag, rather than the word without the hash sign.
Whatever you put on the end of the URL, you'll get an RSS feed in Atom format which you can subscribe to in feed readers like Google Reader. If for any reason you want to keep track of a topic outside of Twitter - or you don't use a third-party application capable of following a text or hashtag search - this is already pretty useful.
The Alchemy
This is where our lead turns into gold. Or our RSS turns into HTML, anyway.
Head on over to FeedBurner and follow the steps to 'burn' your RSS feed. You'll eventually reach a page with a URL for your new feed and various options to promote it.
You need to select the Publicize tab, and then BuzzBoost. Again, just follow the instructions - choose the options that meet your needs - and click Activate.
From the results page, copy and paste the code into your page, post, template or whatever, and you should have an HTML list of the latest tweets the next time you refresh the page.
This isn't quite as sophisticated as the widget - it won't automatically update, you'll need to refresh the page for that. But it's a convenient way of getting the latest results for a search and displaying them as static HTML, which you can then format...
The Coat of Paint
There are plenty of CSS options in order to make this list look the way you want. Google's own guidance on basic CSS styling for BuzzBoost is a good starting point.
For a more detailed look at the output of BuzzBoost - and the different elements available for CSS styling - check the other 'best post' from Google on the subject here.
Perhaps the most useful bit of CSS for a really transparent design is:
#creditfooter { display:none; }
This tells the browser not to display the div that normally appears at the bottom of FeedBurner's BuzzBoost HTML output, stating that it's powered by FeedBurner.
If you switch this off, and choose not to have your links routed via FeedBurner for tracking purposes, there should be no obvious way (short of viewing your page source) for your site visitors to tell how you're embedding the latest tweets, and nothing left to distract from your now-cohesive site design.
An Example
One of my own websites, POPSICULTURE, shows the potential of this approach. The iTunes charts - both the top songs and the top albums - are powered by FeedBurner.
I wrote a custom script to cycle through each list and number the entries, as the original HTML is an unordered list. The CSS is styling each chart to match the rest of the sidebar, and the FeedBurner logo is hidden at the bottom of each.
These charts help drive our affiliate earnings higher, as well as increasing the amount of updated content on every page of the site. In the weeks when our day jobs get the better of us, it's nice for me and POPSICULTURE co-author Dan to know that at least one part of the site is keeping things relevant until we can turn our attention to the next review or update.
Questions/comments?
This site doesn't have comments enabled, but if you find this helpful and want to say thanks, or want to let me know of something I've missed, you can find me on Twitter @bobblebardsley - do come and say hi.
