Facebook side sliding like box

Wednesday, 28 Dec 2011
All of us developers get this request often enough: "can you add a facebook like somewhere?". A common, ugly solution is to put a Facebook label on the side, which slides in the Facebook like-box. Usually, this satisfies your client. All we got to do, is make it easy for the developer, right? Gotcha.

Just include this script-tag in the header of your page/template. The script uses MooTools, but don't worry... it's dynamically loaded when not available yet. Thus, this simple script should work for anyone.

Example: this page.

Configure the script by setting parameters on the <script> tag:

fbpage name of the Facebook-page
bordercolor (optional) hexcoded color for the border of the likebox (without #)
image (optional) set to plain (all blue, default) or border (blue with a white border, looks better on darker backgrounds)

<script
   type="text/javascript"
   src="http://www.monkeyphysics.com/fb-sidelike/fb-sidelike.js"
   fbpage='cocacola'></script>
One request: please host the script, and accompanying images (#1 and #2) on your own client server / company server... just in case traffic forces me to shut it down. All you need to do is change the URL in the script-tag (example above). This also allows you to tweak everything (colors, borders, sizes, etc).

Posted in: javascript facebook
Add comment

Comments (1)

25-01-2012, 23:24
Alexander
This is just awesome. Was really easy to install, and worked instantly... thanks for this!