Caja Pop Up "me gusta" de Facebook para Blogger Caja Pop Up "me gusta" de Facebook para Blogger
Caja Pop Up "me gusta" de Facebook para Blogger
Página 1 de 11 123 ... ÚltimoÚltimo
Mostrando resultados del 1 al 10 de 102
  1. #1
    Registro
    14-agosto-2011
    Ubicación
    Colombia
    Edad
    30
    Mensajes
    1.461
    Caja Pop Up "me gusta" de Facebook para Blogger
    Hola a todos,

    Primero aclaro que esto no es algo inventado hecho por mí, fue donado por uno de mis colaboradores a mi pagina y como resulto súper sencillo hacerlo ademas que siempre he querido tener el Pop Up de Me gusta para Facebook me pareció genial compartirlo con ustedes, siempre busque el Pop up para facebook pero todos los métodos que existían eran en PHP y como Blogger no permite esto pues malo... ahora resulta que si se puede hacer con JQuery.

    Este lo agrego como tutorial porque sé que es muy solicitado por los propietarios de blogs en blogger.


    Caja Pop Up "me gusta" de facebook para blogger


    Invitados no pueden ver imágenes en los mensajes. Por favor regístrate en el foro.
    PAGINA PRUEBA



    Pasos para agregarlo:

    Vamos a: Diseño / Elementos de la página / HTML/Javascript:


    Código HTML:
    <style>
    
    /*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
    */
    #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;}
    /*
    
    
    User Style:
    Change the following styles to modify the appearance of ColorBox. They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
    */
    #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(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOC...600/border.png) repeat-x top left;}
    #cboxTopRight{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOC...600/border.png) repeat-x bottom left;}
    #cboxBottomRight{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) repeat-y -211px 0;}
    #cboxContent{background:#fff; overflow:visible;}
    #cboxLoadedContent{margin-bottom:5px;}
    #cboxLoadingOverlay{background:url(http://1.bp.blogspot.com/-PPvu-446sn...background.png) no-repeat center center;}
    #cboxLoadingGraphic{background:url(http://1.bp.blogspot.com/-31strss_1-...00/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(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/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;}
    /*-----------------------------------------------------------------------------------*/
    /* Facebook Likebox popup For Blogger
    /*-----------------------------------------------------------------------------------*/
    #subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
    }
    #subscribe a,
    #subscribe a:hover,
    #subscribe a:visited {
    text-decoration:none;
    }
    .box-title {
    color: #3B5998;
    font-size: 20px !important;
    font-weight: bold;
    margin: 10px 0;
    border:1px solid #ddd;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding:10px;
    line-height:25px; font-family:arial !important;
    }
    .box-tagline {
    color: #999;
    margin: 0;
    text-align: center;
    }
    #subs-container {
    padding: 35px 0 30px 0;
    position: relative;
    }
    a:link, a:visited {
    border:none;
    }
    .demo {
    display:none;
    }
    </style>
    
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
    <script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    if (document.cookie.indexOf('visited=true') == -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:"#subscribe"});
    }
    });
    </script>
    <!-- This contains the hidden content for inline calls -->
    
    <div style='display:none'>
    <div id='subscribe' style='padding:10px; background:#fff;'>
    <h3 class="box-title">Mantente en contacto con nosotros a través de Facebook. Sólo presiona el botón Me gusta <center><p style="line-height:3px;" ></p></center></h3> 
    <center>
    
    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FEstatriste%2F186903574749125%3F&amp;width=300&amp;colorscheme=light&amp;show_face s=true&amp;border_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>
    </div>
    </div>
    DEBEN CAMBIAR http%3A%2F%2Fwww.facebook.com%2Fpages%2FEstatriste %2F186903574749125%3F por el link de su FANS PAGE


    Bueno espero que les sea de utilidad. cualquier cosa no duden en comentar y con mucho gusto los ayudo.

    Saludos
    Última edición por JuanDRomero; 27-ago-2012 a las 17:24

  2. #2
    Buen trabajo, una duda, esta caja sigue saliendo en sus próximas visitas al usuario o solo una vez? Saludos.
    Citar Citar  

  3. #3
    Registro
    14-agosto-2011
    Ubicación
    Colombia
    Edad
    30
    Mensajes
    1.461
    Cita Iniciado por HuGo Ver Mensaje
    Buen trabajo, una duda, esta caja sigue saliendo en sus próximas visitas al usuario o solo una vez? Saludos.
    Buena pregunta. a mi me sale solo la primera vez... para darme cuenta si funcionaba abría el navegador de manera Anonima (si usas chrome es control+shit+N) y asi supe que estaba activo.
    Citar Citar  

  4. #4
    Ya revise el código y trabaja con cookies, casi al final se puede modificar la duración de esta, saludos.
    Citar Citar  

  5. #5
    Registro
    06-abril-2009
    Ubicación
    Mexicali, Mexico
    Edad
    32
    Mensajes
    13.290
    Agregado al listado de tutoriales de blogger.
    Citar Citar  

  6. #6
    funciona en wordpress? se puede poner? donde e
    se pondria y como saludos?
    Citar Citar  

  7. #7
    Registro
    14-agosto-2011
    Ubicación
    Colombia
    Edad
    30
    Mensajes
    1.461
    Cita Iniciado por tzogroup Ver Mensaje
    funciona en wordpress? se puede poner? donde e
    se pondria y como saludos?
    Con Wordpress es como si agregaras un elemento, pero acá en forobeta hay un tutorial que te servirá

    http://forobeta.com/tutoriales/81201...per-popup.html
    Citar Citar  

  8. es algo muy molesto eso.
    Citar Citar  

  9. #9
    Registro
    14-agosto-2011
    Ubicación
    Colombia
    Edad
    30
    Mensajes
    1.461
    Cita Iniciado por frN13 Ver Mensaje
    es algo muy molesto eso.
    Quizás a algunos les parezca molesto si visitan muchas paginas con ese script, lo bueno es que solo aparece una vez ya que trabaja con cookies para que el usuario cuando vuelva a visitar la pagina no le salga. el resto todo normal.

    Yo lo recomiendo como un método muy bueno para aumentar los seguidores en una fans page, sobre las visitas te puedo comentar que no disminuyen por esto. Ganas seguidores reales.
    Citar Citar  

  10. #10
    Registro
    12-septiembre-2011
    Ubicación
    México.
    Mensajes
    4.621
    Gracias lo probrare 2 dias aver si resulta.....
    Citar Citar  

Página 1 de 11 123 ... ÚltimoÚltimo

Temas similares

  1. Ayuda no aparece la caja de comentarios y el boton me gusta de facebook
    holas amigos no puedo ver la caja de comentarios de facebook ni los botones me gusta de facebok ayuda..! alguien sabe porque pasa eso ? demo: ver...
    Respuestas: 1
    Último mensaje: 09-dic-2015
  2. Tutorial: Caja Pop Up "Me Gusta" de Facebook para blogger (funcionando)
    Saludos a todos, he modificado el código para ayudaros con la caja, que en un tutorial anterior de:...
    Respuestas: 21
    Último mensaje: 12-ene-2015
  3. !Caja de Comentarios Facebook Arriba de los de Blogger!
    Esto fueron los paso que una vez seguir, hace ya bastantes meses. Agregar la caja de comentarios de Facebook en Blogger | Ciudad Blogger - Trucos...
    Respuestas: 0
    Último mensaje: 18-sep-2013
  4. Caja de me gusta y compartir para blogger
    Buenas Alguno sabe cuál es el código de esta caja super útil la estoy necesitando urgente. Agradecería mucho si me compatieran. 12977 ...
    Respuestas: 2
    Último mensaje: 27-mar-2013
  5. Problema con la Caja de comentarios de Facebook en Blogger
    saludos a toda la comunidad de Foro beta, En esta ocasion, escribo para ver si alguno de ustedes pueda ayudarme, el problema consiste en que yo...
    Respuestas: 9
    Último mensaje: 24-oct-2012

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •