Posts Tagged ‘iFrame’

Adding A Blog To Your Site With An iFrame

Thursday, January 27th, 2011

While not optimal for SEO, sometimes there is a case for adding a blog to a site through an iFrame. Here's a quick look at what it means to create an iFrame on your site, and how to do it:

An iFrame is literally a window-within-a-window on your site. On a page on your site we can create a window that shows the view of a completely different site. In this way you can include the contents from another site on a page of your own site. It is relatively easy to do and offers a solution to showing content on your site that is being hosted on another site.

Many of our ListPipe customers are using an iFrame to show the contents of their hosted blog on their HTML-based Home Page. As an example, take a look at Bay Hundred Automotive, who has created a 'Video' page on their Home site, and are showing their hosted blog through an iFrame. The result is that they can offer the videos to their customers on their own site without having to develop a more complex solution. Their Home site is not running PHP or another dynamic language site, so they were limited in their options for including the content and decided an iFrame would suit their needs.

Notice that they have a static page with a window embedded inside a 'frame'. Inside the frame you can navigate the site, watch videos and click links. An iFrame is the next best thing to having the content actually exist on your site.

The pros of an iFrame are that it is easy to implement, and universally available (independent of your code language). The cons include lower SEO and the drawbacks of having dual navigation. Sometimes the tradeoff makes sense.

Here's how to create an iFrame on your site to include your ListPipe blog:

  1. Create your account on ListPipe as a 'Hosted Blog' account. This will give you an independent blog site.
  2. Create a new page on your Home site for the blog (name it 'Blog' or 'News', etc.)
  3. On the new page, place this line of code: <iframe src="http://*****.com/" width="100%" height="600" style="border:0;"></iframe>
  4. Replace the five asterisks (*****) with the URL of your ListPipe Hosted Blog (replace '.com', too, if you need to)
  5. Save, and load. You should see your ListPipe blog appear within a window on your new page, just as it does on the Bay Hundred Automotive site in our example.

Good Luck!