Facebook is most popular social media website in the world so it's a best way to advertise and boost your social exposure of your brands , bands , websites/blogs , organisations , celebrities and marketting zone in industry. Anyone easily to use of social plugins and widgets are a great way to link your Facebook page with your website.
Facebook has announced the release of a new Like Box plugin, rewritten “from the ground up” to be up to four times faster with smaller components, less CSS (now inline) and asynchronously loading JavaScript.
The Like Box plugin, showing on sidebar widget, has proved extremely popular on the Web, but it has also become known for significantly weighing down sites, especially on slower connections. Given the ubiquity of Facebook and the popularity of this plugin among site owners, any improvement at all could quickly alter the way many people experience the Web.
This Facebook Likebox widget design from use of the new social like plugin of facebook developer code and css design code. Let’s look at how to not only insert the popular Like Box code onto your website, but also how to customize it to fit with your design, and make sure the code correctly validates.
How add Facebook Fan Like Box Widget
HTML Code>>
- First go to Blogger Dashboard Homepage and click on drop-down list.
- Show the Blogger option then select the Layout option.
- Layout>>Add widget : add the HTML/javascript Widget and Paste the below code in this wiget box.
<div class="fb-wrapper">CSS Code >>
<div class="fb-inner"><div class="ribbon-wrapper-blue"><div class="ribbon-blue">Facebook Like</div></div><center><iframe allowtransparency="false" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/digitalhubinc&width=240&colorscheme=light&show_faces=true&border_color=%23eeeeee&stream=false&header=false&height=335" style="background: trasparent; border: 0px solid #222; height: 335px; overflow: hidden; width: 240px;"></iframe></center> </div></div>
In this widget use two different design css code , What do want to apply given below css code.
- Go to Template > Edit HTML :
- Next, find below code
]]></b:skin>and copy the css code of style and paste above it.
1st Css Code Style
.fb-wrapper {padding:5px; margin: 50px auto; width: 276px; height: 360px; border-radius: 0px; position: relative; z-index: 90;background:#eee;background-image:-moz-linear-gradient(top, #fff, #eee);background-image:-ms-linear-gradient(top, #fff, #eee);background-image:-o-linear-gradient( top, #fff, #eee);background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));background-image:-webkit-linear-gradient(top, #fff, #eee);background-image:linear-gradient(top, #fff, #eee);border:1pxsolid #ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 1px 0 #9a9a9a;-webkit-box-shadow:0 1px 0 #9a9a9a;box-shadow:0 1px 0 #9a9a9a;padding:10px;}.fb-inner {border:1px dashed #ccc;padding:0.5em;-moz-box-shadow:0 0 0 1px #fff;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff} .ribbon-wrapper-blue { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px;} .ribbon-blue { font: bold 15px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #306EFF; background-image: -webkit-gradient(linear, left top, left bottom, from(#306EFF), to(#3BB9FF)); background-image: -webkit-linear-gradient(top, #306EFF, #3BB9FF); background-image: -moz-linear-gradient(top, #306EFF, #3BB9FF); background-image: -ms-linear-gradient(top, #306EFF, #3BB9FF); background-image: -o-linear-gradient(top, #306EFF, #3BB9FF); color: #fff; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3);} .ribbon-blue:before, .ribbon-green:after { content: ""; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px;} .ribbon-green:before { left: 0;}.ribbon-green:after { right: 0;}
2nd Css Code Style
.fb-wrapper {padding:5px; margin: 50px auto; width: 276px; height: 360px; border-radius: 0px; position: relative; z-index: 90;background:#eee;background-image:-moz-linear-gradient(top, #fff, #eee);background-image:-ms-linear-gradient(top, #fff, #eee);background-image:-o-linear-gradient( top, #fff, #eee);background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));background-image:-webkit-linear-gradient(top, #fff, #eee);background-image:linear-gradient(top, #fff, #eee);border:1pxsolid #ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 1px 0 #9a9a9a;-webkit-box-shadow:0 1px 0 #9a9a9a;box-shadow:0 1px 0 #9a9a9a;padding:10px;}.fb-inner {border:1px outset #ccc;padding:0.5em;-moz-box-shadow:0 0 0 1px #f9fafe;-webkit-box-shadow:0 0 0 1px #f9fafe;box-shadow:0 0 0 1px #f9fafe
} .ribbon-wrapper-blue { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px; opacity:0.8;filter:alpha(opacity=80);} .ribbon-wrapper-blue:hover { width: 90px; height: 90px; overflow: hidden; position: absolute; top: -4px; right: -4px; opacity:1.0;filter:alpha(opacity=100);}
.ribbon-blue { font: bold 10px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(275,275,275,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 10px 0; left: -7px; top: 18px; width: 130px; background-color: #068cfd; background-image: -webkit-gradient(linear, left top, left bottom, from(#068cfd), to(#068cfd)); background-image: -webkit-linear-gradient(top, #068cfd, #068cfd); background-image: -moz-linear-gradient(top, #068cfd, #068cfd); background-image: -ms-linear-gradient(top, #068cfd, #068cfd); background-image: -o-linear-gradient(top, #068cfd, #068cfd); color: #fff; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5); box-shadow: 0px 0px 3px rgba(0,0,0,0.5);} .ribbon-blue:before, .ribbon-blue:after { content: ""; border-top: 6px solid #068cfd; border-left: 6px solid transparent; border-right: 6px solid transparent; position:absolute; bottom: -3px;} .ribbon-blue:before { left: 0;}.ribbon-blue:after { right: 0;}
- Then save and close.
If like this post , feel free to use and please share and Like.
If any problem face in this widget comment below here.
