PHPMatters Help You Better Hosting Your PHP-based Sites
How to Create Twitter Embedded Timeline to Website - Great to Showcase Your Update

How to Create Twitter Embedded Timeline to Website – Great to Showcase Your Update

When you enter the homepage of PHPMatters, have you found a special Twitter section located at the right-hand sidebar? This section looks like a timeline, showcasing all your latest updated posts with a tweet format in chronological order. In the following, we’d like to tell you how to add such a useful Twitter embedded timeline to your website with ease.

Timeline Options

Before presenting the detailed steps concerning about how to create Twitter embedded timeline, we firstly want to tell you the basic timeline types. As different people want to emphasize different perspectives, Twitter offers five options in total.

User Timeline

This is the default option that is adopted by the majority of webmasters on the web. It includes a Twitter Follow Button in the header and a tweet box in the footer, meaning that people can follow your account and tweet to you directly from your website, without the need to find you from the Twitter page. In addition, there are also three hidden buttons available in the bottom of each tweet for reply, retweet, and favorite.

User Timeline

Favorite Timeline

Sometimes, you may not be satisfied with all the posts you have created, and only want to showcase your favorite posts in the timeline. In this case, you can choose the Favorite Timeline that only displays the tweets you have favorited.

List Timeline

As a great way to better organize your interests and to be integrated with the Twitter society quickly, list creation or subscription is common among Twitter users. In this case, if you only want to showcase the tweets that are specific to a list of twitters, then you can choose this timeline.

At the header of this option, you can check the list name, description, as well as the link directing to the account of the list creator.

List Timeline

Search Timeline

This timeline is not used to showcase your tweets, but to display all the tweets related to a specific search query. The header part presents the hashtags, and the footer part offers a tweet box to help people join into the conversation from your webpage directly.

Search Timeline

Collection Timeline

This option is also known as the Custom Timeline. With it, you can have a full control over which tweets can be displayed. Note that to use this option, you need to create a Twitter Collection with all your loving tweets included.

Get the Timeline Coding

No matter which option you are choosing, you only need to get the corresponding code and paste it to your website to have the timeline embedded. To get the needed lines of code, you firstly log into this Twitter Widgets page using the Twitter account of your website. Here, you can see the existed widgets used in your site, and you can edit and delete them freely.

Then, click the Create New button in the right top section. In the next page, you are allowed to choose a timeline option and make some configurations.

Timeline Coding

  • Username needs to be the official name of your website.
  • You can choose to exclude replies and auto-expand featured images freely.
  • The height can be configured based on your needs.
  • You can choose the themes between the dark one and light one.
  • If you don’t like to default blue color for the link, you can also decide the link color.

After previewing the final effect in the right hand, you simply need to click the Create Widget button. The required coding can be generated immediately.

Customize the Timeline Coding

Customize TimelineYou can only decide whether to showcase the reply box and whether to enlarge the photos, as well as decide the height, theme, and link color during the widget creation process. Some other factors need to be modified from the coding stuff using the related attributes.

  • Width: width=”px”.
  • Chrome: data-chrome=””. You can choose among “noheader”, “nofooter”, “noborders”, “noscrollers”, and “transparent”.
  • Border color: data-border-color=””.
  • Tweets limitations: data-tweet-limit=””.

After customizing the timeline the way you like, now you can paste the code into any webpage of your website. If you want it to be displayed at any page, you can create a new text widget and locate this widget into your sidebar. Read this tutorial about How to add Twitter Follow Button for more information.