Facebook Profile Badge

Here is the first tutorial regarding SNS. There are many features of social network iWeb can integrate with. One of the most popular SNS, Facebook also provides many useful add-ons such as Profile Badge, Like Badge, Photo Badge, Page Badge, and etc. Among them, the most useful thing would be Profile Badge, because it shows all basic information of you without additional introduction as well as it helps people connect with you as new friends. It's free, but it gives you unlimited chances to communicate with people across the world.

Instruction

I would recommend to embed this social plugin into "Contact me" or "About us" page. It can be used for your alternative vCard which is more advanced as well. With the help of this widget, I have got many chances to have many new friends. Taking advantage of SNS like Facebook, and Twitter would be necessary for you to succeed.

If you don't have your Facebook account yet, please sign up, then create your account right now here.
If you move to your news feed page, please go to your profile page by simply clicking your name.
Scroll down the page, and you can see "Create a Profile Badge" under the Notes box on the left side.
Click it, and then move to Badge page.
Make sure that you are on the Profile Badges tab.
Click "+ Create a New Badge" button on the top right.
You can customize your profile badge by choosing the options.
If the profile badge looks as you desire, and includes information you want to show, please "Save" button on the bottom.
You are ready to grab the code for iWeb.
Click "+ Other" button, then you can see the source code.
Copy the code, and go back to iWeb.
Insert a HTML snippet. Then paste the code into HTML snippet box.


	<!-- Facebook Badge START --><a href="http://www.facebook.com/Jment" 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="JungMin Lee">JungMin Lee</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://www.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://www.facebook.com/Jment" target="_TOP" title="JungMin Lee"><img src="http://badge.facebook.com/badge/1242347683.2163.1246439731.png" width="327" height="84" style="border: 0px;" /></a><!-- Facebook Badge END -->

The code would look like above but it is different from yours.
Remove the part of the source code highlighted in RED. (Maybe from the end of "" to "<br/>".) The reason you'd better remove it is that it shows an unnecessary title, "Your name | Create Your Badge". This is useless, and just takes a place as I think. But it's your choice.
You can modify the size of the profile badge. If you want to resize, please modify the numbers highlighted in Blue. The profile badge will automatically adjust its resolution according to the changed size.
Click "Apply" button on the HTML snippet box, and make sure whether your profile badge looks correctly.

Important tip about Profile Badge

Don't edit your created Profile badge later, if you change it on Facebook, the embedded profile badge on your website will look different. If you want to use different style profile badge, you can grab the new one by clicking "+ Create a New Badge". You can manage your several badges within Facebook.