Saturday, January 3, 2015

Add Facebook popup Like box on your blog


When you come first time on this blog you must have seen a Facebook Like pop up box. Well that is just a few lines of JavaScript code embedded in the blog template.

So, i thought it to share with you guys if you like to add on your blogs also :)

Facebook popup Like box

1. Open the your blog Layout Editor > Add a Widget > Select HTML/JavaScript widget.

Configure Html/JavaScript widget

2. Copy and paste the below code in the content section as shown in above image. [ Just change the page id to your own Facebook page/profile]


 <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/automatethebox&width=402&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://automatethebox.blogspot.com" rel="nofollow">AutomateTheBox</a></div>
</div>
</div>


3. Save the Changes, and all Done :) ready to roll

1 comment:

leets academy said...

Thank you...this post is helpful my blogger

AWS Certified Solutions Architect Associate - AWS Introduction - Questions

All the Best !!! Show Result !! Try Again !! ×