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.
- Go to the ‘Design’ page of your Blogger dashboard and head over to ‘Layout’
- 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&width=550&height=100&connections=100&stream=false&header=false&logobar=false&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&send=false&layout=standard&width=550&show_faces=false&action=like&colorscheme=light&font&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.
Related Tricks & Tutorials
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