Want to integrate Facebook even further into your Showit website? Here we’ll explain how to add the “like” button, or a “like box” (previously known as fan page badge). Now keep in mind that the chances of Showit building these in are pretty high so don’t be surprised if this method is rendered obsolete at any time (at which point this post will be updated). The great thing about this method is that it can be done regardless if your hosting with Showit or not, and can be added to any +Site that you have published. All we’re doing is adding a piece of Javascript to the Custom HTML section of your Showit website (advanced section).
Add “like button” to Showit website.
1. Open Showit. Go to Site—->Settings—–>Advanced. Tick the box next to “Custom Header HTML.” Paste the following code in it’s entirety into the space provided. This will put a “like” button in the upper left hand corner of your website. Towards the end of the code string you’ll see left:2px; top:2px; The px is the number of pixels from the edge of the screen. Chance left to right, and top to bottom to move it to the bottom-right of the screen.
<script type=”text/javascript”>
document.write(‘<iframe src=”http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fspilledmilkdesigns.com&layout=button_count&show_faces=false&width=70&action=like&colorscheme=light” scrolling=”no” width=”70″ height=”26″ frameborder=”0″ allowTransparency=”false” style=”background:transparent; border:none; overflow:hidden; width:70; height:26px; position:fixed; padding:2px; left:2px; top:2px;”></iframe>’);
</script>
<meta content=”Spilled Milk’s Website” property=”og:title”><meta property=”og:title” content=”Spilled Milk’s Website”/>
<meta property=”og:site_name” content=”SpilledMilkDesigns.com”/>
<meta property=”og:image” content=”http://www.spilledmilkdesigns.com/images/smd_50x50.png”/>
2. There are a few things you’ll need to change in the code above before you publish. First, change the URL spilledmilkdesigns.com to your own. The title, site_name, and image location all need to be changed as well. Those correspond to what you’ll see come across facebook after someone “likes” your site. Read more here.
3. After changing the information publish your site. If your hosting your own site you’ll need to go back and re-upload the index.html page.
4. There is one more thing you can add to the like button. Supposedly you can add another meta property tag called fb: admins, followed by your user ID. This then pops up the word “admin” magically next to your like button. Clicking on that takes you to a special Facebook setup with your og: image used as the profile image. You can then blast off a status update to the walls of the people who have liked your site. Pretty neat right? It would be cool if it worked though. We spent a good while messing with it to no avail.
Add “like box” to Showit website.
Todd from Showit gets most of the credit on this one. The problem with the facebook fan page badge was that there was no way to “hide” it, meaning it would always be visible. In 5 seconds (I’m pretty sure it was 4 seconds) he wrote out a piece of code that will automatically close the “like box.” Now this is very much a page hack so we take no responsibilities if you break your site. With that to say, I’ll mention again the likelihood of Showit releasing these features into the builder, rendering these methods obsolete. Proceed at your own risk (although if you follow the instructions it’s as easy as copy and paste).
1. Find your fan page id. To find this click on your fan page profile image, then look up in the URL for a set of numbers at the end of the address. Take note of that string of numbers, you’ll need it in the next step.
2. Open Showit. Go to Site—->Settings—–>Advanced. Tick the box next to “Custom Header HTML.” Paste the following code in it’s entirety into the space provided. This will put a like box in the lower right -hand corner of your website.
<script type=”text/javascript”>
function closeFB(){$(“#fbclosebtn”).hide();$(“#fbframe”).hide(300);}
function openFB(){$(“#fbframe”).show(300, function(){$(“#fbclosebtn”).show();});}
document.write(‘<iframe id=”fbframe” src=”http://www.facebook.com/plugins/likebox.php?id=137013621744&width=292&height=425&stream=true&header=false” scrolling=”no” frameborder=”0″ allowTransparency=”false” style=”background:#ffffff; border:none; overflow:hidden; width:292px; height:425px; position:fixed; padding:2px; z-index:2000000001; right:0px; bottom:0px;”></iframe><div id=”fbclosebtn” style=”border:none; overflow:hidden; width:20px; height:20px; position:fixed; padding:2px; z-index:2000000002; right:0px; bottom:395px;”><a style=”color:#888; text-decoration:none; font-weight:bold” href=”javascript:closeFB();”>X</a></div><div id=”fbopenbtn” style=”background:#ffffff; border:none; overflow:hidden; width:98px; height:30px; position:fixed; padding:2px; z-index:2000000000; right:0px; bottom:0px;”><a style=”color:#000000; text-decoration:none; font-weight:bold” href=”javascript:openFB();”><img src=”http://sites.showitfast.com/10803/715/fb_likebox.jpg” border=”0″/></a></div>’);
</script>
3. In the 4th line of that code, where it says /likebox.php?id=137013621744 …the number needs to be changed to your fan page id that you grabbed from the 1st step. Also, the last line of code…where it says img src=….that URL needs to be YOUR url to the fb_likebox.jpg image. Feel free to go the url http://sites.showitfast.com/10803/715/fb_likebox.jpg , save the image, upload into your Showit account, then replace the link in the very end of the code above.
4. Publish your site, and remember if your hosting on your own you’ll need to re-upload that index.html page. The like box is placed at the lower right but if you know HTML the box can be moved anywhere on the screen.
5. Visit our website for the likebox example. While you’re there it wouldn’t hurt to join our fan by clicking “like.”
Any questions sound off in the comments.
Your code will look very similar to this one below:
