Having a ‘blog’, featuring news, articles and thought-provoking content, is a great way to help your business gain credibility and enhance its reputation. But in order to make the most impact on both your target market and on search engines, your blog and organization’s website should be well-integrated.
There are, however, several different methods of integrating a blog with an existing site, including the use of “iFrames”, rebuilding the site using a blog or CMS platform, creating a new theme or child theme, and using a RSS feeds. Each have their own benefits and drawbacks.
iFrames
An iFrame is an inline frame that contains another document. You can think of it like a window into another page, which shows that page in its entirety.
iFrames may seem too good to be true, and, indeed, there are downsides. You may find that it can be difficult to make your iFrame-contained blog fit your website stylistically because a blog will have its own style that may not match the parent website. Furthermore, search crawlers generally ignore iFrame content when considering the content of your website, eliminating its potential impact on your site’s search engine marketability.
iFrame Example code
<iframe src=”http://www.kobayashi.ca/” width=”420″ height=”400″ marginwidth=”0″ marginheight=”0″ frameborder=”no” scrolling=”yes” style=”border-width:2px; border-color:#333; background:#FFF; border-style:solid;”>
</iframe>
Rebuilding
Another option is to rebuild your site using a blog or CMS platform such as WordPress. Since WordPress is best known as a blogging platform, it’s sometimes forgotten that WordPress can be used as a content management system to create professional, standalone websites. You can rebuild your webpage using WordPress as its backbone, and change your html files to WP “pages”. This does, however, require considerable effort, and will inevitably change the overall appearance and functionality of your website.
Themes
Creating custom themes based on their current website is an option that will keep the same appearance and functionality of their website, but add fully integrated blog functionality. This is often the most difficult route to integrating a blog because it requires a great deal of custom coding and platform-specific expertise, as well as the need to revise the theme as the platform evolves.
An easier option is creating a WordPress child theme, which is a customized theme based on a pre-existing one. This allows you to change the original’s appearance and functionality to match your website, while relying upon the parent theme for solid and constantly updated code.
RSS
Integration using a “really simple syndication” (or RSS) feed offers a really simple solution to get your blog content onto your site without making any radical changes. While not as fully integrated as a site rebuilt on WordPress, nor a custom theme, pulling an RSS feed from your blog lets you easily show links to its articles on your existing site.
For the example code, we’re using Google’s Feed API, which lets you download any public Atom, RSS, or Media RSS feed using only JavaScript. To use Google APIs, you need to sign up for a free API key, which lets Google contact you directly if it detects an issue with your site.
No matter where your blog is hosted, you can get your posts to display on your website as long as your blog has an RSS feed. Squarespace, WordPress, TypePad, Tumblr, Blogger, and many others automatically create RSS or Atom feeds for your blog. Blogger, for instance, makes its RSS feed available in the following format: http://BLOGNAME.blogspot.com/feeds/posts/default?alt=rss
Once you have the feed URL for your site, you can go through the following steps to display your latest posts on your website.
RSS Feed Code
This example code creates a simple RSS feed that you can use on your website. Insert the following code within the head of your HTML page (between the <head> and </head> tags). Note that you will have to replace “YOURKEY” with the unique API key that Google generates for you.
<script src=”https://www.google.com/jsapi?key=YOURKEY” type=”text/javascript”></script>
<script type=”text/javascript”>
google.load(“feeds”, “1”);
</script>
You can also change the CSS styling of the RSS feed to suit your website within the head:
<style type=”text/css”>
#rssfeed
{
font-family: Arial, sans-serif;
}
</style>
Insert the following within the body of the HTML file where you want the RSS feed to appear. We used “http://www.kobayashi.ca/feed/” as an example feed URL. You can replace this with your blog feed URL. The variable “feedlimit” can be changed to show more or fewer blog entries.
<div id=”rssfeed”></div>
<script type=”text/javascript”>
var feedcontainer=document.getElementById(“rssfeed”)
var feedurl=”http://www.kobayashi.ca/feed/” //URL of the RSS feed to load
var feedlimit=5 //number of entries to display
var rssoutput=”<b>Latest posts from our blog:</b><br /><ul>”function rssfeedsetup(){
var feedpointer=new google.feeds.Feed(feedurl)
feedpointer.setNumEntries(feedlimit)
feedpointer.load(displayfeed)
}function displayfeed(result){
if (!result.error){
var thefeeds=result.feed.entries
for (var i=0; i<thefeeds.length; i++)
rssoutput+=”<li><a href='” + thefeeds[i].link + “‘>” + thefeeds[i].title + “</a></li>”
rssoutput+=”</ul>”
feedcontainer.innerHTML=rssoutput
}
}window.onload=function(){
rssfeedsetup()
}</script>
For more on creating RSS feeds using the Google Feeds API, visit Java Script Kit, which provides more in-depth information on the API’s capabilities and how to use them to create an even richer blog feed.
This code will give you a list of five blog posts with links to them. It could be placed on one of the margins of your website so that visitors are aware of your latest blog activity. It can also be styled using CSS to fit in better with the webpage.
Integration techniques vary in difficulty and impact, however, the benefits of integration, we think, are worth the trouble.
If you have questions, or need help integrating your website and your blog, please let us know!