Answer: How can I get SEO Friendly Text From the Facebook Comment Box?

I realize this is not at all related to hookah but it's still a business tool we use here at Sukit Hookah (a division of American Hookah, Inc.) so, if you're interested, I've written this mini tutorial on how we pull search engine read-able comments from the Facebook Comment dialogue at the bottom of all our posts.   I've written this post in the context of a blog but the code snippet at the bottom can be used on pretty much any site with the Facebook Comment Tool in use.

There are a TON of great blog posts on how to implement the Facebook comment tool into Wordpress or Blogger templates (just Google it and follow their instructions) but there aren't any on how to overcome the drawbacks of iframes; namely that most search engines cannot read their contents.  As a matter of fact, I read over 200 posts on the comment tool and, of the few that even bothered to mention that you would lose SEO (search engine optimization) ranking, they ALL said it was something that couldn't be helped.

Guess what?  They were wrong!  Facebook's Graph API allows a programmer to pull down darn near every piece of information they could ever want - but - it all uses .php and other blog-unfriendly languages.  

So here's the solution: use a .php script saved on a php-friendly server to call the data you want from FaceBook (in this case the comment text) and return it as text.  Then use an HTML object in your blog/website to call the php script and place it inside a hidden <div> - behind the Facebook comment form.  

Sound complicated?  It really isn't.  The nice thing about Facebook's Graph API and the comment box is that all you need is the source URL and a very simple script.  You don't need the old tokens, access IDs or anything!  It gets better too, I'm about to give you access to our script totally free of charge.  Before we continue let me say this one thing: I'm allowing access to our script not because I'm the nicest guy on the planet (which I am) but because calling the script requires referencing the Sukit Hookah web server.  This, happily, creates a link (hidden to page visitors but not search engines) to our website which is good for our rankings.  We give you a tool to help increase your SEO and get a little back in return.  Everybody wins.

Ok, so how do I get the text from my Facebook comment box to use for SEO purposes?

  1. Get the Facebook comment box working and make sure it's dynamically creating the URL (expr vs href).  If you don't know what I'm talking about then take a little more time and read through more articles online.
  2. Make a backup of your blogger/wordpress (or whatever service or platform you're using) template before doing anything else.  I don't offer a tutorial here but plenty are available online.
  3. Go the the location where you've inserted the comment box. If you're using blogger it should look something like this:

    <div class='post-footer-line post-footer-line-3'>
    <!-- BEGIN Facebook Comment Tool Script BY JP -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
     var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}
     js = d.createElement(&#39;script&#39;); = id; js.async = true;
     js.src = &quot;//;;
    <fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='' width='600px'/>
    <!-- END Facebook Comment Tool Script BY JP -->
  4. Enter this script anywhere immediately above or below the comment box script or, where I like to place it, below the <div class='post-footer-line post-footer-line-2'>.  This is my favorite because it will load on the main [Home] page and within the post body (double dipping on the SEO).  You could also place it just after the <head> tag but I would approach that with caution because different platforms are going to handle that differently.
    <!-- BEGIN Graph API comment pull and text insertion in an invisible div for SEO purposes -->

           <div class='separator' style='clear: both; display: none; text-align: center;'><object data='' width='680px'>
    <!-- END Graph API comment pull and text insertion in an invisible div for SEO purposes -->
  5. Save your template.  Save your template and you're done.  If you want to see what the results look like just change the opening div tag to just <div> (simply delete the rest of its contents) and then view a post that has several comments on it.  You should see the object frame with the comment.  It will take some scrolling to see all of the content but don't worry about the unfriendly-to-the-eye format, search engine bots love that kind of stuff :-) .
  6. Leave feedback on this post!  Seriously, let me know if you found this helpful or if you have any questions and I'll do my best to answer them.
  7. To see what the script outputs for this page just click this link.

Hope you found this helpful. ---JP