October 28, 2011

How To Display Recent Blog Posts On Your Website

The recently published posts to your blog can be displayed on your website using the blog's feed in conjunction with javascript. When you publish a new post to your blog, the recent posts list on your website will automatically update to display the latest posts with the javascript added to your website.

First, grab the URL for your blog's feed. The feed for your blog can be found by adding atom.xml to end of your blog's URL or clicking the Subscribe link on your blog. For example:


Second, use a third-party feed to javascript tool to generate the code required to display the posts on your website. There are several third-party feed or RSS to javascript tools available. We recommend Feed2JS as the easiest.

Using Feed2JS

Go to the Build page at feed2js.org.

Enter the blog's feed into the field:

Feed2JS offers many options to choose from to determine what content is included from your feed. After adjusting the settings, click Generate JavaScript to produce the code.

You can also style the output with CSS.

See the Feed2JS Help page for more tips.

Add the code to your website. Copy the code which was generated and place it on your website where you want the recent posts from blog to display.

Please keep in mind that although the feed for your blog is updated with new posts immediately after publication, it may take some time the script displayed on your website may take longer to update with newly published posts.

Other ways to integrate your blog and website:

  • Use Domain Mapping to map a subdomain - e.g. blog.website.com - of your website domain to your blog.
  • Add a website link below the banner of your blog in the Navigation Bar.

Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services