To create a fan page with a like box, follow these steps:
1. Log in to your facebook account and click here to create a fan page
2. Select a page category depending on what you’re creating a fan page for. You should select Brand or Product if it’s a blog.
3. Select Website as sub-category
4. Enter Your site name in the next available space e.g abcd.com or anything
5. Agree to the terms and continue.
6. The next page takes you to where you’re asked to upload the page’s profile picture. You can use your blog’s logo
7. You can invite your facebook friends to like your fan page or import email contacts to notify about your new fan page
8. Enter the basic info about your blog or website on the next page.
- Click here to get started.
- Enter your fan page URL and other parameters.
- Click on Get Code button.
- Select IFRAME tab and copy the code
How To Add Facebook like Box To Blogger
- Clicking on Get Code presents two different sets of codes
- Copy the code from ifame tab
- Click on Layout
- Select Add Widget and select HTML Javascript
<!-- FACEBOOK LIKE BOX CSS POPUP WIDGET -->
<style type="text/css">
* html #tpstylepopupdiv{position:absolute}
#tpstylepopupdiv{display:block;top:0px;left:0px;width:100%;height:100%;margin:0;overflow-y:auto; z-index:9999}
#tpstylepopup{background-color:#fff;overflow:none}
.tpstylepopup{width:325px;height:380px;position:fixed;top:45%;left:50%;margin-top:-200px; margin-left:-200px;border:7px solid rgb(56, 91, 162);padding:20px;z-index:9999}
.tptitle{background:#3B5999;color:#fff;font-size:16px !important;font-weight:bold;margin:5px 0;border-left:20px solid #6D85B5;padding:10px;line-height:25px;font-family:Arial !important; float:left;z-index:9999}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto;overflow-y:hidden}
/*]]>*/
</style>
<![endif]-->
<div id="tpstylepopupdiv">
<div id="tpstylepopup" class="tpstylepopup">
<h3 class="tptitle">GET ALL UPDATES VIA FACEBOOK JUST CLICK <img alt="Like" style="vertical-align:middle" src="http://goo.gl/bX6c0" /> BUTTON</h3>
<center>
Paste Your Iframe code that You Copied Earlier
</center>
<br/>
<center style="float:left; margin-left:10px;cursor:pointer;"><a style=" font-size:xx-small; color:#3B78CD; text-decoration:none;" onmouseup="document.getElementById('tpstylepopupdiv').style.display='none'">[X] I'm Already A FAN</a></center>
</div></div>
- Paste the code you copied earlier instead of red color text
- View your blog and the POPUP should appear.
EmoticonEmoticon