How to create a facebook fanspage hovering blog

If you have a blog that already has a page on facebook of course you want people to visit your blog facebook page instead? One way is to install these pages on your own blog. Therefore, diartikel this time I will give you a way to install the facebook page on the blog.

In this article, the way that we use is made pop up on your blog (and not create a new tab). This is an effective way to make visitors of your blog like facebook page. Indeed, you can create a pop up your facebook page can not be closed before in the like, but this is very dangerous because it can make visitors upset and distress is in your blog so that the visitors had not come in your blog. Surely you do not want this to happen is not it? Therefore, here I will give you a way to create a facebook page you're on a blog and can be closed easily.

And in this way using a script that allows you to edit the script and the way the installation is also easy, same as always.

Well, we just started. Here is a script to create a facebook page floated on the blog. Copy it !!!

<! - Script by: http://fikrisworldandlife.blogspot.com/ -!>
<Style type = 'text / css'>
    / * Message Box * /
    # Box-message {
position: fixed! important;
position: absolute;
top: -1000px;
left: 50%;
margin: 0px 0px 0px -182px;
width: auto;
height: auto;
padding: 16px;
background: # fff;
font: normal dose, Georgia, Serif;
color: # 111;
border: 2px solid # 333;
-webkit-box-shadow: 1px 0px 2px RGBA (0,0,0,0.4);
-moz-box-shadow: 1px 0px 2px RGBA (0,0,0,0.4);
box-shadow: 1px 0px 2px RGBA (0,0,0,0.4);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
# Box-message a.close {
position: absolute;
top: -10px;
right: -10px;
background: # fff;
font: bold 16px Arial, Sans-Serif;
text-decoration: none;
line-height: 22px;
width: 22px;
text-align: center;
color: # 111;
border: 2px solid # 333;
-webkit-box-shadow: 1px 0px 2px RGBA (0,0,0,0.4);
-moz-box-shadow: 1px 0px 2px RGBA (0,0,0,0.4);
box-shadow: 1px 0px 2px RGBA (0,0,0,0.4);
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
cursor: pointer;
}
#twitterx {
background: # EEF9FD;
padding: 10px;
text-align: center;
border: 1px solid # C7DBE2;
border-top: 0;
}
</ Style>
<Script type = "text / javascript" src = http: //ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js>
</ Script>
<Script type = 'text / javascript'>
$ (Window) .bind ( "load", function () {
// Animate Top Value When Page Loaded Completed
$ ( '# Box-message'). Animate ({top: '50px'}, 1000);
// Remove Mailbox When Close Button On Click
$ ( 'A.close'). Click (function () {
$ (This) .parent (). FadeOut ();
return false;
});
});
</ Script>
<Div id = 'box-message'>
<! - HTML Start ->
<Center>
<Iframe src = "//www.facebook.com/plugins/likebox.php?href=https://facebook.com/Fikris-World-637229659771660/
ref = page_internalref = hl & amp; width = 292 & amp; height = 258 & amp; colorscheme = light & amp; show_faces = true & amp; border_color & amp; stream = false & amp; header = false & amp; APPID = 371,524,026,202,784 "scrolling =" no "frameborder =" 0 "style =" border : none; overflow: hidden; width: 292px; height: 258px; "allowtransparency =" true "> </ iframe>
</ Center>
<! - HTML End ->
<a class='close' href='#'> & times; </a>
<P style = "float: right; margin-right: 35px; font-size: 10px;" > Powered By <a style = "font-size: 10px; color: # 3B78CD; text-decoration: none;" href = "http://fikrisworldandlife.blogspot.com/"> Facebook </a> </ p> </ div>

Script from : Fikri's World

Change blue link with your page address!!

If you just want to install facebook page only without hovering use this script

<center> <div class = "fb-padding"> <div id = "fb-root"> </ div>
<script> (function (d, s, id) {
   var js, fjs = d.getElementsByTagName (s) [0];
   if (d.getElementById (id)) return;
   js = d.createElement (s); js.id = id;
   js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.3&appId=1395743857335531";
   fjs.parentNode.insertBefore (js, fjs);
} (document, 'script', 'facebook-jssdk')); </ script>
<div class = "fb-page" data-href = "https://facebook.com/Fikris-World-637229659771660/" data-width = "280" data-height = "230" data-hide-cover = "false" data -show-facepile = "true" data-show-posts = "false"> <div class = "fb-xfbml-parse-ignore"> </ div> </ div> </ div> </ center>

Well, it looks like that's all I can give, hopefully this article can help you in making your blog page of the facebook dai. And if you want to know how to install it, please see the video below. So much from me and thank you.





Note to the video above,
The video uses Indonesian, but do not worry if you do not understand Indonesian, you simply follow what is done in the video.

This video was taken from the World Fikri and has been allowed by their respective owners.