Search Engine Optimization With Facebook Comments
Posted by Matt Cashatt on 4/25/2011 (Last updated on 5/4/2011 1:04 PM)
The new Facebook Comments social plugin is a great way to allow your users to engage your site more fully through conversation; however, since the commenting mechanism is served up by Facebook via an iframe, the content generated by your users is invisible to search engine bots. But don't worry, the way around this is pretty simple.
Notice on the very bottom of this posting I have a section entitled "Reading for Robots"? Well, I didn't acually code that section out of an abundant concern for robot entertainment value. The purpose of that section is to enable search bots to read the comment stream from the fb:comments plugin that I am using directly above it.
The process in a nutshell is this: From your middle-tier code on the server, query the Open Social Graph for the comments stream generated by your instance of fb:comments >> Parse the comments out from the resulting JSON >> Insert the result into your HTML (outside of the iframe) so that the little search bots can read it.
Note that we are going to be working in the middle tier (server side) to call the Open Social Graph. This is because you need to catch the comments brfore the page is rendered to the client so that you can inject actual HTML for the comments that the search bots can see.
Demo
Everything you need to demo this technology is already on the page. Just take a look at the "Reading for Robots" section below. If you havent already, make a comment in the comments section, submit it, and then refresh the page. After you have done this, take a look at the grey text within the "Reading for Robots" section and you will see your comment. If you don't see your comment, that is due to the fact that I cache the JSON feed from the Open Social Graph since the search bots don't need up to the minute comments and I want the user experience to be snappier. So in this case, just take my word for it ;).
Ingredients
· For .Net implementations: JSON.NET (get it here). This is an open source component for creating and parsing JSON with .NET. The website contains the download and installation instructions.
Instructions
Step 1- Set up a means of obtaining and parsing JSON on your server
In PHP, you can do this by using the json_decode function and then writing out the parsed elements to your page.
In .NET, you will need a way to parse JSON as .NET's native abilities for this are a bit weak. The best thing to use is JSON.NET, a free open-source plug-in that can be downloaded here.
At the moment I can't offer suggestions for other server-side technologies such as Java, but would gladly post your suggestions and/or code with full credit to you if you know what to do to obtain and parse JSON on any alternative server-side platform.
Step 2- On the server, query Facebook's Open Graph for information about your comments
Facebook's open social graph will provide you with a JSON encoded string with all the information you need about your set of comments. If you would like to see what that looks like, just enter "https://graph.facebook.com/comments/?ids=[THE URL OF YOUR PAGE]". The URL of the page on which the comments box resides should be the href value of the <fb:comments></fb:comments> plugin on your page. To see the JSON string returned from the Open Graph for this tutorial, for example, you would enter this address: "https://graph.facebook.com/comments/?ids=http://www.mattcashatt.com/post/index/Search-Engine-Optimization-With-Facebook-Comments".
I will do my best to add PHP and Java examples to this tutorial at some point, but for now the example will be in .NET/C# which is the technology used for my site. If you would like to contribute the PHP or Java implementation, please feel free to do so by contacting me or through the comments section and I will update the tutorial with appropriate credit given to you.
IN .NET, once you have properly installed the JSON.NET component and imported it into your code ("using Newtonsoft.Json.Linq;") you need to set up a method for calling the Open Graph, parsing the returned JSON, and then posting the results to your page. I am using ASP.NET MVC3 so I do this in my Model for all of my posts; however, in a classic forms (.aspx) implementation you will call the method that follows from your page load event.
So to call the graph and parse the returned JSON using JSON.NET:
public static string comments(string post)
{
//Create the HttpWebRequest object
HttpWebRequest req = (HttpWebRequest)WebRequest.Create("https://graph.facebook.com/comments/?ids=http://www.mattcashatt.com/post/index/" + post);
//Get the data as an HttpWebResponse object
HttpWebResponse resp = (HttpWebResponse)req.GetResponse();
//Convert the data into a string
StreamReader sr = new StreamReader(resp.GetResponseStream());
string results = sr.ReadToEnd();
sr.Close();
JObject json = JObject.Parse(results);
string comments = "";
foreach (JObject m in json["http://www.mattcashatt.com/post/index/" + post]["data"])
{
comments += m["message"] + "|";
try
{
foreach (JObject c in m["comments"]["data"])
{
comments += c["message"] + "|";
}
}
catch { }
}
comments = comments.Substring(0,(comments.Length - 1));
return comments;
}
Here is what we just did:
First, we called up the Open Social Graph using a HttpWebRequest object and then converted the response stream into a string. The address you need to enter for the Open Social graph should follow this convention: "https://graph.facebook.com/comments/?ids=[THE URL OF YOUR PAGE]".
Next we instantiated a new JSON Object (JObject) and filled it with the parsed results from the JSON string that we just obtained from the Open Graph.
Next we created a new string called "comments" that is used to hold the text/or HTML that we glean from the JSON. This "comments" string is what will ultimately be posted to your page.
Next, we looped through all children of the parent node in the JSON feed and, recursively, we grabbed the comments (indicated by the key titled "message") and added them to our "comments" string. Note that I mentioned that this is done recursively. This is because in the JSON string, any replies to a specific comment are presented as child "message" items of that comment. Also note that we wrapped this step in a "Try/Catch". This is necessary because if a comment in the JSON feed has no replies (child "messages") then the code would barf with out the try/catch.
Finally, you need to post the comments string we just build to your page somehow. Again, I am using MVC3 so I added the comments to my data model, but you can just set the text value of a literal to the comments string or something like that.
One last thing to notice is that I added a pipe ("|") as a delimiter between each comment. This is completely unnecessary, just personal preference. Remember that only search bots will be reading this anyway.
Step 3 (OPTIONAL)- Cache the parsed JSON results for better performance
Once again, I am using .NET MVC3 and calling a model of the parsed JSON from my controller, but in most implementations you would simply follow this simple logic: If the comments string that you generated in Step 2 is already cached in memory (for the session), then use that without calling the graph again. If the session has no cached comments, then call the graph and create them just like we did above:
//Variable for data cache
string KeyFacebookData = "KeyFBData";
//Get and cache FB Comment Data
private string GetComments(string commentsId)
{
//Set the name of the cache key:
KeyFacebookData = commentsId;//this is the id of your fb:comments instance.
string doc = null;
//If the key is empty, then query the graph and fill it:
if (HttpContext.Cache[KeyFacebookData] == null)
{
//Call the comments string builder from the first step.
doc = comments(commentsId);
//Insert the result into the session cache.
HttpContext.Cache.Insert(KeyFacebookData, doc);
}
else //otherwise, just grab what's already there:
{
doc = (string)HttpContext.Cache[KeyFacebookData];
}
return doc;
}
As you can see, this would be called IN LIEU OF calling the comments method directly and would only call the comments method if the cache did not already contain comments.
To implement this method, you would call it to fill your comments container instead of calling the comments string directly. So, if you were using Response.Write to write the results to the page, you would do this:
Response.Write(GetComments(YOUR_COMMENT_ID));
Let's do this!
I hope that this tutorial has helped you out. For more information on the new Facebook Comments plugin, see this link. Special Thanks to Ivo Iliev for his input on this tutorial!
Enjoy!
