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.
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&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&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.
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?
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?
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. 🙂
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.
is really helpful…thks
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?
Hello enko,
The reason might be you did not place your facebook id well or your internet connect… check for the problem and rectify
thanks for this info. can this also works in wordpress?
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.
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?
Paste the first code right above the tag.
If you follow the post with the tips i laid down, you will be able to set it up easily.