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>
<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!
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