.: Facebook Comments Maximized for Search Engine Optimization
Facebook supports a comments box that web developers can install on websites outside Facebook. With the right tweaks, Facebook Comments have great potential for search engine optimization. They provide extensive links back to any page they are placed on if Open Graph Tags are added to the page. They also provide an SEO content boost if a plain text version of the comments is added to the source code behind the comments box. In this article, I will provide the missing instructions for implementing Facebook Comments that are configured for maximum Search Engine Optimization.
This article includes the following content:
✔ Getting Facebook Comments Code
✔ Setting up Comments Moderation
✔ Adding Open Graph Tags to Enable an Improved Newsfeed Story for Your Pages
✔ Adding a Hidden Text Version of Your Comments to the Source Code
 |
Getting Facebook Comments Code
Facebook provides an online code generator. This part is straight forward enough. Place the URL for the page on which you intend to place the comments box under URL to comment on > Set the rest of the settings to fit in that location. I chose to leave Number of posts set at 2 (keeps the space taken up by my comments box on the page nice and short) > I chose a Width of 619 pixels (fits in div I intend to place the comments box in) > I chose the "dark" Color Scheme (looks great with the dark theme of my site > Click Get Code.
Facebook offers 3 different code types, HTML5, XFBML, and IFRAME. I went with HTML5 implementation because it is most consistent with the existing code in my website. This implementation requires code placement in 2 locations.
First, the JavaScript SDK goes right after the opening <body> tag. Placement of the JavaScript SDK in Dreamweaver shifted the rest of my content down in Dreamweaver but not in the browser.
Second, the comments plugin code goes wherever you want it to appear on your page. Once the code is pasted into these locations, Click Okay to close the get code pop-up.
The end result looks like this:
 |
Setting up Comments Moderation
I intend to use many comments boxes across my site, so I chose to enable a moderator interface on Facebook where comments from all my comments boxes can be administered and moderated together.
Set up a Facebook App
To do this I had to set up an App under my Facebook account. Facebook provides App Creation Tool in the Facebook Developers Portal. I had to enter my Facebook Username and Password > Click + Create New App in the upper right hand corner > Name the App (I used my website name) > Check the box next to I agree to the Facebook Terms. > Click Continue > Type in the letters for the security check > Click Continue > Make adjustments to App Display Name, App Namespace, & Contact Email > Optionally add a Logo and an Icon > Choose a Category that fits your website > Click the check next to Website > Type the URL for your site next to Site URL (example: http://www.reachhighdesign.com/) > Type the domain for your site next to Site Domain (example: reachhighdesign.com) > Click Save Changes > Copy the value next to App ID: for use in setting up moderation
Use a Meta Property to Set up Moderation
Leaving out this step will cause an error that reads something like the following, “Facebook comments Warning: http://www.reachhigh-design.com/ is unreachable” |
Moderation is set up by adding an "app_id" meta property to your page. Meta properties belong between <head> and </head> in your code. Ensure you include only the App ID copied when you set up your app between the "" or you will end up with an error that reads something like the following “facebook comments Warning: http://www.reachhighdesign.com/ is unreachable”
I also added a "fb:admins" meta property specifying my Facebook User ID to allow Facebook to notify me when I receive comments. Warning: This notification feature is mentioned on Facebook's literature but does not seem to work.
An example of these meta properties is provided under the next section.
I got my Facebook user ID by going to my profile on Facebook and copying it off of the end of the URL.
 |
Adding a Like Button
I used Facebook’s online Like Button code generator. I inserted the URL for this page under URL to Like. > I included a send button (This will allow readers to send a link to this page to their friends) > I selected standard as my Layout Style (This layout fit best in the location where I am placing the button) > I chose a Width of 619 pixels (Fits in div I intend to place the comments box in) > I chose "like"as my Verb to display (Like is well known as an action associated with Facebook) > I chose the "dark" Color Scheme (looks great with the dark theme of my site) > I chose not to modify my Font > Click Get Code.
Facebook offers 3 different code types, HTML5, XFBML, and IFRAME. For my like button I went with XFBML. This is Facebook’s very own version of XML. I made this choice in order to allow my send button to work properly. This implementation requires code placement in 3 locations.
First, the JavaScript SDK goes right after Comments Plugin Script that we placed after the opening <body> tag.
Second, the XML namespace is added to the <HTML> tag on the page. This means paste the code provided at the top of the code right under the <HTML> tag which looks like the following:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
This namespace provides browsers with a referance in order to interpret Facebook's XFBML.
Third, the Like Button code goes wherever you want it to appear on your page.
The end result looks like this:
 |
Adding Open Graph Tags to Enable an Improved Newsfeed Story for Your Pages
This is good for SEO because it makes your comments more attractive when they appear in a newsfeed on your commenter’s and commenter’s friend’s Facebook, driving more traffic. It is also good for SEO because it creates more links back to your page. Add a “Like Button” in addition to comments and the result is even more links back to your page when readers “Like” your page.
As Step 2 of the Like Button Creation Process, Facebook provides online Open Graph Tag creation tool.
I entered the Title of my page under Title > I selected "article" under Type > I entered the URL of my page under URL> I entered the URL of my Reach High Design logo hosted on my server under Image > I entered the name of my web site under Site name > I entered my FB ID under Admin.
I added the following to the tags provided by this tool:
og:locale- Used to indicate the area/demographic this content is intended for
fb:app_id- For setting up moderation
og:description- Provides a summery of this content
- I used the URL Linter/Debugger until I got it right.
All of my tags together ended up looking like this (Remember, these tags go between <head> and </head> in your code & in place of ?????? place your App ID and user ID):
 |
The result is a newsfeed that looks like the following when comments are made on my site:
“The Open Graph Protocol enables you to integrate your Web pages into the social graph. It is currently designed for Web pages representing profiles of real-world things — things like movies, sports teams, celebrities, and restaurants. Including Open Graph tags on your Web page, makes your page equivalent to a Facebook Page. This means when a user clicks a Like button on your page, a connection is made between your page and the user. Your page will appear in the "Likes and Interests" section of the user's profile, and you have the ability to publish updates to the user. Your page will show up in the same places that Facebook pages show up around the site (e.g. search), and you can target ads to people who like your content. The structured data you provide via the Open Graph Protocol defines how your page will be represented on Facebook.”
This is a must for SEO because without this text in the source code, the content in the comments will never be seen by the search engines as they crawl the page and score the content. |
Adding a Hidden Text Version of Your Comments to the Source Code
This is a must for SEO because without this text in the source code, the content in the comments will never be seen by the search engines as they crawl the page and score the content. The Facebook comments box utilizes code that shows viewers a view of content that lives on Facebook’s domain. This content does not show up in the source code.
In order to get this content included in the source code we must access it from Facebook's Graph API, insert it into the source code via PHP insert and hide it from view using JavaScript.
I added the following code under my comments box:
-Ensure "URL-OF-THE-PAGE-THE-COMMENTS-PLUGIN-IS-ON" is replaced by the actual URL.
Allowing Remote PHP Inserts
There is one big catch here. Most web hosting platforms do not allow remote PHP inserts by default. Mine falls into this category. In order to get around this, I had to place a .ini file named php.ini in the same directory as the page on which I intend to place the remote PHP insert containing the following code:
{"http:\/\/www.reachhighdesign.com\/km\/facebook-comments-optomized-for-seo.html":{"comments":{"data":[{"id":"10150292784198258_18431880","from":{"name":"Aubrey Dustin","id":"100000341175798"},"message":"Hey everybody take a second to check this out. Facebook took the time to make a feature to allow web developers to and Facebook Comments. What they didn't do is make it easy. There is a lot of tech-speak here but the result is a solution that works really well!","created_time":"2011-08-24T21:00:07+0000","likes":1},{"id":"10150292784198258_18481819","from":{"name":"Aubrey Dustin","id":"100000341175798"},"message":"What I really want now is to be able put links with previews and photos in my comments. It works in Facebook but not in my comments here. Has anyone looked into this at all? Is it comming?","created_time":"2011-08-27T02:01:22+0000"},{"id":"10150292784198258_18585625","from":{"name":"Mel Turbyfill","id":"100000302642735"},"message":"Aubrey, I have a video site that uses smarty templates and I finally got this working. Everything except the email notification. Thanks a million for this great article!","created_time":"2011-09-01T02:07:18+0000","comments":{"data":[{"id":"10150299165368258","from":{"name":"Aubrey Dustin","id":"100000341175798"},"message":"Mel, I am glad it helped. I don't have email notification working either. I will give it a look and add what I find to the article.","created_time":"2011-09-01T02:39:40+0000"}],"count":1}},{"id":"10150292784198258_18934896","from":{"name":"Aubrey Dustin","id":"100000341175798"},"message":"I have been trying for several days now to make my Facebook Comments Boxes send me an email notification when any of the pages on my website receive comments. I have not yet got a working solution. So far I have a code that the best I can tell follows the guidance given by Facebook. When loaded up on my pages is does not seem to generate a data return from Facebook. It does send an email when comments are made. It also sends an email every time the page is hit. As of now I am taking it off my page. I could really use some help on this if anyone has any ideas. I will post my current code in a reply.","created_time":"2011-09-18T07:36:08+0000","comments":{"data":[{"id":"10150319073598258","from":{"name":"Aubrey Dustin","id":"100000341175798"},"message":" \u003Cdiv id=\"fb-root\">\u003C\/div>\n\u003Cscript>\n window.fbAsyncInit = function() {\n\n\n\nFB.init({\n\n\n\nappId : '195527567175968',\n\n\n\nxfbml : true,\n\n\n\nchannelUrl : 'http:\/\/www.reachhighdesign.com\/',\n\n\n\n});\n\tFB.Event.subscribe('comment.create',\n\n\n\nfunction(response) {\n\n\n\n\u003C?php\n\t$to = \"business\u0040reachhighdesign.com\";\n\t$subject = \"Facebook Notification\";\n\t$body = 'A user has liked the URL: ' + response;\n\tmail($to, $subject, $body)\n\t ?>\n\n\n\n}\n )};\n\n (function() {\n\n\n\nvar e = document.createElement('script');\n\n\n\ne.src = document.location.protocol + '\/\/connect.facebook.net\/en_US\/all.js';\n\n\n\ne.async = true;\n\n\n\ndocument.getElementById('fb-root').appendChild(e);\n }());\n\u003C\/script>","created_time":"2011-09-18T07:36:24+0000"}],"count":1}},{"id":"10150292784198258_19604520","from":{"name":"Ben Nguyen","id":"589276036"},"message":"it not real seo.. the actual hiden div by css wiill be ignore by google while it crawling... \nthe solution is using java script to hide that div: \n\ni my case just use jquery: $('.comments').hide();.","created_time":"2011-10-22T15:05:07+0000","comments":{"data":[{"id":"10150419728493258","from":{"name":"Aubrey Dustin","id":"100000341175798"},"message":"I like the idea of using java script to hide the div. Cold you be a little more descriptive. Where does the script go? How is it implemented?","created_time":"2011-11-26T03:04:53+0000"},{"id":"10150479254618258","from":{"name":"Aubrey Dustin","id":"100000341175798"},"message":"Thank you for this input. I have implemented it in my latest update of these instructions.","created_time":"2011-12-23T03:45:28+0000"}],"count":2}},{"id":"10150292784198258_20069766","from":{"name":"\uc548\ubcd1\uc131","id":"100000555612015"},"message":"thanks","created_time":"2011-11-15T12:28:53+0000"},{"id":"10150292784198258_20069850","from":{"name":"\ubc15\uc900\ud615","id":"100001697709497"},"message":"thanks","created_time":"2011-11-15T12:35:37+0000"},{"id":"10150292784198258_20287576","from":{"name":"Aubrey Dustin","id":"100000341175798"},"message":"I just used this resource to set up comments on one of my new pages. I noted that FB has totally changed things. A lot of what I have published here is out of date. Over, the next day or so I will go back in and fix this resource.","created_time":"2011-11-26T03:06:56+0000","comments":{"data":[{"id":"10150449113123258","from":{"name":"Aubrey Dustin","id":"100000341175798"},"message":" David Ruiz I did at the time when I wrote the articles on this site. I sold it to a friend right before I moved to Hawaii. I still have the other pistols listed under firearms here at Reach High Design.","created_time":"2011-12-09T18:03:22+0000"}],"count":1}},{"id":"10150292784198258_20490199","from":{"name":"John Jone","id":"1085204399"},"message":"How exactly does moderation work? Does it not post the comment until you moderate or does it post immediately and then you have to moderate?","created_time":"2011-12-06T20:57:57+0000"},{"id":"10150292784198258_20793501","from":{"name":"Aubrey Dustin","id":"100000341175798"},"message":"I just finished rewriting this article. It now includes all the latest updates Facebook has made to these tools.","created_time":"2011-12-23T01:42:53+0000"},{"id":"10150292784198258_20824965","from":{"name":"Roddy Stafford","id":"1476158922"},"message":"thanks for updating I am getting myself in a really twist with a new buddy press install I am working on trying to workout how to do the following. \n1.make sure all Facebook comments are added to my WP dB.\n2.that all FB comments are in my html. \n3, integrate FB comments with FB connect so people have to join before the comment.\n lots plugins do one thing or another but not all together.","created_time":"2011-12-24T19:32:15+0000","likes":1},{"id":"10150292784198258_22439595","from":{"name":"Umang Bansal","id":"1074941155"},"message":"Hi Aubrey, can you guide me how to do add the fb comments in my web page in asp.net?","created_time":"2012-03-31T15:52:38+0000","comments":{"data":[{"id":"10150731133873258","from":{"name":"Aubrey Dustin","id":"100000341175798"},"message":"i am not an expert on asp.net i've seen there is no reason the above would not work. Is there a specific problem you are having?","created_time":"2012-04-10T22:52:38+0000"}],"count":1}}],"paging":{"next":"https:\/\/graph.facebook.com\/comments?ids=http\u00253A\u00252F\u00252Fwww.reachhighdesign.com\u00252Fkm\u00252Ffacebook-comments-optomized-for-seo.html&limit=25&offset=25&__after_id=10150292784198258_22439595"}}}}