Adding a Facebook “Like” button to your site


Published on May 26, 2010 at 3:25 PM EST
In the Tutorials category.

Find out who “likes” your site!

Recently there was some noise from Facebook: you can now “Like” anything—on Facebook or not. Adding a “Like” button to your Movable Type or Melody site is quite easy:

But I want entry-specific “Likes”

Instead of entering your site’s URL into the “URL to Like” field, enter the text “LINKHERE,” choose other options, then click Get Code. Again, copy the iframe code.

Now, within that code, replace the “LINKHERE” text with “<mt:EntryPermalink>.” <mt:EntryPermalink> is the URL to your entry. (You can’t just enter <mt:EntryPermalink> in the “URL to Like” field because it will be encoded by Facebook’s Get Code tool and not work correctly.)

Now just paste and republish!

“Paste that code into your site… somewhere?”

Where you paste the code will determine where the like button appears. Here is where a tutorial becomes difficult: your site is not like my site; you need to figure out where to place it. In the sidebar or at the bottom of an entry is a popular location.

Sidebar

If you use Widget Sets to manage your sidebar, you can add the code there:

  • Go to Design > Widgets.
  • Create a new Widget; name it “Facebook Like button,” for example.
  • Paste the code into the template area.
  • Save.

Now, go to the Widget Set that controls your sidebar and add the Widget wherever you want. Save. Republish. Done!

Bottom of an Entry

If you’re using one of default template sets for your blog, you likely have “Entry Detail” and “Entry Summary” Template Modules. Add the “Like” button to the bottom of an entry:

  • Go to Design > Templates.
  • Find “Entry Detail” or “Entry Summary” (or even just the “Entry” template for many) and click it to edit.
  • Within the template, probably near the bottom, find the code “<div class="asset-footer">”.
  • Immediately after this, paste your Facebook Like button.
  • Save. Republish. Done!

Ta-da! A Facebook Like button for your site! How many people “like” your site already?

This article is tagged as: Facebook, Template, Tutorials