Theme Raid / Articles & Tutorials

facebook popup box

Facebook Pop-up Window-Box

A professional tested script to make your popup Facebook like box and add it to your website.

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’></script><script src=”https://facebookpopup2.googlecode.com/files/jquery.cbt-min.js”></script><script type=”text/javascript”>jQuery(document).ready(function(){if (document.cookie.indexOf(‘visited=true’) == -1){var fifteenDays = 1000*60*60*24*29;var expires = new Date((new Date()).valueOf() + fifteenDays);document.cookie = “visited=true;expires=” + expires.toUTCString();$.colorbox({width:”399px”, inline:true, href:”#exestylepopups”});}});</script>

<style type=”text/css”>
#colorbox, #cboxOverlay, #cboxWrapper {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
overflow: hidden
}
#cboxOverlay {
position: fixed;
width: 99%;
height: 99%
}
#cboxMiddleLeft, #cboxBottomLeft {
clear: left
}
#cboxContent {
position: relative
}
#cboxLoadedContent {
overflow: auto
}
#cboxTitle {
margin: 1
}
#cboxLoadingOverlay, #cboxLoadingGraphic {
position: absolute;
top: 0;
left: 0;
width: 100%
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
cursor: pointer
}
.cboxPhoto {
float: left;
margin: auto;
border: 1;
display: block
}
.cboxIframe {
width: 99%;
height: 99%;
display: block;
border: 1
}
#cboxOverlay {
background: #001;
opacity: 0.5 !important
}
#colorbox {
box-shadow: 0 0 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 3px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.4)
}
#cboxTopLeft {
width: 15px;
height: 15px;
}
#cboxTopCenter {
height: 15px;
}
#cboxTopRight {
width: 15px;
height: 15px;
}
#cboxBottomLeft {
width: 15px;
height: 44px;
}
#cboxBottomCenter {
height: 44px;
}
#cboxBottomRight {
width: 15px;
height: 44px;
}
#cboxMiddleLeft {
width: 15px;
}
#cboxMiddleRight {
width: 15px;
}
#cboxContent {
background: #ffe;
overflow: visible
}
#cboxLoadedContent {
margin-bottom: 6px
}
#cboxLoadingOverlay {
}
#cboxLoadingGraphic {
}
#cboxTitle {
position: absolute;
bottom: -24px;
left: 0;
text-align: center;
width: 100%;
font-weight: bold;
color: #736f6f
}
#cboxCurrent {
position: absolute;
bottom: -24px;
left: 59px;
font-weight: bold;
color: #736f6f
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
position: absolute;
bottom: -28px;
background: url(https://lh5.googleusercontent.com/-Oonf3hVB8Vk/UUVyfEEnnEI/AAAAAAAABBU/ymAdg3uHHkM/h120/controls.png) no-repeat 0px 0px;
width: 24px;
height: 24px;
text-indent: -9999px
}
#cboxPrevious {
left: 0px;
background-position: -50px -24px
}
#cboxPrevious.hover {
background-position: -50px 0px
}
#cboxNext {
left: 27px;
background-position: -74px -24px
}
#cboxNext.hover {
background-position: -74px 0px
}
#cboxClose {
right: 0;
background-position: -99px -24px
}
#cboxClose.hover {
background-position: -99px 0px
}
.cboxSlideshow_on #cboxSlideshow {
background-position: -124px 0px;
right: 26px
}
.cboxSlideshow_on #cboxSlideshow.hover {
background-position: -150px 0px
}
.cboxSlideshow_off #cboxSlideshow {
background-position: -149px -26px;
right: 26px
}
.cboxSlideshow_off #cboxSlideshow.hover {
background-position: -124px 0px
}
#mdfb {
font: 12px/1.2 Arial, Helvetica, san-serif;
color: #5c5757
}
#mdfb a, #mdfb a:hover, #mdfb a:visited {
text-decoration: none
}
.mdbox-title {
color: #333;
font-size: 21px !important;
font-weight: bold;
border-radius: 3px;
line-height: 24px;
font-family: arial !important
}
</style>
<div style=’display:none’>
<div id=’exestylepopups’ style=’padding:10px; background:#ffff;’>
<center>
<h3 class=”mdbox-title”>Receive updates via Facebook. Click the Like Button Below…</h3>
</center>
<center>
<iframe src=”//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fblugraphic&amp;width=299&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=257″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:299px; height:257px;” allowtransparency=”true”></iframe>
</center>
</div>
</div>

BY : http://advanceseooptimization.blogspot.com/2013/05/how-to-add-facebook-pop-up-like-box-to.html?view=mosaic#.VOl-XfmUeUI