Contact Us:

If You Have Any Problem, Wanna Help, Wanna Write Guest Post, Find Any Error Or Want To Give Us Feedback, Just Feel Free To Contact Us. We Will Reply You Soon.

Name: *


Email: *

Message: *


Skillblogger

Download our app on Google Play Store

Tuesday, April 9, 2013

How to add custom facebook box to blogger

add-custom-facebook-box-to-blogger
Welcome my readers, today i'm gonna to show you how you can add a stylish facebook like box to blogspot, which it will confer significant attractive to your blog. Whatever number of fans on your facebook page is a little bit, you'll see a noticeable increase in the number of likes, not say that number will rise to hundreds or thousands but as far as making your blog move to the next level.. 
Place this widget anywhere you want, i advise you to put it on your sidebar, it will catch the attention of your readers. 
You can check these widgets it my help you:

This is a Demo:



How To Add it To Blogger:

In easy steps add new JavaScript element from Blogger => Dashboard => Layout, and copy and past the following code on it and make your changes:
<style>
.WTbloggerFB {
width: 280px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.WTbloggerFB, .WTbloggerFB:before, .WTbloggerFB:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.WTbloggerFB:before, .WTbloggerFB:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.WTbloggerFB:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
</style>


<div class="WTbloggerFB">
<div style="height:155px;overflow:hidden">
<fb:like-box href="https://www.facebook.com/Pro.widgets" data-width="300" data-height="179" data-show-faces="true" data-border-color="#f4f4f4" data-stream="false" data-header="false" class=" fb_iframe_widget "><span><iframe id="f5741c08" name="fdd6ca2ec" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; overflow-x: hidden; overflow-y: hidden; height: 179px; width: 300px; " class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?border_color=%23f4f4f4&channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2babfba84%26origin%3Dhttp%253A%252F%252Fwww.btsnts.com%252Ff1ae6f85bc%26relation%3Dparent.parent%26transport%3Dpostmessage&colorscheme=light&header=false&height=179&href=https%3A%2F%2Fwww.facebook.com%2FPro.widgets&locale=en_US&sdk=joey&show_faces=true&stream=false&width=300"></iframe></span></fb:like-box>
</div> </div>
 

Settings:

  • Change Pro.widgets with your facebook username.
  • If you don't have username for your facebook page then create your own here.
And that's was all what i have today, hope you like this widget share it with your friends, put your comments below, if you get trouble or you have Qs! you are all welcomed, tel next time take care and happy blogging.
Like the Post? Share with your Friends:-

Team SB
Posted By: Team SB

0 comments :

POST A COMMENT

Download our app on Google Play Store

Contact Us

Name

Email *

Message *

 
Copyright © . Skill Blogger . All Rights Reserved.
Designed by :- Way2themes