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.
You can do so by putting
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.
<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="https://developer.wordpress.com" data-show-gravatars="true" width="600">Recent Posts</a>Recent Posts on https://developer.wordpress.com