Tutorial: Pop-up caja de me gusta facebook para blogger

wodoxviral Seguir

Beta
Verificación en dos pasos desactivada
Desde
18 Ago 2015
Mensajes
55
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Dibujo.JPG

Una buena idea para mantenernos en contacto con nuestros lectores es mediante las redes sociales, con facebook podemos crear páginas de fans de nuestro sitio web y compartir constantemente nuestras entradas. Una buena forma de asegurarnos de que los que visitan nuestro blog hagan clic en "me gusta" es con un pop-up que se abra cuando visitan nuestro blog.

Para agregar este pop-up a nuestro blog lo que haremos será ir al panel de administración de blogger y entramos en diseño.


dise%u0025C3%u0025B1o+blogger.png

Una vez allí hacemos click en añadir un gadget

a%u002525C3%u002525B1adir+gadget.png

Agregaremos un gadget del tipo HTML/Javascript

gadget+html+javascript.png

Nos abrirá una nueva ventana en la que pegaremos el siguiente código


HTML:
<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(20000).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>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=https://www.facebook.com/wodoxviral&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></center>
</div>
</div>

Copiamos y pegamos el código anterior como se muestra en esta imagen. Además buscamos la línea que contiene el enlace https://www.facebook.com/wodoxviral y la cambiamos por el enlace de nuestra página de facebook. Finalmente hacemos click en guardar.

config+html+javascript.png

Es importante resaltar que este pop-up solo se mostrará una vez a cada visitante, a menos que este borre las cookies. El pop-up se mostrará luego de 20 segundos, sí queremos aumentar o disminuir este tiempo buscamos la línea $('#fanback').delay(20000).fadeIn('medium'); y editamos el delay que es el tiempo en milisegundos que tarda en mostrarse el pop-up. Es decir, sí son 20000 milisegundos correspondería a 20 segundos. Y sí queremos que se muestre en 10 segundos entonces cambiaríamos 20000 por 10000.

Espero esos "Me agrada"
 

Adjuntos

  • like box facebook me gusta caja.png
    like box facebook me gusta caja.png
    131,1 KB · Visitas: 315

promo

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
2 Feb 2015
Mensajes
76
Me lo guardo :thumbup:
 

Carlos Arreola

Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
¡Excelente comerciante!
Suscripción a IA
Desde
6 Abr 2009
Mensajes
11.468
Muchas gracias por el aporte :)
 

buitre

Gamma
Verificación en dos pasos desactivada
Desde
3 May 2015
Mensajes
280
Ya tienes mi me agrada , pero una pregunta , te permite blogger o AdSense que compartan ,no te pueden cerrar el blog omla cuenta ? Gracias por el tuto:eek:
 

wodoxviral

Beta
Verificación en dos pasos desactivada
Desde
18 Ago 2015
Mensajes
55
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.

idumaya

Eta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
7 Ene 2013
Mensajes
1.293
Gracias sirve mucho para hacerse con algunos me gusta
 

josedaba

Beta
Verificación en dos pasos desactivada
Desde
26 May 2015
Mensajes
142
Una pregunta, cómo puedo yo colocar en páginas donde tiene su propio jquery, el problema es que las plantillas que utilizo entran en conflicto con su jquery de este script.
 

Serjal

Gamma
Social Media
Verificación en dos pasos desactivada
Desde
9 Dic 2016
Mensajes
151
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
muy util, lo usare seguro para un proyecto que tengo en marcha. ando en periodo de aprendizaje
 

Ricardo Smeja

Alfa
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
21 May 2020
Mensajes
28
Excelente y útil tutorial.
 

Pijatojo

Alfa
Verificación en dos pasos desactivada
Verificado por Whatsapp
Usuario nuevo
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
28 May 2021
Mensajes
17
Buen tutorial amigo.
 

Kyouya TL

Beta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
30 Ene 2019
Mensajes
89
Gracias amigo un aporte estupendo.
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba