Labnol like Facebook LIKE widget ?
I'm a big fan of Amit ji [ Labnol.org ] , i've already shared some blog posts related to labnol here in StudentsCrunch . Even though i'm not a professional Web Developer / Designer ,i like to be and i'm learning it day by day.
The widgets and blogger templates that i share here is made by some of the fine designers , and i love their creativity , thats why i share their works here .If you wanna show your design works , unique designs,widget or blogger templates , just drop down your comment.
The widgets and blogger templates that i share here is made by some of the fine designers , and i love their creativity , thats why i share their works here .If you wanna show your design works , unique designs,widget or blogger templates , just drop down your comment.
Add Labnol like Facebook fan box to your Blogspot Blog
The steps are extremely simple ;) you will be able to add the stylish facebook like box like the one you could found on labnol site.
Steps to follow :
Steps to follow :
1. Goto > Blogger Dashboard > Desgin ( Select your desired blog , if you have multiple one )
2. Now, Click " Add Gadget " from the " Page Elements " page.
3. Select " Add HTML/Javascript " ( opens a pop-up window )
4. Copy and paste the below code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <style>.helperbloggerFB { width: 280px; height: 150px; border-radius: 3px; position: relative; background-color:#f4f4f4; padding:5px 10px 15px 0; } .helperbloggerFB, .helperbloggerFB:before, .helperbloggerFB:after { background: #f4f4f4; border: 1px solid #ccc; } .helperbloggerFB:before, .helperbloggerFB:after { content: ""; position: absolute; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; } .helperbloggerFB:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #ccc; } </style> <div class="helperbloggerFB"> <div style="height:155px;overflow:hidden"> <fb:like-box href="https://www.facebook.com/StudentsCrunch" 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%2Fstudentscrunch&locale=en_US&sdk=joey&show_faces=true&stream=false&width=300"></iframe></span></fb:like-box> </div> </div> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> |
5. Just Change the "Facebook Fan Page url " to yours.
ie) StudentsCrunch to your Facebook url.
ie) StudentsCrunch to your Facebook url.
6. Hit " Save " thats it..Check your blog for Labnol like Facebook LIKE widget.
You can adjust the width and height of the widget according to your need.
Hope you like this blogger widget , if you do so, please share this widget to your friends .The widget is made by HelperBlogger .
You may also like :
You may also like :
- TechCrunch like Social Sharing widget for Blogger
- Static Facebook Like Pop-up Slide Widget
- Facebook Popup Like Widget with Timer control
- Add Twitter Fan Box widget to Blogger
Don't forgot to share this with your friends..Your comments are always welcome ;)
