Facebook Like Widget To Blogger WIth Customization

Increasing a blog traffic is important for every blogger like me. This is been a hard thing for every new blogger like me. I have been struggling harder, harder to increase my blog traffic. As a result of my effort. I was on my way. Today is the tutorial on adding a facebook widget to blogger with customized options. This is quite simple for the people who have good knowledge regarding facebook. And hard for the people who don’t. Let me make it easy for the people who is also not familiar with facebook by reading this aritcle.
Also Read :   Facebook Like Widget For Blogger With Ribbon Effect

Facebook widget box for blogger with cstomization
Facebook widget box for blogger

Get into the tutorial the below mentioned thing are must for making this tutorial successful.

REQUIRED TO MAKE THIS SUCCESSFUL

  1. You Need To Have Facebook Account.
  2. If You Want To Add Facebook Like Widget For Your Facebook Fan Page, You Need To Have A Facebook Fan Page ( If dont read my article on creating a facebook fan page )
  3. As You Are Eligible For The Above Two Points, Then Go To This Facebook Page
  4. Please Fill The Details As Shown In The Below Pic

CUSTOMZING THE ABOVE PIC

  1. Enter URL Of Your Facebook Fan Page ( Changing Facebook Fan Page URL )
  2. Adust The Width By Typing Their W: 250
  3. Adust The Width By Typing Their H:258
  4. Check Show Faces
  5. Select Light Color Scheme
  6. Fill Border color with #f4f4f4
  7. Click Get Code
Getting code from facebook
  1. Then You Get A Pop Up Click On ” IFRAME 
  2. Copy All The Code 

Then you need to paste it in between the given below code.

 

<div style=“-moz-box-shadow: 0px 15px 20px 0px #777777; -webkit-box-shadow: 0px 15px 20px 0px #777777; background-color: #f4f4f4; border-radius: 15px; border: 1px solid #CCCCCC; box-shadow: 0px 15px 20px 0px #777777; height: 270px; margin: 30px; padding: 10px 0 10px 10px; width: 250px;”>
<div style=“height: 250px; overflow: hidden;”>

<!– Kindly Paste Facebook Likebox IFRAME Code Here–>

</div>
</div>

NOTE :

  •  If copied does not contain http: then you need to add it no your otherwise you get an error 
  • If you don’t want to get the shadow effect then you need not paste the code in the above step, after copying the code just do the below steps
  • Login into blogger
  • Goto –> Layout –> Add A Gadget –> Click On Add Html/Javascript –> Paste your code there

Article By Tharun

Hey! Tharun here. A Blogger makes blogging on wordpress tips, blogger tricks, SEO tricks, Android Apps, He love to share what he knows. Meet him at Facebook, Twitter. Get free Wordpress Installation Service Contact Here.

Comments

Leave a Reply to mostafa elgayar Cancel reply