March 16, 2014

Weebly Tricks #38 - Sticky Facebook Like Box

Posted by Domz at 3/16/2014

Sticky Facebook Like Box for Weebly


There are many types of Facebook widgets including the most popular static like box seen below post or on the sidebar. Today, we will add a  Facebook Like Box that sticks to the right side of your screen and when you hover your mouse on it, it will open a mini panel showing your FB likers with their faces. The script is very simple, I just modified the original one to work on Weebly template.







1. I'm recommending to show this widget on every pages of your site. To do this, simply go to Settings > SEO > Header code, on the box provided, insert the following code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

<script language='JavaScript'> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".theblogwidgets").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .theblogwidgets{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4-YP7GN0TXPS3nnsQu5FbgxQt2Jb_R6XeRIvrfH3Vht0db5mojjjEw-IhS7Q8VE0mhaLAjzs3WO5JxopeJjxF7nH_S3OiZ6yd2uzHGuKm-5q1Z2nZ21A6r-2G51Ac1LqODW9787W1TkWn/") 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%;} .theblogwidgets div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .theblogwidgets span a{color: gray;text-decoration:none;} .theblogwidgets span a:hover{text-decoration:underline;} } </style><div class="theblogwidgets" style="">
<div>
 <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fmyweeblytricksofficial&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"></iframe></div>
</div>


Change the value in red color with your Fan Page Username, if you don't have a username for your Fan Page then you need to create one HERE. Publish your site.

2. If you want to show the widget on other parts of your site please read: 3 Ways in Editing Weebly's <head>, just make sure to put the code on the <head> part. You need to test all your pages if the widget is working properly because there are some points that it will conflict with other plug ins you already installed.

3. Remember also to change all your previous Facebook Fan Page address with your new one (username).

You are done! Like our Fan Page and subscribe to our newsletter if you like my tips!

Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

1 comment:

  1. I'd love to see one made for Twitter or Tumblr. It's really cool, but other-wise, it feels a tad "unloving" to my other social-media outlets. Good stuff though.

    ReplyDelete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top