Monday, June 6, 2011

Adding a Facebook personal account badge to your blog

2017 Update:    
The tool described here is no longer supported by Facebook, and no longer works.   It seems that Facebook no longer supports any way of putting personal-profile badges on websites.


This article describes making a Facebook badge to promote your personal Facebook account, and putting it onto your blog.

Facebook Profiles vs Pages

Pillow Person As I've previously explained, Facebook has:
  • Profiles for people, 
  • Groups for collections of people who want to approve individual members who join
  • Pages for everything else.

Many people called their Profile their Facebook "account" - and lots are confused about the difference between personal profile, and pages.   But there is a big difference - and it starts to become obvious when you look at how to promote your facebook presence inside your blog.

I've already described how to make a badge for a Facebook Page.   Now I'm going to look at how to make a different kind of page, to promote yourself, ie your Profile.

This is an example of the "follow me" approach to linking your blog and the social networks, although for Facebook pages your reader becomes a Fan rather than a Friend.


Making a badge for your Facebook profile

Log into Facebook with the personal account that you want to promote.
.
Choose Profile (currently on the top right menu, just next to Home).

Scroll down the left hand panel,until you see Share a Badge (usually at the bottom) - click it.   This takes you to Facebook's badges page, with Profile badges automatically selected.
  
Click Edit this Badge,

Choose the format and contents that you want to show.
Remember, what's shown is the information from your personal Facebook account, and if you put it onto your blog the usual Facebook security rules won't be used to control who sees the information.   Only use these badges if you're very sure that you want your information to be shared.

When you are happy with the selections, choose, Save the badge.

Facebook has options to step you through the process of adding the badge (as a gadget) to Blogger.   But I always prefer to choose Other and then Copy the code provided (put the mouse into the field, press Ctrl/a to select it all, then Ctrl/c to copy).



Install the code into your blog:  as always there several options for installing 3rd party HTML, depending on where you want to put the badge.


What your visitors will see

People who visit your blog through a web-browser will see a badge showing the information that you have chosen to show.

When they click on it, they will be taken to Facebook and as much of your profile as your current privacy settings let them see.

As always, people who read your blog via a feed reader (Bloglines, Google Reader, etc), or by email subscription (eg having used follow-by-email) may not see the Facebook item, depending on where is places and what options their email program has.


Customizing the code

Unlike other Facebook badges, the profile badge has very few options for being customized by editing the code, which looks like this:
<!-- Facebook Badge START --><a href="http://en-gb.facebook.com/WHOEVER" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="WHOEVER">WHOEVER</a><span style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; line-height: 16px; font-variant: normal; font-style: normal; font-weight: normal; color: #555555; text-decoration: none;">&nbsp;|&nbsp;</span>
<a href="http://en-gb.facebook.com/badges/" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Make your own badge!">Create your badge</a><br/>
<a href="http://en-gb.facebook.com/WHOEVER" target="_TOP" title="WHOEVER"><img src="http://badge.facebook.com/badge/WHOEVER.WHOEVER.png" width="177" height="84" style="border: 0px;" /></a><!-- Facebook Badge END -->

An important note:   if you create a badge like this and put it into a website, and then go back and edit the badge in Facebook - the website will show the updated badge.


Related Articles

Putting HTML from a third-party into your blog

Adding a Facebook "Page" badge to your website

Tools for linking Blogger and the Social Networking sites

Putting a Facebook "share this" button on your blog

Share this Article

URL:

HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

No comments:

Post a Comment