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 self-hosted WordPress sites using Jetpack blogs.
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="https://developer.wordpress.com" data-show-gravatars="true" width="600">Recent Posts</a>Recent Posts on https://developer.wordpress.com
Awesome!
This works soo slow on my site that I have removed it. I am now using feedburner from Google.
Sorry to hear that. Would you be able to contact us via the contact form on this site so that we can help you figure out why it’s so slow?
I thought Google discontinued Feedburner?
No, go to feedburner.google.com and you can create your feeds to your delight.
Sure, I would be happy to be able to use the widget. Which contact form are you referring to?
The contact form on this site at https://developer.wordpress.com/contact/
How does it decide how many posts to include?
The default is 20
Do we have to use the default “light” and “dark” themes or is there a way to use a custom color scheme?
At this time custom color schemes are not supported.
Is there a way to make sure images in the posts will display using the Timeline creation tool? The first 2 examples above show images but the third doesn’t, which is what mine looks like when I use the tool.
If you do not set an excerpt for your post (or the excerpt is less than 150 characters), then the full post content will be displayed including any images.
This looks to be exactly what I want – but I can’t get it to work. Any suggestions? My blog is: blog.towndrugstore.com
Hi Izzy,
Do you have the Jetpack plugin installed on your blog?
Hello. I have just started getting this error: {“code”:403,”headers”:[{“name”:”Content-Type”,”value”:”application\/json”}],”body”:{“error”:”authorization_required”,”message”:”An active access token must be used to query information about the current user.”}}
Any ideas?
Thanks,
Izzy
Hi, We just recently made a fix to the timeline widget. Are you still getting the above error?