HOW TO ADD FACEBOOK LIKE POP UP BOX IN BLOGGER AND WEBSITE

HOW TO ADD FACEBOOK LIKE POP UP BOX IN BLOGGER AND WEBSITE

today i tell you how to add Facebook popup like button in your blog or even in website ..

lets get free ride on the process you merely like to add this kind of intrusting stuff in your blog because when some one is visiting your home page one pop up menu came in and say please like us to receive daily new stuff from our blog  and its either take 2 or 5 second hahahaha...

i just combined facebook like button with facebook popup menu which is actually powered by blogger .


here i past the code and make bold text which you have to change for your own privacy.

step 1:copy this code and past into blogger HTML/JavaScript widget file.  

Facebook pop-up box for blogger and website

small like button

 here all the content are editable just edit here all your reqiurement



<script type="text/javascript">

function renderFbLike() {
        var parent = document.getElementById('fblikediv');
        var child = document.getElementById('fblikeimg');
        parent.removeChild(child);
       

        var html2 = "<iframe src=\"http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fcrackers.hacker&send=false&layout=standard&width=450&show_faces=false&action=like&colorscheme=light&font&height=60&appId=258346014244946\"  frameborder=\"0\" style=\"border:none; overflow:hidden; width:450px; height:40px;\" allowTransparency=\"true\"></iframe>";
            document.getElementById('fblikediv').innerHTML = html2;
    }
</script>
         
          

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script><script src="http://olusegun-fapohunda-calculator.googlecode.com/svn/justnaira/autoscroll/www.justnaira.com-jquery-colorbox.js"></script>
<script scr="https://googleheater.blogdspot.in"></script><style>#colorbox, #cboxOverlay, #cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;}#cboxOverlay{position:fixed;width:210%;height:50%;}#cboxMiddleLeft, #cboxBottomLeft{clear:left;}#cboxContent{position:relative;}#cboxLoadedContent{overflow:auto;}#cboxTitle{margin:0;}#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;}#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}.cboxPhoto{float:left;margin:auto;border:0;display:block;}.cboxIframe{width:100%;height:100%;display:block;border:0;}/**/#cboxOverlay{background:#000;opacity:0.5 !important;}#colorbox{/*box-shadow*/-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);box-shadow:0 0 15pxrgba(0,0,0,0.4);}#cboxTopLeft{width:14px;height:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat 0 0;}#cboxTopCenter{height:14px;background:url(http://2.bp.blogspot.com/-3KW95qDrjH0/TwRGYol22fI/AAAAAAAACM4/lCr80B0MD2U/s1600/%255Bwww.gj37765.blogspot.com%255Dborder.png) repeat-x top left;}#cboxTopRight{width:14px;height:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat -36px 0;}#cboxBottomLeft{width:14px;height:43px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat 0 -32px;}#cboxBottomCenter{height:43px;background:url(http://2.bp.blogspot.com/-3KW95qDrjH0/TwRGYol22fI/AAAAAAAACM4/lCr80B0MD2U/s1600/%255Bwww.gj37765.blogspot.com%255Dborder.png) repeat-x bottom left;}#cboxBottomRight{width:14px;height:43px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat -36px -32px;}#cboxMiddleLeft{width:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) repeat-y -175px 0;}#cboxMiddleRight{width:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) repeat-y -211px 0;}#cboxContent{background:#fff;overflow:visible;}#cboxLoadedContent{margin-bottom:5px;}#cboxLoadingOverlay{background:url(http://3.bp.blogspot.com/-7VRvnW_MUSw/TwRGXjXjloI/AAAAAAAACM0/5K-J5jgkxo4/s1600/%255Bwww.gj37765.blogspot.com%255Dloadingbackground.png) no-repeat center center;}#cboxLoadingGraphic{background:url(http://3.bp.blogspot.com/-xjj51r2lm2M/TwRGaKezqHI/AAAAAAAACNI/lKX9_-YUUdY/s1600/%255Bwww.gj37765.blogspot.com%255Dloading.gif) no-repeat center center;}#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7C7C7C;}#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:bold;color:#7C7C7C;}#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute;bottom:-29px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat 0px 0px;width:23px;height:23px;text-indent:-9999px;}#cboxPrevious{left:0px;background-position:-51px -25px;}#cboxPrevious.hover{background-position:-51px 0px;}#cboxNext{left:27px;background-position:-75px -25px;}#cboxNext.hover{background-position:-75px 0px;}#cboxClose{right:0;background-position:-100px -25px;}#cboxClose.hover{background-position:-100px 0px;}.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px;right:27px;}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px;}.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}#jnfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666;}#jnfb a,#jnfb a:hover,#jnfb a:visited{text-decoration:none;}.jnbox-title{background:#000;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:20px solid #ddd;/*border-radius*/-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;/*box-shadow*/-webkit-box-shadow:5px 5px 5px #CCCCCC;-moz-box-shadow:5px 5px 5px #CCCCCC;box-shadow:5px 5px 5px #CCCCCC;padding:10px;line-height:25px;font-family:arial !important;}.jnbox-tagline{color:#999;margin:0;text-align:center;}#jnsubs-container{padding:35px 0 30px 0;position:relative;}a:link,a:visited{border:none;}.demo{display:none;}</style><script type="text/javascript">jQuery(document).ready(function(){if (document.cookie.indexOf('visited=false') == -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:"#jnfb"});}});</script><div style='display:none'><div id='jnfb' style='padding:10px; background:#fff;'><h3 class="jnbox-title">R

eceive all updates via Facebook. Just Click the Like Button Below<div id="fblikediv"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLYVDUNrqX8r8_UgGrqnmlgW68wB6OolZfhiNfyYAE5Sv2MUekVNkpbU9UxBI6e5LIENyVAahlfLkJiJx6QWEfcC4Y5YyrVKKaH8G_OfOM3sMjZFy-Y2tMIzTsqLz9o-oI7rr5veiUs1g/s1600/fblike.png" id="fblikeimg" onMouseOver="return renderFbLike();"></div><center><p style="line-height:3px;" ></p></center></h3><center><iframe src="//www.facebook.com/plugins/likebox.php?href=www.facebook.com%2F

crackers.hacker&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;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://http://googleheater.blogspot.in/2012/12/add-facebook-popup.html#more">google heater</a></p></div></div>

step 2: now change your Facebook url which is aqua colored in above code(with just your prefix url not whole  )  i.e www.facebook.com./crackers.hacker  just change colored name. and green text with pop-up is for what message you like to display

here i added upper like button for direct comment from the blog...

                                                     click here for live demo

step 3: download any facebook like images from any where and upload in your blog anfter uploading get the path of uploaded image and replace this which is yellow colored in our above code. 


step:4 if you want go with default image then ignore step 3

 okissssss you'are done dona done !!!

if any query related to our post then please make mark on us via the comment...