Add a public Twitter timeline to Blogger

Laser Etchings

Overview

Twitter timelines can easily be embedded into any Blogger web page with just a few lines of code.

Every timeline is interactive and visitors to your site can reply, retweet, and favorite items directly from any page that contains the embedded timeline code.

Tweets can be expanded inline to see information and card details, as well retweet and favorite items and see totals. A tweet box is displayed to engage users to begin a new conversation, and when expanded rich media is displayed in the middle of the screen.

The timeline solution is designed for the web works with mobile and touch screen devices. Content is designed to load fast and updates in real-time. Timeline’s are created at twitter.com from the widgets settings page.

Accessible Twitter Timelines

You can embed a timeline for Tweets from an individual user, a user’s favorites, Twitter lists, or any search query or hashtag.

Any public timeline can be embedded based a user’s favorites, twitter lists, or any search, or hashtag query.

Interactive User Timelines

The example posted below is the timeline for @softpmo. Every timeline comes with a button to follow at the top, which encourages Blogger visitors to follow the user account with just a simple click. There’s a box in the footer for tweeting, so users don't have to leave the page.

Here’s @softpmo’s twitter timeline embedded directly into this Blogger page:

Tweets by @SoftPMO

Create a User Timeline

To begin, log into twitter.com and navigate to the widgets area of your personal settings page. Once there, you are allowed to create and configure new timelines. Start by clicking the button called “Create new” timeline to build custom code for your Blogger web page.

Fill in the fields listed on the form, all are optional except for ‘domains’ which is required.

The configuration you create is stored on the twitter server, and once you've saved the timeline JavaScript code is generated to paste into your Blogger page, which will load the timeline.

The following is example code. It will not work on your website if you copy and paste it, for reasons described in the “domains” section documented here.

1. <a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>

2. <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>

If you've already installed the ‘widgets.js’ JavaScript in your Blogger page to show Twitter buttons or embedded Tweets, you don't need to include this script again.

For additional information about configuring scripts, go here.

The JavaScript gets inserted into Blogger as a gadget. Click ‘Add a Gadget’, to insert the code [item 2 above.]

Insert the code snippet and save the changes.