How to put a like box pop-up for Fanpage on Blogger

Facebook pages  offer a world of possibilities for content creators. It is a way to connect with the community and if you use Blogger you can put a pop-up on your blog for your followers to like your Fanpage.

Advantages of having a Fanpage

A Fanpage can bring together people with the same tastes and preferences. In addition to offering a possibility for followers of certain types of content to have a more direct communication with customers .

Your business or personal brand will have greater visibility and you will also have the possibility of positioning yourself in a social network with global reach. Not to mention that it is an excellent option to send traffic to your blog and carry out digital marketing campaigns.

Creating a Blogger pop-up with the Facebook Fanpage is an easy task with just a few clicks.

How to put a pop-up with like box for Fanpage on Blogger

  • Login to your Google account and access Blogger from the Google applications button. Select the Design option from the menu and choose the Add a gadget option.
  • A new window opens where you must select the HTML / JavaScript option .
  • There is a new window where the code should be placed in the content area . The title field can be left empty and you can select if it is visible or not.

<script src = ‘http: //ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’ type = ‘text / javascript’> </script>
<style>
#fanback {
display : none;
background: rgba (0,0,0,0.8);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
# fan-exit {
width: 100%;
height: 100%;
}
#JasperRoberts {
background: white;
width: 420px;
height: 270px;
position: absolute;
top: 58%;
left: 63%;
margin: -220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 # 939393;
-moz-box-shadow: inset 0 0 50px 0 # 939393;
box-shadow: inset 0 0 50px 0 # 939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#TheBlogWidgets {
float: right;
cursor: pointer;
background: url (http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/TheBlogWidgets.png) repeat;
height: 15px;
padding: 20px;
position: relative;
padding-right: 40px;
margin-top: -20px;
margin-right: -22px;
}
.remove-borda {
height: 1px;
width: 366px;
margin: 0 auto;
background: # F3F3F3;
margin-top: 16px;
position: relative;
margin-left: 20px;
}
# linkit, # linkit a.visited, # linkit a, # linkit a: hover {
color: # 80808B;
font-size: 10px;
margin: 0 auto 5px auto;
float: center;
}
</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_user_login’)! = ‘yes’) {
$ ( ‘#fanback’). delay (15000) .fadeIn (‘medium’);
$ (‘# TheBlogWidgets, # fan-exit’). click (function () {
$ (‘# fanback’). stop (). fadeOut (‘medium’);
});
}
$ .cookie (‘popup_user_login’, ‘yes’, {path: ‘/’, expires: 7});
});
</script>
<div id = ‘fanback’>
<div id = ‘fan-exit’>
</div>
<div id = ‘JasperRoberts’>
<div id = ‘TheBlogWidgets’>

<div class = ‘remove-borda’>
</div>
<iframe allowtransparency = ‘true’ frameborder = ‘0 ′ scrolling =’ no ‘src =’ // www.facebook.com/plugins/likebox.php?
href = http://www.facebook.com/gatosgraciososHD & width = 402 & height = 255 & colorscheme = light & show_faces = true & show_border = false & stream = false & header = false ‘
style =’ border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px; ‘> </iframe> <center>
<span style = »color: # a8a8a8; font-size: 8px;» id = »linkit»> Powered by <a rel = »nofollow» style = »color: # a8a8a8; font-size: 8px;» href = »http://jasperroberts.com»> Jasper Roberts Consulting </a> – <a style = »color: # a8a8a8; font-size: 8px;» href = »http://www.theblogwidgets.com»> Widget </a> </span> <

Search the code www.facebook.com/gatosgraciososHD and replace it with the link of your Fanpage . If you have HTML knowledge you can even modify the appearance and the exact time in which the notification should be displayed . It is a modification that will not take you more than five minutes and will give a professional look to your blog .

 

Leave a Comment