Upon attending an SEO presentation this week, I learned that I should be enabling social media a bit better on this blog. So I added a Facebook Like button.
This is my first attempt, so I went with a button that shows up at the bottom of the entry. I was told that it's not bad idea to have a button at the top; a peculiar but attested behavior of users is that they'll sometimes "Like" something before they read it, or possibly without reading beyond the beginning. But let's see how this works out.
Implementing the button is not particularly difficult. The details are laid out on the Like Button page of the Facebook Developers site. In effect, what I did was add the following markup to the bottom of the layout for a blog entry (broken up here for readability):
<iframe src=
"http://www.facebook.com/plugins/like.php?href=%%1%%
&layout=standard
&show_faces=False
&width=450
&action=like
&colorscheme=light
&height=80
&locale=en_US"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:450px; height:30px;"
allowTransparency="true"></iframe>
I had to add some code to the page to substitute the URL of an individual blog entry (e.g., http://www.mikepope.com/blog/DisplayBlog.aspx?permalink=2272) for %%1%% in the markup. (The blog code is something of a rat's nest anyway, so what's another 4 lines for this?)
You're also supposed to add some meta tags to the <head> element that Facebook uses (they say) to determine what title, URL, and graphic to associate with the content. For example:
<meta property="og:title" content="mike's web log" />
<meta property="og:type" content="blog" />
<meta property="og:image"
content="https://www.mikepope.com/blog/images/mikesblog_defaultimage.png" />
<meta property="og:site_name" content="mike's web log" />
One thing that's implicit in the way they implement this, and is noticeable to me already, is that there is a slight delay before the Like button is displayed. Each instance of the Like button has to call the Facebook site and get data about the blog entry that the button is bound to, then return a hunk of markup to display on the page. I display 10 entries per page; that's 10 calls to Facebook. (Only one call, tho, if you're looking at an individual entry.) On the plus side, this is done asynchronously -- not AJAX-y, just via a queued HTTP request, like images. That means that the actual blog content shows up as it always has, it's just the Like button itself that might show up slightly later.
Anyway, we'll see how this goes. If you have some feedback about this, please leave a comment. And, of course, be sure to Like this. :-)