}

How to Add Popup Facebook Like Box in Blogger

Popup Facebook Like Box
We all know the importance of Facebook, whether in promoting your brand, products or services, websites or blogs, to receive site traffic or just simply to connect with your family and friends.
Adding a Facebook popup like a widget on your Blogger could significantly increase and boost your Facebook likes.

By using this simple and easy to install pop-up Facebook like the widget you will be able to bring your Facebook Page in front of your blog’s visitors and through this, you will have 100% more Facebook likes, followers and apart from this, you will get a huge social exposure.



Before heading, how to embed the Facebook Pop-Up Like widget on your Blogger blog, let me describe what Facebook is (You might be laughing as you already know what Facebook is, but read on you will get something different).

Facebook website is a dedicated to bringing people together in an online social networking platform. Through which users are able to connect with friends and family and see what’s happening in their lives, share photos, videos, and information with them.

There are many social networking sites on the internet but Facebook is an undisputable leader.

As of 2017 Facebook is claiming that more than three-quarters of a billion people have account on Facebook social networking site and that’s a significant percentage of the world’s population and an even more exciting statistic when you consider that it represents about half of all internet users worldwide, people are spending more time on the internet than ever before and Facebook has captured a substantial amount of that time.

Facebook is the place you want to be if you are looking for people to socialize with or if you have a business that you need to market.  People generally use Facebook in order to check in with friends and family. They like to spend time reading posts and viewing pictures of others.  

A large number of users also like to check in on their favorite business and brands. For example, A some Facebook user could use Facebook to find out what’s going on with their favorite brand or see what’s being delivered fresh every week.



You can see people on Facebook aren’t only interested in what their friends and families are saying, they also like to be marketed to.

So, adding a Facebook popup Like widget on your Blogger could significantly increase and boost your Facebook likes. By using this simple and easy to install pop-up Facebook Like widget you will be able to bring your Facebook Page in front of your blog’s visitors and through this, you will have 100% more Facebook likes, followers and apart from this, you will get a huge social exposure. So,

More: How to add a pop up search box in Blogger

How to Add Popup Facebook Like Widget in Blogger Blog


Step 1. Login to your Blogger blog and click Layout and click Add a Gadget.


Popup Facebook Like Box

Popup Facebook Like Box

Step 2. Select HTML/JavaScript and paste the below code into the content area as shown below image.


Popup Facebook Like Box

Popup Facebook Like Box

Select the code area

1:  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>  
2:  <style>  
3:  #popupFbLikeBox {display:none;position:fixed;background:rgba(0,0,0,0.7);height:100%;width:100%;left:0;top:0;z-index:99999;}  
4:  #popupArea {position:absolute;background:white;height:270px;width:auto;left:63%;top:58%;border-radius: 5px;margin:-220px 0 0 -375px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}  
5:  #popupClose{text-align:center;padding:10px;position:relative;cursor:pointer;background: linear-gradient(#eee, #fff);border-top-left-radius: 5px;border-top-right-radius: 5px;color:#000;}  
6:  #popupClose:hover{color:red;}  
7:  .fbLikeboxArea {margin:0 auto;width:366px;height:1px;margin-top:16px;margin-left:20px;position:relative;}  
8:  @media only screen and (max-width: 500px) {  
9:  #popupArea{left:63%;top:58%;margin:-220px 0 0 -250px;}  
10:  .fb-like-box,.fb-like-box span,.fb-like-box span iframe[style]{width: 100% !important;}}  
11:  </style>  
12:  <script>  
13:  //<![CDATA[  
14:  jQuery.cookie = function (key, value, options) {  
15:  // set cookie...  
16:  if (arguments.length > 1 && String(value) !== "[object Object]") {  
17:  options = jQuery.extend({}, options);if (value === null || value === undefined) {  
18:  options.expires = -1;}if (typeof options.expires === 'number') {  
19:  var days = options.expires, t = options.expires = new Date();  
20:  t.setDate(t.getDate() + days);}  
21:  value = String(value);  
22:  return (document.cookie = [  
23:  encodeURIComponent(key), '=',  
24:  options.raw ? value : encodeURIComponent(value),  
25:  options.expires ? '; expires=' + options.expires.toUTCString() : '',  
26:  options.path ? '; path=' + options.path : '',  
27:  options.domain ? '; domain=' + options.domain : '',  
28:  options.secure ? '; secure' : ''  
29:  ].join(''));}  
30:  //get cookie...  
31:  options = value || {};  
32:  var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;  
33:  return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;};  
34:  //]]>  
35:  </script>  
36:  <script>  
37:  jQuery(document).ready(function($){  
38:  if($.cookie('logedin_user') != 'yes'){  
39:  $('#popupFbLikeBox').delay(2000).fadeIn('medium');  
40:  $('#popupClose').click(function(){  
41:  $('#popupFbLikeBox').stop().fadeOut('medium');  
42:  });  
43:  }  
44:  $.cookie('logedin_user', 'yes', { path: '/', expires: 7 });  
45:  });  
46:  </script>  
47:  <div id='popupFbLikeBox'>  
48:  <div id='popupArea'>  
49:  <div id='popupClose'>CLOSE  
50:  </div>  
51:  <div class='fbLikeboxArea'>  
52:  </div>  
53:  <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?  
54:  href=https://www.facebook.com/wonderkrish&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'  
55:  style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>  
56:  </div>  
57:  </div>  
Step 3.

1.     Replace my Facebook Page URL at line number 54 with your own Facebook Page URL.

2.     You can change when your Facebook popup should appear by simply increasing or decreasing the time in line number 39. By default, I have set it to appear after 2 seconds. 

But if you want to increase put “delay(5000)" if you want to display your pop-up after 5 seconds or “delay(7000)” for 7 seconds, etc.



Step 4. Finally, click on Save in order to save the settings.
Kindly note: You might not see the Pop-Up at once, so wait for few seconds and clear your browser cookies.

Conclusion

I hope you have successfully added the Pop-Up Facebook Like widget on your Blogger blog. 

This has been fully tested and works 100%.
But if you have found any trouble in the process, you can leave a comment below and I will be happy to get back to you.


No comments