Skip to content

JQUERY: ADDING SLIDE OUT FACEBOOK LIKE BOX TO YOUR BLOG WITH HOVER EFFECT

Check out this cool Facebook like box that roll over when you put your mouse on the FACEBOOK logo. In case you’re asking yourself why do I need this! Well if you have loaded your blog side bar with stuffs (widgets) then this slide like box is suitable for you. Here is the image below.

facebook slide box with jquery effect

Do you still want to see a live preview on how it works? Then check out this other blog for a live preview

Now how do you like it? If you have been searching for a widget like this then in about some lines you’ll see how you too can put it on your blog. So shall we proceed with the tutor?

ADDING SLIDE OUT FACEBOOK LIKE BOX TO YOUR BLOGGER BLOG WITH HOVER EFFECT

Ok! I am ready if you’re ready…

First loggin to your blogger blog dashboard and click on “design” then go to your “Edit HTML” and proceed.

Are you in your HTML edit? Now click the “Expand widget templates” box. Search for the tag </head>.

To make the search easy, simultaneously press your “ctrl + F” key to bring out a search box below your browser.

Have you seen the tag </head>? Right above the </head> tag past the below code.

[php]<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>[/php]

Save your work and we are almost through.

Go to Design, click Page Elements and click the “Add a new gadget”. On the page that pops up, select the “HTML/JavaScript” and paste the below code in it.

[php]<style type="text/css">

/*<![CDATA[*/

#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}

.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("http://3.bp.blogspot.com/-1GCgbuSZXK0/T38iRiVF41I/AAAAAAAABpg/WlGuQ3fi-Rs/s1600/vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}

/*]]>*/

</style>

<script type="text/javascript">

/*<![CDATA[*/

(function(w2b){

w2b(document).ready(function(){

var $dur = "medium"; // Duration of Animation

w2b("#fbplikebox").css({right: -250, "top" : 100 })

w2b("#fbplikebox").hover(function () {

w2b(this).stop().animate({

right: 0

}, $dur);

}, function () {

w2b(this).stop().animate({

right: -250

}, $dur);

});

w2b("#fbplikebox").show();

});

})(jQuery);

/*]]>*/

</script>

<div id="fbplikebox" style="display:none;">

<div class="fbplbadge"></div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=YOUR-FACEBOOK-PAGE-HERE&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#FFFFFF;" allowtransparency="true"></iframe>

</div>[/php]

For the code replace the “YOUR-FACEBOOK-PAGE-HERE” with your actual facebook page full URL.

Save your widget and voila! You have successfully added a facebook slide widget to your blog.

Now how simple was it? You can leave your thoughts and comments using the comment box below. If you also have a question or two regarding the topic, you can also use the comment box below to shine the light. Remember that your comment is valuable to us and very well welcomed.

Do you like the post? Then do click the like button, share us and also recommend us to friends so they can grab the excitement too. Do not forget to subscribe to our feed if you have not done so for latest updates on the go.

11 thoughts on “JQUERY: ADDING SLIDE OUT FACEBOOK LIKE BOX TO YOUR BLOG WITH HOVER EFFECT”

  1. Thank you for sharing this great script. I succesfully implemented it at our website! Unfortunately with Safari for Ipad and Iphone the box remains opened once it rolls out.

    Any Idea how to prevent this?

    1. Hello thijs,
      When i checked your website with my firefox and chrome it was fine. maybe the safari browser do not allow jquery. So my suggestion to you is to have a mobile version of your site. how’s that?

      1. Hi Babanature, Thanx for your reply. According to my information jquery runs perfectly on safari for Ipad/Iphone. I was hoping you had a solution to get this working with your script. And yeah, sure a mobile version is the best choice. 🙂

        1. This is caused by the invisible mouse cursor being placed by safari (and all other mobile browsers) at the point of last screen touch.
          The invisible cursor causes hover action.
          This is a common problem for all hover-based actions on mobile browsers.
          We had similar problem on our Global Quiz site with the quiz answers, being highlighted by last touch. The only solution we found was to activate ‘mobile’ mode once a first touch event is received by main window.

  2. This is great think, however for some reason Facebook image disappear from page as soon as open. After i refresh couple times it appears but its hard to keep it visible. Anything to fix that weird behavior?

    1. Blogger works like wordpress. On the first round, go to your wordpress “Editor” Located in “Appearance” and paste the first code in the header section.
      On the second code, go to your widget area and drag the “Text” Widget to where you want it to be and paste the second code there. Click save and you’re done.

  3. please am not too good in area of coding especially wordpress, in between which code in my header section will i paiste the code? or just anywhere inside the header section?

Leave a Reply to Dawah Cancel reply

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