Add Facebook's "Like" Button in Blogger's Classic Templates
First, get the HTML code for the "Like" button from Facebook. Depending on how much space you want to allocate, you can adjust width, text, and other settings. For example, here on the BEM Blog, we've specified not to show profile pictures of people who have Liked our content - this saves a bit of space for each post.
You'll be asked to enter your "URL to Like" - just put your blog's URL for right now. In a second, we'll modify this so it references each individual post's permalink. Hit "Get code" and you should see something like:
Go ahead and copy the HTML code under "iframe" - this code doesn't require the use of Facebook's Javascript SDK (that's a whole 'nother blog!) and can be dropped directly into your classic Blogger template.
Log into Blogger and click on the "Template" tab, which should bring up the HTML code running your blog's template. Here, we're looking to insert this iFrame code at the end of each post, so scroll down (or hit CTRL + F to find) and look for something like "$BlogItemBody$, "p class=post-footer", or "PostedByAuthorNickname" - this code typically signifies the end of an individual blog post and tells Blogger to include these common elements every time you post something.
On our blog, we've inserted the button between the author's name & permalink and the comments area. Go ahead and paste your iFrame code within this general location (remembering to insert a few breaks if needed, so it doesn't appear on the same line as your Author name):
Now we've got the button in place, but it's still referencing our blog's homepage, rather than the individual post URL - if we want people to share our content on Facebook, we want them to link to that blog post that they loved so much! So we're going to remove that URL from the iFrame code:
...and replace it with "<$BlogItemPermalinkURL$>" - this is some Blogger code that will automatically fill in the permalink to that particular post. Make sure to leave the rest of the iFrame code untouched!
Now, just one more step! Your button should be squared away now, but we need to add some meta data in the top of your template that tells Facebook what to display in users' News Feeds and Profiles when your content is Liked.
Scroll to the top of your template and look in the head section - you should see some title tags and possibly some additional meta data. We're going to add 3 lines of code before the body of the template:
<meta property="og:title" content="<$BlogPageTitle$>"/><meta property="og:site_name" content="The Name of Your Blog"/><meta property="og:image" content="URL of your logo or another picture"/>
The first line tells Facebook to use the title of your page to display within Profiles and News Feeds - aka, "John's Blog - What's the Deal With Facebook?" or what have you. The "<$BlogPageTitle$>" code tells Blogger to automatically fill in this area with your page title, so don't change this line.
The second line is the name of your site or blog, which enables Facebook to display "Johnny Social likes "Blog Post" on John's Blog". The third line is any picture you would want displayed alongside your content on Facebook - this should be at least 50x50 and have a maximum aspect ratio of 3:1.
And that should do it! There's lots more information out there on leveraging Facebook's Open Graph system, but this is an easy way to let your readers quickly and easily share your content.
Labels: Social Media, Web Marketing, Website Design






















