Thursday, 8 November 2012

Add twitter feeds to web pages

From Blogger it is possible to include a widget for the layout in order to display Twitter feeds. But this options is also available from Twitter. I prefer the second one, because the first one seems not to work. Also because the second one is the official one, which has better guarantee. To use the Twitter official widget in Blogger or any web pages, you should do:
1. Open a browser and opens the twitter web page
2. Log in the Twitter account
3. Go to "Settings"
4. On the left panel, select "Widgets"
5. Click on "Create new"
6. Enter the parameters of the new widget. The most important one is the field of Domains, where should have the domain name where the widget will be displayed. You must enter some domain to create a new widget.
7. On the foot of the page, there is some html tag generated. The follow one is the one generated for this blog. Copy the code.
<a class="twitter-timeline" data-dnt=true href="https://twitter.com/jiahaoliuliu" data-widget-id="266541391365148672">Tweets by @jiahaoliuliu</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

8. Paste the code to the web page. For example, for the blogger, do the follow
8.1 On the main settings menu, click on Layout
8.2 Click on "Add Gadget" where you want the widget to be placed
8.3 From "Basic" tab, choose "HTML/JavaScript"
8.4 Enter a title for the gadget. For example "My twitter"
8.5 This gadget works on two ways: The Rich text way and the HTML mode. If you see the option "Rich text" on the top right of the big text box, this means the gadget is in HTML mode. Otherwise, click on "Edit Html"
8.6 Once in the HTML mode, paste the code provided by Twitter in the big text box
8.7 Click on the button "Save"
8.8 In the main layout screen, click on the button "Save arrangement" on the top to save the layout settings

No comments:

Post a Comment