Home > apps > How To Make A Facebook Like Pop Up Box On Blogger | Latest 2017

How To Make A Facebook Like Pop Up Box On Blogger | Latest 2017

Appsgadget.com
hi friends, today gonna share  with you something uusefull to bloggers who runs a facebook page along with it,
how to create a facebook like pop op box,
this is very very useful for blog, the look is very simple and very good in view by a visitor blogger.



you can get a like on the facebook page in order page you do, be well-known or can be visited by visitors  from social media facebook

You can also share or  clicking your blog page all you made to the public

very easy conclusion the more you visit page you more and more visitors are coming to your blog


Steps for pop up like box on Blogger


1. First you need to login your blog

2. if it is you certainly will show the blogger dashboard menu 

3. please you select a layout for installation

4. Add the widget find the HTML / Java Script



5.copy and paste the code below

 Select Code Below



<script src=’http://ift.tt/I1ZsPw’ type=’text/javascript’></script>
<style type=”text/css”>
#fbox-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#fbox-close{width:100%;height:100%}#fbox-display{background:#eaeaea;border:5px solid #828282;width:340px;height:230px;position:absolute;top:32%;left:37%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#fbox-button{float:right;cursor:pointer;position:absolute;right:0;top:0}#fbox-button:before{content:”CLOSE”;padding:5px 8px;background:#828282;color:#eaeaea;font-weight:700;font-size:10px;font-family:Tahoma}#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px}
</style>
<script type=’text/javascript’>
//<![CDATA[
jQuery.cookie=function(a,b,c){if(arguments.length>1&&”[object Object]”!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),”number”==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),”=”,c.raw?b:encodeURIComponent(b),c.expires?”; expires=”+c.expires.toUTCString():””,c.path?”; path=”+c.path:””,c.domain?”; domain=”+c.domain:””,c.secure?”; secure”:””].join(“”)}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp(“(?:^|; )”+encodeURIComponent(a)+”=([^;]*)”).exec(document.cookie))?g(f[1]):null};
//]]>
</script>
<script type=’text/javascript’>
jQuery(document).ready(function($){
if($.cookie(‘popup_facebook_box’) != ‘yes’){
$(‘#fbox-background’).delay(3000).fadeIn(‘medium’);
$(‘#fbox-button, #fbox-close’).click(function(){
$(‘#fbox-background’).stop().fadeOut(‘medium’);
});
}
$.cookie(‘popup_facebook_box’, ‘yes’, { path: ‘/’, expires: 7 });
});
</script>
<div id=’fbox-background’>
<div id=’fbox-close’>
</div>
<div id=’fbox-display’>
<div id=’fbox-button’>
</div>
<iframe allowtransparency=’true’ frameborder=’0′ scrolling=’no’ src=’//www.facebook.com/plugins/likebox.php?
href=http://ift.tt/2sbzTsI&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false’
style=’border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;’></iframe>
<div id=”fbox-link”>Powered by <a style=”padding-left: 0px;” href=”http://ift.tt/2tu8hD8″ rel=”nofollow”>NavasTechs</a></div></div></div>


6.Press the Save button and add the widget to your blog, that’s all

Note:

do not forget to replace the code that reads href = https: //www.facebook.com/navastechs with pages link which you have created in order to appear to page you to quickly setup a pop-up lag time is find the code delay (3000) if you do not want The change is not anything 


Facebook Popup Like Box Customization



After adding the code, replace the address
http://ift.tt/2sbzTsI with your site’s facebook page URL.
The widget will appear 3 seconds after the page ྴfinishes loading. If you want to change this delay, change
the number 3000 to a greater or lesser number in this part:

.delay(3000)

By default, the like box only shows the first time the user visits your page.  If you want this Facebook box became popup on every time of the page loads, then you have remove this line of code:

$.cookie(‘popup_facebook_box’, ‘yes’, { path: ‘/’, expires: 7 });

or, you want to display like box only when user visits your homepage, do this, go to your blogger ‘Template’ > click on ‘Edit HTML’ button on the right side and search by clicking anywhere inside the code area and pressing the CTRL + F keys for this tag:


</body>

Paste the facebook popup widget right above the body tag and make sure to include the conditional tags below:

<b:if cond=’data:page.type == “index”‘>ADD THE FACEBOOK WIDGET CODE HERE </b:if>

 After Saving the widget successfully, go back to your website and check your pop up appeared or not.. for more comments you reviews below

Please follow and like us:
Jervie David Montejar
Pinoy Blogger, developer, foodie, self-proclaimed photographer and big anime and otaku fan. Likes RPG and action video games.
http://appsgadget.com

Leave a Reply

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