Saturday, July 22, 2017
728x90 V3

How to add floating Facebook like box widget in Blogger

Today social media marketing is really important, about 60% of traffic on your website/blog is coming from facebook, twitter or other social media platforms. It’s very important to collect your visitors on one place, facebook page, this Facebook like box widget will help you with that. In this tutorial you’ll learn how to add floating Facebook like box to the blogger, it’s very easy and all you got to do is to follow me step by step!

Edit HTML

First you need to log in into your Blogger Dashboard, go to the Template section, make an backup of your template! Now when you’re in the Template section click on the Edit HTML button like in the picture below:

tut 1

 

Find </head>

Now use CTRL+F and find </head> line, right before/above it and paste the code from below:

 

 

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’ type=’text/javascript’/>

Add a gadget

Now go to Layout,and in the new window you can see the link “Add a gadget” like in the picture below:

Capture

Click on the “Add a Gadget” link, the new little window will come up, scroll a bit and find the HTML/JavaScript Gadget like in the picutre below:

5

Paste code

Now when you clicked on HTML/JavaScript Gadget a new window will show up like in the picture below:

7

In the content box from the picture above paste the following code:

<script type=”text/javascript”> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(“.abtlikebox”).hover(function() {jQuery(this).stop().animate({right: “0”}, “medium”);}, function() {jQuery(this).stop().animate({right: “-250”}, “medium”);}, 500);}); /*]]>*/ </script> <style type=”text/css”> .abtlikebox{background: url(“http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png”) no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px “lucida grande”,tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class=”abtlikebox” style=””> <div> <iframe src=”http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fditution&amp;width=245&amp;colorscheme=light&
amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270″ scrolling=”no” frameborder=”0″ scrolling=”no” style=”border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;”></iframe><span>Widget by :<a href=”http://www.ditution.com”> DiTution</a></span> </div> </div>

Replace the red text “ditution” with url of your profile or page.

Preview

This is how will your facebook like box looks like, i hope that this tutorial helped you!

Untitled

About Dimitrije Zivadinovic (Di)

Dimitrije Zivadinovic (Di)
Hey there, I'm Dimitrije Zivadinovic and this is my blog! I am a blogger, and.. No i am just a blogger, i know something about blogging platforms and i wanted to share my knowledge with you. If you have anything to ask me, feel free to hit me up via social media or leave a comment down bellow!

Check Also

Add a CSS Animated Share Button on Blogger

Social Medias are very important for SEO so it’s better for you to have a ...

Leave a Reply

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