Sunday, 30 December 2012

[How to] Add your Twitter feed to your blog - Picture tutorial


Hello everyone!

As you may notice on the bottom right corner of the page, I added my Twitter feed to The rob Point ;-)
I spent quite a long time searching for a plugin, a lot of them didn't work for some reasons... Finally I discovered that I just had to use a plugin from my Twitter account, which is really easy to implement :D

So here you go, this is how we add a twitter feed to one's blog or website in three simple steps:
(note that this also works if you want to obtain the feed of a random other person on Twitter)


//1/ Create the widget in your Twitter account

To achieve that, just go to the "Edit profile" menu, and click on the "Widget" tab...



Then hit the "Create new" button!





//2/ Configuration



Enter the username of the person you want to follow the feed here, e.g. you if you want yours

If you want to add the widget to a banner or to the side of your page, I recommend you adjust its height. Note that the width is automatically adjusted



To suit your blog theme, it is a good idea to change the color of the links in the widget...

This step is a bit tricky if you're using a platform that adapt the url to the country of the reader (like me). In that case, you should put various urls like in the example, or the widget won't work in the excluded countries. I didn't found a better way to do it until now...

Don't forget to save. You will be able to edit these properties at anytime. ;-)




//3/ Add the widget to your blog or website!

This step varies depending on your editing interface. I'll show it in pictures for blogger, but i think the steps are almost the same on every platform ;-)

Click on the widget's html code below the preview panel to select it, and copy it




Create a blank widget in your blog administration panel


Note: If you use brute html to modify your blog model, you can always copy the code straight in your html file and it will work anyway



Add the html code from your Twitter widget in your blog's blank widget :-)


Note: You don't have to add a title, because the widget already includes one, so it will look weird...




And there you go! :D

This widget can take any width, so if you want you can also easily use it on a dedicated page, or on top (or bottom) of your page as a banner. You'll just have to put in the correct height in Twitter.

Note that if you want to modify your widget, the only way to do it is via your twitter account. The html code is only to get the widget configuration from Twitter.

I hope these helps some of you!
And... a very happy new year 2013, to all of you! ;-)