{"id":337,"date":"2013-08-13T13:49:37","date_gmt":"2013-08-13T11:49:37","guid":{"rendered":"http:\/\/dev.flauschig.ch\/wordpress\/?p=337"},"modified":"2013-08-13T13:49:37","modified_gmt":"2013-08-13T11:49:37","slug":"facebook-sliding-like-box-script","status":"publish","type":"post","link":"http:\/\/dev.flauschig.ch\/wordpress\/?p=337","title":{"rendered":"Facebook Sliding Like Box Script"},"content":{"rendered":"

Facebook provides a Like Box<\/a> to show on your Website, what’s going on on your facebook page.<\/p>\n

A nice way to show this box is by a simple tab on the left or right which (on mouseover) slides in this box.<\/p>\n

Here’s an easy script to implement this on your page.<\/p>\n

Following steps are needed to implement this:<\/p>\n

1. Upload the Images for the Facebook Text-Logo
\nImage Left<\/a>
\nImage Right<\/a><\/p>\n

2. Add the jQuery Script to your page<\/p>\n

\r\n<script src="https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.2\/jquery.min.js"><\/script>\r\n<\/pre>\n
3. Add the CSS Styles<\/p>\n
\r\n<style type='text\/css'>\r\n\/*<![CDATA[*\/\r\n#fbplikebox {\r\n\tdisplay: block;\r\n\tpadding: 0;\r\n\tz-index: 99999;\r\n\tposition: fixed;\r\n}\r\n.fbplbadgeright {\r\n\tbackground-color:#3B5998;\r\n\tdisplay: block;\r\n\theight: 150px;\r\n\ttop: 50%;\r\n\tmargin-top: -75px;\r\n\tposition: absolute;\r\n\tleft: -47px;\r\n\twidth: 47px;\r\n\tbackground-image: url('fbtext_right.png');\r\n\tbackground-repeat: no-repeat;\r\n\toverflow: hidden;\r\n\t-webkit-border-top-left-radius: 8px;\r\n\t-webkit-border-bottom-left-radius: 8px;\r\n\t-moz-border-radius-topleft: 8px;\r\n\t-moz-border-radius-bottomleft: 8px;\r\n\tborder-top-left-radius: 8px;\r\n\tborder-bottom-left-radius: 8px;\r\n}\r\n.fbplbadgeleft {\r\n\tbackground-color:#3B5998;\r\n\tdisplay: block;\r\n\theight: 150px;\r\n\ttop: 50%;\r\n\tmargin-top: -75px;\r\n\tposition: absolute;\r\n\tright: -47px;\r\n\twidth: 47px;\r\n\tbackground-image: url('fbtext_left.png');\r\n\tbackground-repeat: no-repeat;\r\n\toverflow: hidden;\r\n\t-webkit-border-top-right-radius: 8px;\r\n\t-webkit-border-bottom-right-radius: 8px;\r\n\t-moz-border-radius-topright: 8px;\r\n\t-moz-border-radius-bottomright: 8px;\r\n\tborder-top-right-radius: 8px;\r\n\tborder-bottom-right-radius: 8px;\r\n}\r\n\/*]]>*\/\r\n<\/style>\r\n<\/pre>\n
4. Add the Javascript<\/p>\n
\r\n<script type='text\/javascript'>\r\n\/*<![CDATA[*\/\r\n    (function(w2b){\r\n        w2b(document).ready(function(){\r\n\t\t\tvar fromRight = false;\r\n\t\t\tvar topPosition = 50;\r\n\t\t\tvar logoPosition = 150;\r\n\t\t\tvar elementWidth = 292;\r\n            var $dur = 'medium';\r\n\t\t\t\r\n\t\t\t\/\/ Set the Tab Position\r\n\t\t\t$("#fbplikeboxlogo").css("top", logoPosition);\r\n\t\t\t\r\n\t\t\tif (fromRight) {\r\n\t\t\t\t$("#fbplikeboxlogo").addClass("fbplbadgeright");\r\n\t\t\t\tw2b('#fbplikebox').css({right: -elementWidth, 'top' : topPosition })\r\n\t\t\t\tw2b('#fbplikebox').hover(function () {\r\n\t\t\t\t\tw2b(this).stop().animate({\r\n\t\t\t\t\t\tright: 0\r\n\t\t\t\t\t}, $dur);\r\n\t\t\t\t}, function () {\r\n\t\t\t\t\tw2b(this).stop().animate({\r\n\t\t\t\t\t\tright: -elementWidth\r\n\t\t\t\t\t}, $dur);\r\n\t\t\t\t});\r\n\t\t\t} else {\r\n\t\t\t\t$("#fbplikeboxlogo").addClass("fbplbadgeleft");\r\n\t\t\t\tw2b('#fbplikebox').css({left: -elementWidth, 'top' : topPosition })\r\n\t\t\t\tw2b('#fbplikebox').hover(function () {\r\n\t\t\t\t\tw2b(this).stop().animate({\r\n\t\t\t\t\t\tleft: 0\r\n\t\t\t\t\t}, $dur);\r\n\t\t\t\t}, function () {\r\n\t\t\t\t\tw2b(this).stop().animate({\r\n\t\t\t\t\t\tleft: -elementWidth\r\n\t\t\t\t\t}, $dur);\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t\tw2b('#fbplikebox').show();\r\n        });\r\n    })(jQuery);\r\n\/*]]>*\/\r\n<\/script>\r\n<\/pre>\n
5. Add the Content<\/p>\n
\r\n<div id='fbplikebox' style='display:none;'>\r\n    <div id='fbplikeboxlogo'><\/div> \r\n\t<iframe src="http:\/\/www.facebook.com\/plugins\/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FFacebookDevelopers&amp;width=292&amp;height=590&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=true&amp;show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px; background:#FFFFFF;" allowTransparency="true"><\/iframe>\r\n<\/div>\r\n<\/pre>\n
There you go, that is all. Here’s a working examle:
\nfacebookslide<\/a><\/p>\n
There are some configuration variables at the top of the javascript:<\/p>\n\n\n\n\n\n\n
Name<\/td>\nFunction<\/td>\n<\/tr>\n
fromRight<\/td>\nDefines if the tab is on the left or on the right<\/td>\n<\/tr>\n
topPosition<\/td>\nThe space from the top of the page before the box starts<\/td>\n<\/tr>\n
logoPosition<\/td>\nThe space from the top where the tab appears<\/td>\n<\/tr>\n
elementWidth<\/td>\nThe width of the facebook box<\/td>\n<\/tr>\n<\/table>\n","protected":false},"excerpt":{"rendered":"
Facebook provides a Like Box to show on your Website, what’s going on on your facebook page. A nice way to show this box is by a simple tab on the left or right which (on mouseover) slides in this box. Here’s an easy script to implement this on your page. Following steps are needed … <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[13,3],"tags":[],"class_list":{"0":"entry","1":"post","2":"publish","3":"author-roemer","4":"post-337","6":"format-standard","7":"category-html-css","8":"category-programming"},"acf":[],"views":11826,"_links":{"self":[{"href":"http:\/\/dev.flauschig.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/337"}],"collection":[{"href":"http:\/\/dev.flauschig.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/dev.flauschig.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/dev.flauschig.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/dev.flauschig.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=337"}],"version-history":[{"count":0,"href":"http:\/\/dev.flauschig.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/337\/revisions"}],"wp:attachment":[{"href":"http:\/\/dev.flauschig.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/dev.flauschig.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=337"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/dev.flauschig.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}