S
SnakeNet
Xi
Programador
En este tutorial crearemos la caja para likebox que está buscando un compañero en este post, se puede adaptar también sirve para page plugin que es como actualmente se llama el plugin de facebook lo único que debemos hacer es lo siguiente.
1. Debemos copiar y pegar este código antes de </head>
2. Copiar y pegar el estilo en la hoja de estilo o de lo contrario pegar todo el código incluyendo <style> </style>
3. último paso pegar este código después de <body>
*DEBEN EDITAR la url del src' ' por la vuestra. Sirve para cualquier cosa no solo para la fanpage.
Y listo eso seria todo, ahí tendríamos lo que estaba buscando nuestro compañero yoshi2 . Lo hice ya que me acuerdo que antes se veía más a menudo pero ahora ya no es tan común y con esta forma tan básica y no tan molesta.
Aquí la demostración.
Haz click para ver la demostración.
1. Debemos copiar y pegar este código antes de </head>
Insertar CODE, HTML o PHP:
<script type='text/javascript' src='cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function($){
load_fblb();
$('#fb_box_close, body').click( function() { unload_fblb(); });
function unload_fblb() { $('#fb_box, .fb_overlay').fadeOut("slow"); }
function load_fblb() { $('#fb_box, .fb_overlay').fadeIn("slow"); }
});
</script>2. Copiar y pegar el estilo en la hoja de estilo o de lo contrario pegar todo el código incluyendo <style> </style>
Insertar CODE, HTML o PHP:
<style>
.fb_overlay {
z-index:99999;
width: 100%;
height: 100%;
background: #000;
opacity:0.5;
position: fixed;
top: 0%;
left: 0%;
}
#fb_box {
z-index:999999;
position:fixed;
top: 50%;
left: 40%;
margin-top: -145px; /*Half of your settings height*/
}
#fb_box iframe {
display: block;
margin: 0;
padding: 0;
}
#fb_box.dark {
background:#000;
border:1px solid #aaaaaa;
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
box-shadow: 0 0 5px #fff;
}
#fb_box.light {
background:#fff;
border:1px solid #aaaaaa;
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
#fb_box_close {
right:0px;
top:0px;
position:absolute;
cursor: pointer;
}
</style>3. último paso pegar este código después de <body>
Insertar CODE, HTML o PHP:
<div class="fb_overlay"></div>
<div id="fb_box" class="light">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F/porlasaludoficial&width=220&height=220&colorscheme=light&show_faces=false&header=false&stream=false&show_border=false&appId=" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:220px; height:220px;" allowtransparency="true"></iframe>
<a id="fb_box_close">
<img src="http://dataofday.com/wp-content/plugins/facebook-like-box-pop-up/images/close.png" alt="Close" class="tie-appear">
</a>
<p style="font-size:13px;">Tutorial creado por Snakenet - Forobeta</p>
</div>*DEBEN EDITAR la url del src' ' por la vuestra. Sirve para cualquier cosa no solo para la fanpage.
Y listo eso seria todo, ahí tendríamos lo que estaba buscando nuestro compañero yoshi2 . Lo hice ya que me acuerdo que antes se veía más a menudo pero ahora ya no es tan común y con esta forma tan básica y no tan molesta.
Aquí la demostración.
Haz click para ver la demostración.