The Wizardry and Steamworks website has a like and share box in the top-right corner. The concept that we find nice is that it does not occupy much space and it sill provides a way to like and share the content from anywhere since the box is designed to follow the scrolling mechanism.

This is simply done by setting a very high z-index in order to make the box float above all other content and then by setting the background of the container to an image with the scroll option on in CSS. The jQuery script takes care of displacing the box by an amount of pixels when you hover over the container.

The difference from noopslikebox is that we place the icon in the top right corner with smaller graphics so it will not encumber the reader. This is particularly important if you care about the content on your website more than you do for the pictures.

Another difference is that we do not use the like box but rather a customized version of like button. While the like-box looks more outstanding and with a list of followers, a customized version of the like-button and share can provide a more effective way to share documentation.

You need a facebook like button that is 21px by 21px in dimension. You can find the one we use here and it needs to be placed in the same directory as the html file that you will be editing. Otherwise, you can edit the code and change:

background:url(like_icon.png) no-repeat scroll left center!important;

so that like_icon.png refers to an image on your webserver.

In uncompressed code, this is the result:

<script type="text/javascript">
	 (function (d, s, id) {
	     var js, fjs = d.getElementsByTagName(s)[0];
	     if (d.getElementById(id)) return;
	     js = d.createElement(s);
	     js.id = id;
	     js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
	     fjs.parentNode.insertBefore(js, fjs);
	 }(document, 'script', 'facebook-jssdk'));
  </script>
  <script type="text/javascript">
	  jQuery(document).ready(function () {
	      jQuery(".fbox").hover(function () {
	          jQuery(this).stop().animate({
	              right: "0"
	          }, "medium");
	      }, function () {
	          jQuery(this).stop().animate({
	              right: "-115"
	          }, "medium");
	      },
	      500);
	  });
  </script>
  <style type="text/css">
	.fbox
	{
		background:url(like_icon.png) no-repeat scroll left center!important;
		display:block;
		float:right;
		height:20px;
		padding:0 5px 0 20px;
		position:fixed;
		right:-115px;
		top:0;
		width:110px;
		z-index:9999999;
	}
 
	.fbox div
	{
		background:#eceef5;
		border:none;
		display:block;
		padding:0 0 0 5px;
		position:relative;
	}
  </style>
 
  <div class="fbox">
    <div id="fb-root"></div>
    <div class="fb-like" data-send="true" data-layout="button_count" data-show-faces="false" data-font="arial"></div>
  </div>

Using Packer, the code can be minimized to:

<script type="text/javascript">(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js,fjs)}(document,'script','facebook-jssdk'));</script><script type="text/javascript">jQuery(document).ready(function(){jQuery(".fbox").hover(function(){jQuery(this).stop().animate({right:"0"},"medium")},function(){jQuery(this).stop().animate({right:"-115"},"medium")},500)});</script><style type="text/css">.fbox{background:url(like_icon.png)no-repeat scroll left center!important;display:block;float:right;height:20px;padding:0 5px 0 20px;position:fixed;right:-115px;top:0;width:110px;z-index:9999999}.fbox div{background:#eceef5;border:none;display:block;padding:0 0 0 5px;position:relative}</style><div class="fbox"><div id="fb-root"></div><div class="fb-like"data-send="true"data-layout="button_count"data-show-faces="false"data-font="arial"></div></div>