Visit our official website APAJR Lab


Sunday 6 October 2013

How To Add POP UP Facebook Like Box For Blog & Website? | .::APAJR::.

Posted by Unknown | 03:51 |
There are many facebook like widgets there in the market. These widgets help in maximizing the number of likes of your facebook page. These widgets provide the veiwers of Website or Blog to easily find out the official facebook page related to that Website or the Blog. In this post a simple JQuery FaceBook like popup widget is described so that you can easily get more like to your facebook page.
This facebook like popup widgets appears when a new visitor visits your web or blog page. Since the IP address of the visitor get stored in the browser cookie therfore the next time when the visitor visits your page he do not find the popup there. This helps in stopping the veiwers from being disturbed.

Facebook Popup


The widget is set to appear on every page either the main page or the sub page in the blogger blog and if set so it will give same effects in the website. no matter the visitor came to main page or to any sub page he will find the widget there, so that he or she can like your facebook page easily.
The widget is set to appear again automatically after 30 days whether or not the user has cleared his or her browser cookies. You can change this time frame with your own. the method is defined at the end of the post.

Features:

  1. An unblockable popup (All browsers).
  2. Popup with Lightbox effect.
  3. With close button.
  4. Quick load and easy installation.
  5. Simple and stylish design.

How To Add In Blogspot?

  1. Go to your Blog through Blogger
  2. Open up your desired Blog.
  3. Go to Layout.
  4. Click "Add A Gadget" where you want to add it, in sidebar or in header etc.
  5. Scroll down to HTML-JAVASCRIPT gadget.
  6. Click "+" icon to add it.
  7. Now copy and paste the code given below.
  8. Leave the title box of the gadget empty.
  9. Click Save and you are done.

How To Add In Website?

  1. Just go to your HTML file.
  2. Now copy and paste the code given below in between the <body> and </body> tag.
  3. Save and you are done.

Code

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="https://raw.github.com/EXEIdeas/JS/master/ColorBox-v1.3.16"></script>

<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=false') == -1)
{
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#exestylepopups"});
}
});
</script>

<style type="text/css">
/* ColorBox v1.3.16(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)*/
#colorbox, #cboxOverlay, #cboxWrapper{
position:absolute;
top:0;
left:0;
z-index:9999;
overflow:hidden;
}
#cboxOverlay{
position:fixed;
width:100%;
height:100%;
}
#cboxMiddleLeft, #cboxBottomLeft{
clear:left;
}
#cboxContent{
position:relative;
}
#cboxLoadedContent{
overflow:auto;
}
#cboxTitle{
margin:0;
}
#cboxLoadingOverlay, #cboxLoadingGraphic{
position:absolute;
top:0;
left:0;
width:100%;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{
cursor:pointer;
}
.cboxPhoto{
float:left;
margin:auto;
border:0;
display:block;
}
.cboxIframe{
width:100%;
height:100%;
display:block;
border:0;
}
#cboxOverlay{
background:#000;
opacity:0.5 !important;
}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{
width:14px;
height:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmZntwTvPLg_AAsyG_hoVUkVoj2br9IHrJRai31gBaJpEEgSiYW_JSv5uyK06NwVNKneoayoMF2q97AbeNO3m0KHiLw8KMEsPX8MGpa7uUmXMFb9iG1ZywTYpvxe01Gaj631UBkpo0Lc/s1600/controls.png) no-repeat 0 0;
}
#cboxTopCenter{
height:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEje9Uum82Jf_F3fA8V1Iln1OjgcKBzwgwfWeqehUXN3uMcxJl17MM8w_fa3r5syuefc6rCyKDbmW-cxngXDK9ct2nzq2PSPRQk3oFjVPJ-N6lgScp1CHXCcOclkeAnoblcRjdm_9EP7c/s400/border.png) repeat-x top left;
}
#cboxTopRight{
width:14px;
height:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmZntwTvPLg_AAsyG_hoVUkVoj2br9IHrJRai31gBaJpEEgSiYW_JSv5uyK06NwVNKneoayoMF2q97AbeNO3m0KHiLw8KMEsPX8MGpa7uUmXMFb9iG1ZywTYpvxe01Gaj631UBkpo0Lc/s1600/controls.png) no-repeat -36px 0;
}
#cboxBottomLeft{
width:14px;
height:43px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmZntwTvPLg_AAsyG_hoVUkVoj2br9IHrJRai31gBaJpEEgSiYW_JSv5uyK06NwVNKneoayoMF2q97AbeNO3m0KHiLw8KMEsPX8MGpa7uUmXMFb9iG1ZywTYpvxe01Gaj631UBkpo0Lc/s1600/controls.png) no-repeat 0 -32px;
}
#cboxBottomCenter{
height:43px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEje9Uum82Jf_F3fA8V1Iln1OjgcKBzwgwfWeqehUXN3uMcxJl17MM8w_fa3r5syuefc6rCyKDbmW-cxngXDK9ct2nzq2PSPRQk3oFjVPJ-N6lgScp1CHXCcOclkeAnoblcRjdm_9EP7c/s400/border.png) repeat-x bottom left;
}
#cboxBottomRight{
width:14px;
height:43px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmZntwTvPLg_AAsyG_hoVUkVoj2br9IHrJRai31gBaJpEEgSiYW_JSv5uyK06NwVNKneoayoMF2q97AbeNO3m0KHiLw8KMEsPX8MGpa7uUmXMFb9iG1ZywTYpvxe01Gaj631UBkpo0Lc/s1600/controls.png) no-repeat -36px -32px;
}
#cboxMiddleLeft{
width:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmZntwTvPLg_AAsyG_hoVUkVoj2br9IHrJRai31gBaJpEEgSiYW_JSv5uyK06NwVNKneoayoMF2q97AbeNO3m0KHiLw8KMEsPX8MGpa7uUmXMFb9iG1ZywTYpvxe01Gaj631UBkpo0Lc/s1600/controls.png) repeat-y -175px 0;
}
#cboxMiddleRight{
width:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmZntwTvPLg_AAsyG_hoVUkVoj2br9IHrJRai31gBaJpEEgSiYW_JSv5uyK06NwVNKneoayoMF2q97AbeNO3m0KHiLw8KMEsPX8MGpa7uUmXMFb9iG1ZywTYpvxe01Gaj631UBkpo0Lc/s1600/controls.png) repeat-y -211px 0;
}
#cboxContent{
background:#fff;
overflow:visible;
}
#cboxLoadedContent{
margin-bottom:5px;
}
#cboxLoadingOverlay{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN-_bjgXGrA73p8MOO7De3oqKLnSGlMzqP1pbDv8Q7OvFrDwPmucqPLTevFDhzuF58L_hs3gnSgiBJwERei4PNa18_RiUUfIQ3R9E6DFdm-vTOjXptJKZkpfF5Ts3T_UHh04rky1uLAxc/s400/loadingbackground.png) no-repeat center center;
}
#cboxLoadingGraphic{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMI8tCZgVpclaHWW-iJKa4ow9US-jSVyzCTd0AAQrFux08T_rM0Qb3Nff8ZOF2ymFtK67MEHmlMoi1IeS1XFVEwb3ipute6fIUXzXZWCCC0VYYKqSysXngwoTqmVBQsdtB-459V_sPRnQ/s400/loading.gif) no-repeat center center;
}
#cboxTitle{
position:absolute;
bottom:-25px;
left:0;
text-align:center;
width:100%;
font-weight:bold;
color:#7C7C7C;
}
#cboxCurrent{
position:absolute;
bottom:-25px;
left:58px;
font-weight:bold;
color:#7C7C7C;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{
position:absolute;
bottom:-29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmZntwTvPLg_AAsyG_hoVUkVoj2br9IHrJRai31gBaJpEEgSiYW_JSv5uyK06NwVNKneoayoMF2q97AbeNO3m0KHiLw8KMEsPX8MGpa7uUmXMFb9iG1ZywTYpvxe01Gaj631UBkpo0Lc/s1600/controls.png) no-repeat 0px 0px;
width:23px;
height:23px;
text-indent:-9999px;
}
#cboxPrevious{
left:0px;
background-position:-51px -25px;
}
#cboxPrevious.hover{
background-position:-51px 0px;
}
#cboxNext{
left:27px;
background-position:-75px -25px;
}
#cboxNext.hover{
background-position:-75px 0px;
}
#cboxClose{
right:0;
background-position:-100px -25px;
}
#cboxClose.hover{
background-position:-100px 0px;
}
.cboxSlideshow_on #cboxSlideshow{
background-position:-125px 0px;
right:27px;
}
.cboxSlideshow_on #cboxSlideshow.hover{
background-position:-150px 0px;
}
.cboxSlideshow_off #cboxSlideshow{
background-position:-150px -25px;
right:27px;
}
.cboxSlideshow_off #cboxSlideshow.hover{
background-position:-125px 0px;
}
#mdfb{
font:12px/1.2 Arial, Helvetica, San-serif;
color:#666;
}
#mdfb a, #mdfb a:hover, #mdfb a:visited{
text-decoration:none;
}
.mdbox-title{
background:#000;
color:#fff;
font-size:20px !important;
font-weight:bold;
margin:10px 0;
border:20px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow:5px 5px 5px #CCC;
padding:10px;
line-height:25px;
font-family:Arial !important;
}
</style>

<div style='display:none'>
<div id='exestylepopups' style='padding:10px; background:#fff;'>
<center>
<h3 class="mdbox-title">
Receive all updates via Facebook. Just Click the Like Button Below...
</h3>
</center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FApajrEngineerHackers 
&amp;width=300
&amp;colorscheme=light
&amp;show_faces=true
&amp;order_color=%23ffffff
&amp;stream=false
&amp;header=false
&amp;height=258"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:300px; height:258px;"
allowtransparency="true">
</iframe>
</center>
<p style=" float:right; margin-right:35px; font-size:9px;">Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.apajrlab.tk">APAJR Developer</a></p>
</div>
</div>



Customization

  • Replace ApajrEngineerHackers with you facebook username.
  • It will not popup again and again on every relod or every page. To review the widget just delete your browser cookies and refresh the page.
  • Want to appear it on every page and on every refresh or reload, simply just change True to False
  • This popuop widget will automatically popup again within 30 days whether or not the user is clearing his or her cookies. You can change this timeframe if you wnat by simply changing the *30 in the above code to the days you want.
  • You can also customize the text Receive all updates via Facebook. Just Click the Like Button Below... with your own.

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
Powered by Blogger.