How To Beautify FB Fan Page | Like Button More Prettier

♥ ASSALAMUALAIKUM ♥

Today I felt want to do a tutorial.Its been a while since my last entry for the tutorial a month ago.I see almost all the blogs in the blogosphere have added Fan Page or known as Like Button on their blog.What is Fan Page or Like Box?The Fan Page Box is a social plugin that enables Facebook Page owners to attract and gain Likes from their own website.Its enables users to:

Before

See how many users already like this Page, and which of their friends like it too.
Read recent posts from the Page.
Like the Page with one click, without needing to visit the Page.


Since Fan Page is only have  two options for background either Dark or Light,Of course the background is boring right? Must expect the other looks from the others Fan Page isn’t it?..Well I’ve got the solution in that..hehehe

By today I wanna share to you all on how we can beautify our Fan Page into more interesting ,more prettier than before.Make sure you all follow all the instruction very carefully tau..!

How To Do It ;

Click Dasboard > Layout (Design): Click Add a Gadget>CLICK HTML / Javascript.
Copy the HTML code below and paste code on the  box.

This HTML codes is for Fan Page WITH Faces.

<div style="padding:5px 5px 5px;background: url(Your Own Background Image)repeat;-moz-border-radius: 15px;border-radius: 15px;-moz-box-shadow:inset 0 0 2px #ff1493;-webkit-box-shadow:inset 0 0 2px #FF1493;box-shadow:inset 0 0 2px #FF1493;"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:fan connections="10" css="http://pinkdiva.googlecode.com/files/fanboxstyle.css1" height="203" logobar="0" profile_id="Fan Page ID" stream="0" width="240" class=" FB_fan FB_ElementReady"></fb:fan>
<span style="font-size:10px;">Widget by : <a href="http://developers.facebook.com/">Facebook</a> | <a href="http://www.gurlalush.blogspot.com/">Mrs Pink Diva</a></span>
</div>

And This One is For Fan Page WITHOUT Faces.

<div style="padding:5px 5px 5px;background: url(Your Own Background Image) repeat;-moz-border-radius: 15px;border-radius: 15px;-moz-box-shadow:inset 0 0 2px #ff1493;-webkit-box-shadow:inset 0 0 2px #FF1493;box-shadow:inset 0 0 2px #FF1493;"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="Your Fan Page URL Link" send="true" width="260" show_faces="false" stream="false" header="true"></fb:like-box>
<span style="font-size:10px;">Widget by : <a href="http://developers.facebook.com/">Facebook</a> | <a href="http://www.gurlalush.blogspot.com/">Mrs Pink Diva</a></span></div>

Preview and Save.

✿ Your Own Background Image - you have to put a link on your own background
✿✿ Fan Page ID - you have to put your own Fan Page ID

 

✿✿✿ Fan Page URL Link  - you have to put your own Fan Page Link.




✿✿✿✿ inset , 2px , #ff1493– Part this is your border type,pixel and colour. you change according to your desired colours.

Happy Trying Guyz!!

Sharing The Love :)