How To Add Popup Facebook Fan Page To Blogger

Thank you to digital world, where you can reach millions of audience with a blink of an eye, In this time now, Facebook have become the leading social media social media service provider to over 1.3Billion users all over the world, which not less than 800 million log in to there account every day. I would say a very big thank you to this very social media platform, with the help of this platform, bloggers have been able to reach vast number of audience very easily than it use to be.

In order for you to gain or reach out to more audience, you need to take an advantage on social media platforms like, twitter, google+, facebook and many others. but we are focusing on facebook on this post.  

What did you think about sharing your content to you fans and friends on facebook? Sharing your content to this social media platform is the best strategy to get steady flow of audience or readers. I believe you know how it works? You share your content to your friends on facebook, they read it and like it, then they share it to their own friends, their friends will read it and appreciate your work, by sharing it to others and others will read and share it and so on. By doing this you have reach vast number of readers, with just one click on the share button on your facebook, that is the power of social media and how it works.

The most  important thing about facebook is that your readers are not from one country, they are from different countries around the world. On reading this piece completely will enable you to add facebook popup like page on your blogger blog very easy in few steps below.

How To Add Popup Facebook Fan Or Like Page

1. Login to you Blogger account.

2. Click on Layout.

3. On the next screen click on the Add a Gadget on the side bar.

4. On the next small popup window click on HTML/Javascript.

5. Now copy and paste the below code on the blank box

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#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: 0px;
    top: 0px;
}
#fbox-button:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #828282;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #aaaaaa;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
    padding: 5px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).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=https://www.facebook.com/pages/buildaperfectblog/120574614736021&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://www.buildaperfectblog.com/2016/09/how-to-add-popup-facebook-fan-page-to.html" rel="nofollow">buildaperfectblog</a></div>
</div>
</div>

 Note: CUSTOMIZE THE FOLLOWING CODE BEFORE SAVING

If you would wish to customize the way the popup page would act on your blog, then below are some changes you should make;

* Change this page ID www.facebook.com/pages/buildaperfectblog/120574614736021  to yours.

* The page is set to popup after five seconds when your blog complete loading. You can change this delay(5000) default delay to a higher figure or lesser as you wish.

* The page is set by default to popup just once, when someone visit your blog. If wish it to show every time a new page is loaded then remove this line of code  $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });

* If you would wish it to popup only on your Homepage each time a user visits, then you need to do some editing on you HTML by searching(CTRL +F) for the clossing body tag </body> . Now copy and paste the below code above the clossing body tag </body>

&lt;b:if cond='data:page.type == "index"'&gt;ADD THE FACEBOOK WIDGET CODE HERE &lt;/b:if&gt;

 * Copy the widget code and paste it inside the conditional tags above where you see
"ADD THE FACEBOOK WIDGET CODE HERE".

6. Now you are done click on the save button.

 Now that you are done with adding the code, go back and view your blog it should up and running very well.

Thank you for reading, I believe this was helpful to you? Please fell free to share this post to your friends. Let me read your comment on the box. If you have any issues with adding this code let me know, it would be my pleasure to help you.