Stick-to-the-side Facebook Like

A response to http://stackoverflow.com/questions/9680010/fixed-facebook-page-like-button

HTML

<div id="fb-root"></div>

<!-- this is from http://developers.facebook.com/docs/reference/plugins/like-box/ -->
<div class="fb-like-box" data-href="http://www.facebook.com/britelyapp" data-width="292" data-show-faces="false" data-border-color="red" data-stream="false" data-header="false"></div>

<h1>Stick-to-the-side Facebook Like</h1>

<p>This page shows one possible way to address <a href="http://stackoverflow.com/questions/9680010/fixed-facebook-page-like-button">this StackOverflow problem</a>.

CSS

.fb-like-box {
  top: 136px;
  right: -292px; /* if your widget is set to 292px wide*/
  position: fixed !important;

/* remove, if you don't want it rotated to be vertical */
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
}

h1 {
  margin: 0.5em;
  font-size: 24px;
}
p {
  max-width: 80%;
  margin: 0.5em;
}
body {
  height: 1600px;
}

JavaScript

// update the ALL_CAPS stuff below

window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
  }(document));