Add A Fancy Facebook ‘Like’ Widget

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&am

p;connections=100&amp;stream=false&amp;header=false&amp;logobar=false&amp;cs

s=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=sta

ndard&amp;width=550&amp;show_faces=false&amp;action=like&amp;colorscheme=lig

ht&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.