Put a badge for a Facebook Page on your Blog

This article describes how to make a Facebook badge to promote your page, and put it on your blog.

What is a Facebook page

This article is about how to make a badge to promote a Facebook Page.

This is an example of “follow me” approach to link your blog and social networksalthough for Facebook pages your reader becomes a Fan rather than a Friend.

Many people are confused about when to use any kind of “thing” on Facebook, ie

  • Profiles – count for flesh and blood, living, breathing, individual people
  • Pages – for websites, brands and organizations that don’t want to approve all their Facebook members
  • Groups – for organizations that want to approve individual members joining (and in return, group owners can send private messages to individual members.

The most common “thing” for blogs to have is a Page – and a Badge is the tool that Facebook provides to help promote a Page on your blog or another website.

How to make a badge to promote a Facebook Page

See all your Pages using the drop-down arrow in the top right of the Facebook bar.
(Facebook chances the site for actions like this from time to time – you may need to look around to find your pages.)

Copy the URL for the Page you want to promote
(One way is to right-click on its name, and choose copy-link-location- or whatever phrase your browser uses. Another is to go to the page, and copy the URL from your toolbar address.)

Return to this article and click here — Facebook Social Pluginsto get to the Facebook tools.
(I had instructions to launch this from Facebook – but I can no longer find any links from my Pages page.)

Choose Plugin / Web page.

Scroll down the page, and set the options for your badge. The first is critical – the others are optional:

  • Facebook Page URL – this should be changed to the URL of your page (which you copied earlier)
    If you already have less than 25 Fans, then your page URL will be something like http://www.facebook.com/pages/Blogger-Hints-and-Tips/144194435594821 and you can get it by copying the link from the list of Pages for your account.
    Once you have more than 25 fans, you can choose a page-url on the Edit Info > Username screen.
  • Tab – the tab on your page that is shown
  • width – choose a value that fits the space on your model where you want to place the box.
  • show facesshows heading: choose the options that suit your purpose and blog template
  • show flow: this controls whether to show the post from the Page on your blog

When you choose the options, the preview in the background updates to show what the button will look like:

When you are happy with the selections, choose Get Code.

  • Currently, there are options for an iframe or Javascript SDK: I recommend using the iframeunless you are comfortable with the two-part installation required for Javascript, and you are sure that the visitors you want to target have Javascript enabled.

Copy the code provided

Install the code in your blog – there are many options for install the HTMLdepending on where you want to put the badge or button.

Job done! Your blog will now display a gadget that promotes the selected Facebook page – people can see and like your Page from your blog.

What your visitors will see

People visiting your blog through a web browser will see a Facebook area, including a Like button and any other options you’ve chosen.

This can be a very powerful tool: you can easily use two or three different combinations in different parts of your blog: one that has no borders, no faces and no header, but which shows that a Stream can be effectively as a feed “live” from your Facebook page to your blog, while another with different options can show the size of your fan base.

Be aware that the Like button shown in this button gives people the option to Like your Page on Facebook – not your blog directly, and not the actual post they’re reading. If you want them to Like your blog or blog-posts, you need to provide this option separately (and many of your visitors are likely to be confused by the different).

As always, people who read your blog via a feed reader (Bloglines, Google Reader, etc.), or by email subscription (for example, using follow-by-email) may not see the Facebook article, depending on where it is posted and what options its program has email.

Customize the code

You can change the features of the box without having to generate the code from Facebook again. For example, you can later the width and / or height – just remember to do it in the two necessary places if you use the iframe option: