Thursday, 12 January 2017

Insert Twitter Widget on Blogger (fixed)


Some time ago Twitter decided to break the widgets on Blogger because it wanted to retain control over the dissemination of content (and probably because Twitter and Google fell out).

There's a bunch of new - compatible - Twitter widgets out there, variously chargeable or over-branded services and you know what - can't be bothered with 'em. I've gone back to the native Twitter API for my Twitter widget because it's easy...


What the native Twitter API gives you is an Embedded timelines; an easy way to embed multiple Tweets on a website in a compact, single-column view. You can display the latest Tweets from a single Twitter account, multiple accounts, list or search results. What's known as a Twitter collection may be rendered in either a list or a responsive grid template.

A list timeline template requires a widget configuration edited in the Widgets Configurator (is that actually a thing now?) from your Twitter account profile on Twitter.com.

Login to Twitter, go to Settings, all the way down to Widgets in the left menu:

Select Create New (or as I did, edit an existing redundant widget)

The basic settings are straightforward, the key thing to insert the Twitter account handle or URL under Username.

Amend as required the theme, colour, height, exclude replies and Tailoring options (which goes to Twitter's privacy page at https://dev.twitter.com/web/overview/privacy).

Select Save changes to complete this first part.

Select Embed to bring up the embedding options. This kicks in to a separate page for Twitter Publish. You can select Embedded Timeline or Twitter Buttons. Try the different formats if you like. If you select customisation Options from here, you get the same set of options as we had on the main page.

Select copy code. to copy the resulting JavaScript snippet to the clipboard.

Over in Blogger, go to your dashboard and select Layout: on your page tamplate, select Add a Gadget; there are no included Twitter gadgets in Blogger currently, so select HTML/JavaScript gadget and click the plus or drag it to the position on your page.

In the Gadget editor, you can paste the JavaScript snippet. I wanted to limit the number of Tweets appearing (parameter data-tweet-limit="5") so I needed a further customisation. Full details of Twitter timeline widget customisations can be found at: https://dev.twitter.com/web/embedded-timelines#customization.

Irritatingly, there seems to be no way to edit the embed code the Widgets Configurator provides, so you have to embed the basic JavaScript snippet then add customisations in the gadget editor in Blogger (select Edit). You might want to save this edited version somewhere in a text file off line.

My edited widget code looks like this:

<a class="twitter-timeline"  href="https://twitter.com/robincatling" data-widget-id="461625876883316736" data-tweet-limit="5">@robincatling</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>


Save the HTML/JavaScript to save and exit, then in the Layout editor, select Save Arrangement. You can check how the widget works on your Blogger page - preferably in another browser, as not all widgets display correctly when you're logged into the back end in the same session.

That's it. RC

No comments:

Post a Comment

At least try to be nice, it won't kill you...