WordPress Comments outside the WordPress Site (External Page)

By Akbar • July 1st, 2012

I had been using Google Friend Connect for more than 2 years on my site various product pages for getting the feedback. It has worked great for me, but then all of sudden, Google decided to drop this service in favor of new Google+. While I do created new product support pages on the Google+, I find it a bit inconvenient for my visitors to leave my site and post the comments on some other website.

I searched for various feedback widgets and APIs, but nothing seem to integrate into my website well. Now I have been using WordPress for a long time on my site for my blogs, but most of my main site pages are static XHTML files, and I would like to keep them so  because of extra control I get this way and due to some other technical issues. All that said, I have been a big fan of WordPress comments as well. These are nice and simple, plus when used with Akismet, you almost get rid of all the spams automatically (which is even more good than it sound at first).

So, I decided to find some way to use the WordPress page comments on my existing simple HTML pages without having to implement all existing pages in new or exiting WordPress site. After a bit of testing and tweaks, I was able to make it all work. So, I thought to share this with community in hope that it will help someone else, or I may even get input from users on how to best do this.

Now coming to the solution, the first thing I did was create a new Page Template under the following path:
/wp-content/themes/[theme-name]/comment.template.php

Here is how my template page looks like:

1
2
3
4
5
6
7
8
9
10
11
12

<?php
/*
Template Name: Product Comments
*/
?>
 
<link rel="stylesheet" href="http://blog.syedgakbar.com/wp-content/themes/personal/style.css"
 type="text/css" media="screen" />
 
<div style="padding-top:10px">
	<?php comments_template(); ?>
</div>

As you can see above, I have only placed the comment_template call in the page, so this shows only the page comments and don’t show title or page content.

Now save this file, and now try to create a new page in WordPress. When you do this, you should see this newly created template in the Template dropdown in Page Attributes group-box (key for this is “Template Name: Product Comments” in comment of new template php file).

Okay, once this is done. Save the page and publish it. You can also preview it for testing. When you preview, note down the page-id. You are going to use it next. Next go to the HTML (or any other page of external site), and you can show these WordPress page comments using the iFrame on that page; something like this:

1
2
3
4
5
6

<div>
	<script type="text/javascript" src="/js/productComment.js"></script>
	<iframe id='productComment' src="http://www.syedgakbar.com/blog/?page_id=229"
	width="100%" style="border:none"
	onload="OniFramLoaded('productComment', document.body.scrollHeight)"> </iframe>
</div>

The Scrtipt tag above and the JavaScript function call in the above code is optional, and it’s used to re-size the parent page iFrame dynamically (based on comments page height) to avoid showing the scroll-bars in iFrame. For those of you who are curious about the content of productComment.js, here it’s:

1
2
3
4
5

function OniFramLoaded(iframeID)
{
    var frameWin = document.getElementById(iframeID)
	frameWin.style.height = frameWin.contentWindow.document.body.scrollHeight + "px";
}

That’s all. You can now create new Product page in the WordPress and show their comments anywhere on your external site too. I know it’s not very elegant solution, but it does look elegant when in action. See your self at:
http://www.syedgakbar.com/products/usb/

Tags: , ,

This entry was posted on Sunday, July 1st, 2012 at 11:54 pm and is filed under WordPress. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.