July 01, 2011

Add Facebook's "Like" Button

By adding the Facebook "Like" button to your blog, you give visitors to your blog the opportunity to "Like" your blog. You can also add the "Like" button to individual posts.

The Facebook "Like" button establishes a fan connection between Facebook members and a blog without the need of an existing Facebook Page. When a Facebook member hits the "Like" button on your blog, a "Like" update is sent to their profile with a link back to your blog. And as long as the Like button remains on your blog, any future updates from your blog will also send an update to their Facebook newsfeeds. Additionally, the "Like" widget in your sidebar will display which of your visitor's friends are also fans of your blog.

The "Like" button will surface your blog to potentially larger networks of Facebook friends. All of which can drive awareness of your blog through Facebook and can help drive more traffic to your blog.

Also see the Facebook "Like" button frequently asked questions here.

Get Your Blog Connected

At Settings > Sharing, click the "Connect your blog to Facebook" link. Even though you have already your connected your Typepad account to Facebook within the Other Accounts, you will need to give Facebook permission to add the Like button as well.

In Step 1, click the Connect button to prompt the Like button to be displayed. If you are not already signed in to Facebook, you will prompted to sign in.

In Step 2, click the Like button.

The pop-up box will display any Facebook pages already associated with your Facebook account. If you don't already have a Page, click the "Do you want to create a new Page on Facebook?" link to create a new page for your blog.

Select Facebook Page

Facebook will then prompt you to give permission to Typepad. You will need to agree to all permissions to establish the connection between Typepad and Facebook, including allowing publishing. By selecting to "allow publishing" the updates to your blog will be published on the wall of Facebook fans of your blog.

Facebook Like ModuleAfter you have completed the process to allow the Typepad and Facebook connection, the Facebook Like widget is added to your sidebar. Typepad Pro bloggers will be able to choose the location of the widget in the sidebar at Design > Content.

If you are unable to connect to Facebook on the first attempt, the Facebook API is likely experiencing a problem preventing a connection. Please try to connect to Facebook again after clearing your browser's cookies and cache.

Advanced Template Blogs

If you are using an Advanced Template set for your blog's design, you will need to manually add the "Like" button to your templates after completing the above steps. The HTML code for the "Like" button is:

The URL in the code - http://example.typepad.com - needs to be replaced with your blog's URL. You can also find more information at Facebook on the Like widget.

Customizing the Facebook Like Button

You can also customize the Like button at Facebook here:

After choosing your options for customization, click the Get Code button. Then, you can copy the code into the Embed Your Own HTML module at Design > Content.

Adding the Like button to individual posts

When someone opts "Like" individual posts, a link to your post will be included on their Facebook profile promoting your blog post to their Facebook friends.

At Design > Content, click the pencil icon next to the Post Footer module.

Facebook Like

Check the box next to Facebook Like and click OK. Finally, click Save Changes to update your published blog.

Advanced Templates

To add the Facebook Like button to an Advanced Template set, you will need to update your templates to include the code:

Add the code in the Main Index, Individual Archives, DateBased Archives, and Category Archives templates within the MTEntries container. The button can be placed wherever you wish but it's generally added in the MTEntriesFooter container. You can adjust the above width to fit into your blog.

Facebook Like button Frequently Asked Questions

Who will see updates about my blog in their Facebook newsfeeds once I add the "Like" button?

Only Facebook members who hit the "Like" button on your blog will receive post updates in their news streams. All other users of Facebook, including your friends and social network, will only see your post updates if they do the same.

How is the functionality of the "Like" button different than Sharing to Facebook when I create a post?

When you select Facebook under the "Share This Post" option on the compose screen, you effectively send a post update to your Facebook profile. Once the post update is shown on your profile it is additionally shared amongst your friends and social network.

When users "Like" your blog by hitting the "Like" button, they share a "Like" update to their profiles with a link back to your blog, AND they also opt-in to receive post updates from your blog directly in their newsfeed. Anyone can "Like" your blog as long as they have a Facebook account, this allows you to distribute your blog content to Facebook users beyond your own network.

It is perfectly acceptable and even recommended that you enable both features to ensure that you are giving your blog as much distribution as possible.

Are users who "Like" my blog the same as the fans of my Facebook page?

If you have already created a Facebook fan page for your blog, users who are fans of that page will not automatically be carried over to additionally "Like" your blog. While the actions are similar, the "Like" concept is essentially an evolution of the fan page. It allows Facebook users to "Like" sites they find across the web, send these updates to their networks, and redirect their networks to these sites without stopping at a Facebook page.

How can I see all of the users on Facebook who have "liked" my blog?

Once you've added the "Like" widget to your blog, as the blog owner you will see an "Admin Page" link at Settings > Sharing. You can also click to view the manage area of your page through your Facebook account.

Why aren't there more customizations for the "Like" button?

The button content is controlled and served by Facebook through an iframe that we've placed on your blog. Typepad does not have control over the styling of the button or the copy and links. You may want to consider adding one of Facebook's badges to your sidebar using the Embed Your Own HTML module at Design > Content if you do not like the look of the default button.

What happens if I change my blog's address?

Any changes to your blog's address can have an impact on your site. If the address of your blog does change, the Like count for your blog and posts may be reset. See the What Happens If I Change The Domain Name, The Folder Name, Or Domain Mapping? article for more details.


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services