Add Custom Facebook Like box in Blogger Sidebar [Tutorial]

Howdy Followers, I am happy that our followers on Google+ has reached more than 800. So as a result, I am presenting you a beautiful Facebook Like box which you can add to your Blogger Sidebar. Before that let me explain you why you should add this like-box and what’s the profit!

Image Preview

Facebook Like Box

Real Live Preview  (Here Preview is somewhat defective! But for blogger it’s :-)


Why Adding Social Media Gadgets to your Blog is so Important?

As discussed in my last 2nd article, facebook has break-out in Google trends in terms of most search query! Facebook is getting more and more famous day by day. People keep surfing facebook, so why dont we get those idle people from Facebook to our blog! We can get many inorganic visits from facebook! It helps to increase your social media followers. So if you launch anything special you can invite people to that thig before your get organic visitors from Google. It may be helpful if you dont have enough page rank to get enough visitor!

How to Add Custom Facebook Like Box?

Just enter your lovely facebook profile page username or page id in the box given below and Click Generate! Then you would see button of “Add to Blogger” under the “Add Page Element” page title. Just Click it and a new popup would open. Choose your blog from the drop down menu and. Click Add to Blogger and that’s it!

Note: Currently Code Adder is in construction, you can add using below given code!

You can verify whether Custom Facebook Like box is added to your blog or not! Also one more benefit is that this Like Box is transparent at the edges! So if you have color background to your blog sidebar, then it fits to your sidebar! Credits for this Widget goes to Emilios M.

Want to Edit this Like Box?

If you want to edit anything in the likebox than the code which renders the likebox is given below

<div class="b">
<div class="c">
<div class="ribbon-wrapper-green" id="TrickCrunch">
<div class="ribbon-green" id="TrickCrunchtitle">Facebook</div>
<center><iframe scrolling="no" allowtransparency="false" src=";width=240&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23eeeeee&amp;stream=false&amp;header=false&amp;height=335" style="border: 0px solid #222; background: trasparent; height: 335px; width:240px; overflow: hidden;" frameborder="0" ></iframe></center>


And if you want to Change stylesheet than contact me! I would help you! If you can change stylesheet than there are few classes “a” “b” “c” “ribbon-green” “ribbon-wrapper-green” you need to it! Also you can force any stylesheet using !important tag! e.g. if you have <div id=”ishan” style=”display:none;”> and you want to change stylesheet of it to display it. then you can type this code <style>#ishan{display:block !important;}</style> It would force the block to dispay forgetting previously added display none code!

If you have any doubt or issue than feel free to comment below!

One Response

  1. Ishan Patel June 27, 2013

Leave a Reply

Your email address will not be published. Required fields are marked *