Embedding a Twitter Hashtag in a Blog

Twitter no longer supports the method described below - under their new API (May 2013) all widgets must be created via the Twitter website itself in order to work.

Visit http://twitter.com/settings/widgets and follow the instructions to create a new Search widget that returns results for the relevant hashtag.

I think almost every blogger who's also active on Twitter now has their latest tweets embedded into their blog template one way or another - if they want them to be visible there, that is.

But I got to thinking whether there might be a way of embedding a Twitter hashtag in a blog template, so you could filter what appears and let other people's tweets about your blog show up, too.

The answer to the question is, of course, yes. Twitter actually offers a whole range of widgets to achieve that and other similar tasks in a customisable, graphical form. Use the form below for a hashtag widget, or check the full range at http://twitter.com/goodies/widgets.


Embed a Twitter Hashtag in a Blog Template

The below form will generate the code to embed a Twitter search widget - include a hash sign in your search term, and it will track the relevant hashtag. Omit the hash, and the widget will be a free-text search, if that's what you want.

Here's what it should look like:



Fill in the options below - depending on your blogging platform, you may need to add the code in an HTML widget or section, rather than directly into your template code.


Hashtag:
(Delete the # for free-text search.)

Header 1:
Header 2:


Load:

All tweets at once

Timed interval
How often? (in seconds)


Interface:

How many tweets to load?
Update as tweets come in?
Allow manual scrolling?
Loop through results?


Show:

Avatars?
Hashtags?
Top Tweets?
Timestamps?


Custom colours:

Use ColorPicker.com to find hex codes

Outer background:
Inner background:
Tweet text:
Header text:
Links color:


Dimensions:

Width:
Height:
(both in pixels)




21 comments:

Anonymous said...

It doesn't appear to matter whether or not I select 1 tweet to load or 20 tweets to load. Is there a part of the code missing?

bobble said...

Y'know, I never noticed that... there is part of the code missing, but it's not my fault, honest!

The template above is based on Twitter's Search Widget code at https://twitter.com/about/resources/widgets/widget_search - and sure enough, it looks like their widget takes no notice of how many tweets you tell it to load.

I can't actually find any combination of options on Twitter's own page that makes the number of tweets option meaningful, sorry!

When I was making this page, I just copied over all of the options Twitter gives you, and then reconstructed the code for you to copy and paste, but you're absolutely right, there doesn't seem to be any way to make the number of tweets have any influence on the finished code.

Feel free to try it out on Twitter's site to see if you can get it to work - I've just had a go, and can't seem to manage it. Sorry I can't be more help!

Anonymous said...

To control the number of tweets to load, insert 'rpp: 6'. So, for example, to show 6 tweets it would be:
type: 'search',
search: '#hashtagName',
rpp: 6,
interval: 30000,

You code generator was extremely helpful -- THANK YOU!

bobble said...

Excellent Anon, thanks for that - I've updated the code generator above to include the rpp line, so it should work as intended now.

Cuatromil quinientoscincuentaycuatro said...

thanks

Samuel Morgan said...

thank you - this is awesome

Anonymous said...

Great!

Thank you so much

Sam said...

Thanks. Very helpful and quick implementation on my blogger blog.

Jim, Rocky & Doug said...

Can't seem to make the gadget work on blogspot.com Any ideas?

Anonymous said...

thanks, works perfectly!!!

Anonymous said...

great!

Corey Fuimaono said...

Could you make the widget work, so that hashtag tweets from specific user accounts show up?

bobble said...

At the moment, yes - all you need to do is put the hashtag and the account in the search box above, leave the 'hash' sign on the hashtag and put 'from:' in front of the username.

So I could search for:
#phronesis from:bobblebardsley

Be warned though, the widget doesn't search as far back as Twitter's web search, so if it's not a very active hashtag, not much (or nothing) will come up.

Also, Twitter are changing the way they handle external access to account feeds from March 5th, so I'm actually expecting this widget to stop working. I'll post a workaround or updated method as soon as possible after that time, if I can find a good alternative, but it's likely to be slightly more technical in terms of authenticating yourself with Twitter's API (that is, getting external-site permission to access your account's tweets).

Jo Hawkins said...

This is a FANTASTIC tool. Thank you so much for providing this - there is nothing else like it available. My students contribute to a class blog where where they talk about Australian history so it is perfect to have a space where we can share ideas. I do have a question though. I have posted four times so far (https://twitter.com/search/%23HIST3003) however the widget on our blog only shows the most recent two tweets. The tweets are are not scrolling or looping. Does anyone else have this issue? I know you mentioned that the API was changing on March 5. Let me know what you think. Cheers!

bobble said...

Hey Jo,

glad you've found this useful. Firstly, yes, I believe the API update will stop this tool from working, so you might want to find an alternative anyway.

Secondly, try unticking 'top tweets' when you generate the code above, and it should show all of your tweets rather than just the 'top' ones (I'm not actually sure how Twitter define what a 'top tweet' is anyway).

The new way to embed hashtags is via a bespoke Twitter widget - see https://twitter.com/settings/widgets - and you'll need to tell Twitter where it's going to be published (ie the URL of your class blog) at the time that you generate the code. It's less customisable, but it should continue to work under the new API version - click the option for a 'search' widget. Hope it helps.

Jo Hawkins said...

Thanks for responding so quickly! I did not realise Twitter provided a widget now. It's looking great!
http://thehistorydiaries.blogspot.com.au

bobble said...

Ah yeah, love it! The new widget's actually not half bad as long as it's going on a white background. It's a shame there aren't more colour choices, especially as you have to specify the target page, but other than that it's much more sophisticated than the old method described above.

Glad I could help - might be time for a full write-up of the new widget options, I think!

Sam Kersey said...

As an aspiring journalist, I'm certain this tool will prove indispensable in the progress of my blog http://www.flighthorizon.blogspot.co.uk

Thank you so much!

Robbie said...

TWITTER WIDGET: The Twitter API v1.0 is deprecated, and this widget has ceased functioning.

Bobble Bardsley said...

Thanks Robbie,

you're right, the method described on this page no longer works - but if you follow the link in the big red box up top to the Twitter widgets page, you can create a new one there that will do the same thing.

jowdjbrown said...

Omit the hash, and the widget will be a free-text search, if that's what you want. twitter verification

Post a Comment