How to Add Facebook Popup Like Box in Blogger blogs

Blogger is one of the oldest platform for bloggers but now WordPress handle big shares than blogspot.Many of professional bloggers migrate to WordPress for more controls and options.Wordpress blogs are hosted in dedicated servers so users have more control over there blogs.Thousand of beautiful themes and plugins are available on WordPress when we come to blogger this number is limited.One of the most useful plugin in WordPress is Facebook Popup Box ,Facebook Popup box display while page load this will help them to get many Facebook fans.The same Facebook Like Box popup menu is also available in Blogger platform.Lets us discuss how we can add

1.Login to your Blogger account

2.Template ->Edit HTML ..or Apple older blogger interface then
Design–>Edit HTML

Apply this code in between
<head> </head>

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js’/> <script src=’https://gj37765.googlecode.com/svn/trunk/html/[www.gj37765.blogspot.com]jquery.colorbox-min.js’/> <link href=’https://gj37765.googlecode.com/svn/trunk/html/%5Bwww.gj37765.blogspot.com%5Dfbpopup.css’ rel=’stylesheet’ type=’text/css’/> <script type=’text/javascript’> jQuery(document).ready(function(){ if (document.cookie.indexOf(‘visited=flase’) == -1) { var fifteenDays = 1000*60*60*24*30; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = “visited=true;expires=” + expires.toUTCString(); $.colorbox({width:”400px”, inline:true, href:”#mdfb”}); } }); </script>

Example

Facebool Fanpage popup box

3.Layout–>Add a Gadget–>HTML/Java script (New Interface)

Design –>Page Element –>Add a  Gadget–>HTML/Java script

Paste this code

<div style=’display:none’> <div id=’mdfb’ style=’padding:10px; background:#fff;’> <h3 class=”mdbox-title”>Just Click the Like Button Below<center><p style=”line-height:3px;” >▼</p></center></h3> <center> <iframe src=”//www.facebook.com/plugins/likebox.php?href=tp%3A%2F%2Fwww.facebook.com%2Fpages/7chipcom/152106238147822&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:300px; height:258px;” allowtransparency=”true”></iframe> </center><p style=” float:right; margin-right:35px; font-size:9px;” >Powered By <a style=” font-size:9px; color:#3B78CD; text-decoration:none;” href=”http://www.7chip.com”>Blogger Tricks</a></p> </div> </div>

Just Click the Like Button Below is text display with Box.You can change it according to you.

<div id=”mdfb” style=”background: #fff; padding: 10px;”> <h3 class=”mdbox-title”>

Which will give style to above text you can also change this

4.
  pages/7chipcom/152106238147822
Replace it with your Fan page url
My Facebook page url is

https://www.facebook.com/pages/7chipcom/152106238147822

copy the last

7chipcom/152106238147822

and paste it above

Save it ,reload your blog

  • M.M. Enterprises

    What a great useful way to add facebook like box., in blog i like your post, thanks for sharing nice post.

  • Anonymous

    I visited several web pages but the audio feature for audio songs present at this site is truly superb.
    My webpage - insurance rate quotes

Leave a comment

Your email address will not be published. Required fields are marked *