Home » Blogger Tutorials, Tricks and Hacks » Add A Fancy Facebook ‘Like’ Widget

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Add A Fancy Facebook ‘Like’ Widget

Add A Fancy Facebook ‘Like’ Widget

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

2,685 views

Here’s a very nice tutorial from Muhanad Asyraaf on how to install a “fancy”-looking Facebook ‘Like’ widget! I’ve never seen a Facebook ‘Like’ widget like this before, which is why I thought I’d feature it in today’s post and share it with you guys.

According to Asyraaf, the widget is basically a copy of the one that OMG! Ubuntu! has on its site. Anyway, below is the instruction on how you too can have a Facebook ‘Like’ widget that’s almost similar to theirs.

  1. Go to the ‘Design’ page of your Blogger dashboard and head over to ‘Layout’
  2. Click on an ‘Add a Gadget’ button and select ‘HTML/JavaScript’
  3. Copy/paste the code below:
<a href="https://www.facebook.com/YOUR_FBPAGE_USERNAME"><iframe style="height:100px; width:550px; " scrolling="no" frameborder="0" src="http://www.facebook.com/plugins/fan.php?id=YOUR_FBPAGE_ID&amp;width=550&amp;height=100&amp;connections=100&amp;stream=false&amp;header=false&amp;logobar=false&amp;css=http://project-legacy.googlecode.com/files/fblikefinal.css"></iframe></a><br />
<iframe src="http://www.facebook.com/plugins/like.php?href=https://www.facebook.com/YOUR_FBPAGE_USERNAME&amp;send=false&amp;layout=standard&amp;width=550&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=38" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:550px; height:38px;" allowtransparency="true"></iframe><br />

 

4. Replace the values YOUR_FBPAGE_USERNAME and YOUR_FBPAGE_ID with your own. You can change the height (100px) and width (550px) of the iframe too if you wish.

And that’s it.

NOTE: If you want your widget to look exactly like the one on OMG! Ubuntu!’s page (i.e. shape, fading effect) you’ll have to do some further tweaking with CSS. Asyraaf tried to make it look exactly like theirs but is having difficulty with the image masking (i.e. the shape). If you know how to get around it, feel free to hit him up here.

Liked It ? Please Share

Comments

4 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Hi! Thank you a lot foe advice! )))) very useful post

  2. Thank for share this tutorial , I’ts working :)

  3. beahaber says:

    Thank supper

  4. forumbe says:

    Thank you very useful information

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here