Layout Image

How2: create a Facebook badge for your website

Cross-promoting your social media accounts and your website is a must. Give people as many ways to connect with you as possible, and they’ll choose what works for them. Luckily, it’s in the best interest of those applications to make this easy for you.

If you have a Facebook page for your business, but aren’t sure how to promote it on your website, here’s a simple and easy way to do that. You can only do this while using Facebook as yourself, so if you’re using it as your business page, switch back to your personal account.

From the home screen, click on Ads and Pages in the menu bar on the left side of the page.

Click on Marketing and choose Get a Badge.

Page Badges should already be selected, but if it isn’t, go ahead and select it now.

In the upper right corner of the page, click Edit this badge.

Select options to customize the layout, as well as what items are included in your badge. In this case, I’m planning to put my badge on the sidebar of my website, so I’ll select a vertical layout.

When you’re happy with the way it looks, click Save.

I’m a big fan of WordPress, and it’s what I use to manage my website, so I’ll choose Other.

Click into the code box and copy the code.

If you’re using WordPress to manage your site, I’ll show you the easy process in the next few steps. If you’re using Blogger or Typepad, just click the appropriate button and follow the on-screen instructions. For websites without a content management system, you’ll have to paste this code into an area of your page where you want the badge to appear. On to WordPress…

Sign in to your WordPress dashboard. On the left sidebar, under the Appearance section, click on Widgets.

In order to use the code Facebook generated for your badge, you’ll need to paste it into a text widget. Click on the Text widget from the list of available widgets and drag it into the widget area you want it to appear in. For my website, I’d like to put it on the right sidebar of my homepage under my social media icons.

After placing it in the widget area, the Text widget will expand, giving you title and content areas. Paste the Facebook code into the content area. I did not give this widget a title because it’s self-explanatory and I don’t want extra text creating a messy look on my homepage.

Click Save.

Go to your website to view the result. I don’t like the extra text at the top and bottom of the badge, because I think it looks messy. If you want to remove that extra text, go back to the text widget we just created.

In the example below, I’ve separated the pieces of code to make it easier to read. Each piece of the html code will have a beginning and end tag. For example <a href… > and </a>. Search for the unwanted text, in this case, “nine2five creative.”

Select the unwanted text, along with the beginning and end tags surrounding it, and delete. I also deleted the </br> or “break” tag, because it is simply unnecessary to have a line break with nothing above it. I like to keep things as simple as possible to avoid confusion.

Repeat this process with the unwanted text, “Promote Your Page Too,” that appears at the bottom of the Facebook badge. In this case, the extra break tag is above the unwanted text.

Now the code is looking much cleaner.

Visit your page again to view your handiwork!

  • Cheri Armstrong

    You make this sound easy!