Embeddable timelines make it easy to display a listing of your latest posts to your website with one line of code.

They allow your visitors to get an overview of your content, follow your blog, and like your content directly from your pages.

Embeddable timelines work for both WordPress.com blogs and Jetpack blogs with the JSON API feature enabled.

Creating an Embeddable Timeline

The easiest way to create an embeddable timeline is to use our Timeline Creation tool.

If you prefer to code things by hand, you must include a copy of our “platform.js” JavaScript for these embeds (and future embeds) to work correctly.

You can do so by putting

<script type="text/javascript" src="http://widgets.wp.com/platform.js"></script>

in the <head> tags of your page.

Once you are loading “platform.js” you can load your posts with a single line of HTML:

<a class="wordpress-timeline" href="http://en.blog.wordpress.com" data-theme="light" width="400" height="600" lang="en" data-show-gravatars="true">Recent Posts</a>

This will show the latest posts for http://en.blog.wordpress.com. There are a couple of options that you can configure to customize the widget:

  • data-theme: Set this to “light” or “dark” to match the color scheme of your site. The default is ‘light’.
  • data-link-color: Allows you to set the link color for content to better match your site.
  • width: Sets the width dimension of your widget. Units are pixels. Default is 300px.
  • height: Sets the height dimension of your widget. Units are pixels. Default is 500px.
  • lang: If the content of your site is in a different language, you can pass a different locale here for some of the interface strings (“Like”, “Follow”, “Following”).
  • data-show-gravatars: Toggle the display of Gravatars (profile images). Useful if you have a multiple users and want to show their profile images, or hide them on single user blogs. Default is off.

Examples

<a class="wordpress-timeline" href="http://matt.wordpress.com">Recent Posts</a>
Recent Posts on http://matt.wordpress.com
<a class="wordpress-timeline" href="http://en.blog.wordpress.com" data-theme="dark" data-show-gravatars="true">Recent Posts</a>
Recent Posts on http://en.blog.wordpress.com
<a class="wordpress-timeline" href="http://developer.wordpress.com" data-show-gravatars="true" width="600">Recent Posts</a>
Recent Posts on http://developer.wordpress.com

5 thoughts on “Embedded Timelines

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s