Social Locker simple en HTML y JavaScript

Iniciado por Sauron · 16 jun 2014 · 20 respuestas · 47.307 visitas

1. SSauron16 jun 2014
   Si quieres bloquear un contenido para obligar al usuario a compartir tu web en las redes sociales como facebook, twitter o google plus, he hecho un ejemplo muy sencillo para realizar esta tarea y puedas usarla en cualquier web.
   
   Por un lado tienes el CSS (dentro de <head>):
   

   <style>
       #gatewaydiv
       {
           background-image:url("");
           background-repeat:no-repeat;
           width:500px;
           height:100px;
           padding:10px;
           position:absolute;
           display:none;
           background-color:#0e0f0f;
           border:solid 4px gray;
           text-align:center;
           font-family:arial;
           font-weight:bold;
           opacity:0.9;
           padding:50px;
                   
                   
       }
   
       #gatewaydiv h1
       {
           font-size:35px;
           color:#cc0000;
       }
   
       #gatewayMessage
       {
           font-size:18px;
       }
   
       #gatewayDimmer
       {
           background-color:#000000;
           opacity:0.9;
                   filter: alpha(opacity = 50);
           display:none;
           position:absolute;
           top:0;
       }
      
   </style>

   
   
   El código HTML y JS necesario (dentro de <body>):
   

   <div id='gatewayDimmer'>
   </div>
   <div id='gatewaydiv'>
   <div><a href="http://twitter.com/share" class="twitter-share-button" data-text="" data-url="" data-count="horizontal" data-lang="es">Tweet</a></div>
   <div><g:plusone size="medium" annotation="inline" callback="sociallocker_plusone" href=""></g:plusone></div>
   <div><fb:like id="fbLikeButton" href="" show_faces="false" width="450"></fb:like></div>
   <p><font color="#ffffff">Comparta para desbloquear el contenido.</font></p>
   <script src='http://code.jquery.com/jquery-1.7.2.min.js' type='text/javascript'></script>
   <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
   <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
   <script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>
   <script type="text/javascript">
   
   var Delay = 2;//Seconds after them clicking the link, the gateway vanishes. 
   var sociallocker_use = true;
   
   function setupgateway()
   {
       var Left = $(window).width() /2;
       Left = Left - $('#gatewaydiv').width()/2;
       
       var Top = $(window).height()/2;
       Top = Top - $('#gatewaydiv').height()/20;
       
       $('#gatewaydiv').css('top', Top+'px').css('left', Left+'px').css('display', 'inline');
       $('#gatewayDimmer').width($('html').width());
       $('#gatewayDimmer').height($('html').height());
       $('#gatewayDimmer').css('display','block');
   }
   
   function removegateway()
   {
       $('#gatewaydiv').css('display', 'none');
       $('#gatewayDimmer').css('display','none');
   }
   
   
   
   function sociallocker_plusone(plusone) {
       console.log("test");
       if (plusone.state == "on") {
           setTimeout('removegateway()', Delay*1000);
       }
   }
   FB.init();
   jQuery(document).ready(function () {
       setupgateway();
   
       FB.Event.subscribe("edge.create", function (href, widget) {
           setTimeout('removegateway()', Delay*1000);
       });
       twttr.ready(function (twttr) {
           twttr.events.bind("tweet", function (event) {
               setTimeout('removegateway()', Delay*1000);
           });
       });
   });
   </script>
   </div>

   
   
   Esto lo puedes utilizar en landing page, tu plantilla de blogger o allá donde quieras poner el HTML bloqueador de contenido.
   
   Bloquea el contenido que tengas escrito dentro de esta capa div:
   

   <div id='gatewayDimmer'>
   </div>

2. Ddeidei16 jun 2014#2
   Jajjaa doy fe que funciona perfecto en blogger
3. EEnsiferum16 jun 2014#3
   Excelente, hace tiempo postee aquí en busca de este social locker, me lo llevo pa' blogger ;)
   ¡Gracias!
4. Mmaestrodellaves17 jun 2014#4
   A mí en Blogger no me funciona, la verdad es que he copiado los dos códigos, pero en el que va dentro de <body> no sé dónde indicarle cual es el contenido que ha de bloquear.
5. SSauron17 jun 2014#5

   maestrodellaves escribió:A mí en Blogger no me funciona, la verdad es que he copiado los dos códigos, pero en el que va dentro de <body> no sé dónde indicarle cual es el contenido que ha de bloquear.

   
   
   Bloquea toda la página en general hasta que le den a compartir :).
   
   Si alguien lo tiene funcionando y quiere compartir la demo, estaría muy bien.
6. OOskar20x218 jun 2014#6
   Buen aporte @"Sauron", estoy convencido al 100% que de aquí a pocos años el movimiento social va a ser un factor clave en el posicionamiento, por encima casi de los blacklinks, al igual que la autoría de los perfiles de G+, a día de hoy ya se esta viendo "cierto" favoritismos a muchos artículos que cuentan con bastante actividad social, y casualmente, muchos de esos sitios implementan plugins como este, demasiada casualidad. ;)
7. SSauron27 jun 2014#7

   Oskar20x2 escribió:Buen aporte @"Sauron", estoy convencido al 100% que de aquí a pocos años el movimiento social va a ser un factor clave en el posicionamiento, por encima casi de los blacklinks, al igual que la autoría de los perfiles de G+, a día de hoy ya se esta viendo "cierto" favoritismos a muchos artículos que cuentan con bastante actividad social, y casualmente, muchos de esos sitios implementan plugins como este, demasiada casualidad. ;)

   
   
   Estoy totalmente de acuerdo, cada vez veo más experimentos de posicionar una web sólo usando las señales sociales y es interesante los resultados que se obtienen. Hoy he publicado un tutorial con 9 consejos para conseguir tener bien posicionada nuestra web sin necesidad de backlinks:
   http://foroblackhat.com/hilo-tut-posiciona-tu-sitio-web-sin-backlinks
   
   Sinceramente a día de hoy cuantos menos backlinks tengas pero que estos sean de mucha calidad te van a valer muchísimo más que tener cientos o miles de backlinks a tu MS pero que haya un poco de todo, esto terminará tu proyecto semi penalizado.
8. Tthe_burguet16 dic 2014#8
   Buenas!
   
   Lo primero dar las gracias por este código tan bueno, ya que llevo varios días buscandolo sin exito y esto es todo un avance, ya que es una petición de mi pareja y no encontraba nada más que cosas para WordPress.
   
   Tengo un par de dudas, la primera es.. ¿Dónde pongo mi contenido para que esto bloquee la página entera? Porque cuando pongo cualquier cosa aparece encima o debajo del compartir en redes sociales, y lo que pretendo es que bloquee algo.
   
   La otra duda es... Cuando he puesto el fieldset se me descuadra y me coge de ancho hasta el infinito, y no he conseguido controlarlo de ninguna forma, ¿Alguna idea?
   
   EDIT: Bueno al final he tomado otra vía, he conseguido lo que pedía el otro compañero de que cuando le dieras al tweet, me gusta o +1 en g+, saliera un enlace para compartir, lo he visto en esta web y probado en blogger y funciona sin problemas.http://exprimiblog.blogspot.com.es/2013/03/codigo-para-aceptar-pagos-sociales-por-descargas.html.
   
   Saludos y disculpen las molestias por reflotar!
9. Aarena17 dic 2014#9
   Hola @"Sauron" primero gracias por el aporte, y luego, puse el codigo html y js en body (en una entrada de blogger) y el css en head, pero no me bloquea esa entrada, sale en parte superior del contenido pero puede verse la parte inferior
   algun consejo..
10. SSauron18 dic 2014#10
    @"the_burguet" @"arena" acabo de actualizar para indicar que el contenido que se bloquea debe estar puesto en la capa:
    
    

    <div id='gatewayDimmer'>
    </div>

11. Llolezno18 dic 2014#11
    No se si lo has podido resolver ya @"maestrodellaves"
    En este artículo explico como instalar social locket en blogger
    
    El Social locket no puede aparecer en el home, porque sino se puede liar el código con cualquier otro social locket que haya también de otro artículo en el home..No se si me explico.
    Un saludo.
    
    
    
    
    

    maestrodellaves escribió:A mí en Blogger no me funciona, la verdad es que he copiado los dos códigos, pero en el que va dentro de <body> no sé dónde indicarle cual es el contenido que ha de bloquear.

12. Tthe_burguet18 dic 2014#12
    @Sauron Gracias!
13. SSir Andrew Perkins8 may 2015#13
    @"Sauron" se podría usar este mismo cofigo en un foro MyBB, lo acabo de intentar pero no rula, el que usas tu es el mismo ?
14. SSauron9 may 2015#14
    @"Sir Andrew Perkins" yo cree un plugin para MyBB :), pero me base en este código simple...
15. Lluismidelgado11 may 2015#15
    Muchas gracias por este código, me viene genial para un proyecto que estoy desarrollando.
    
    Un saludo y muchas gracias por todo.
16. Ttitonbolero11 may 2015#16
    como puedo ponerlo al lado los iconos de las redes sociales y no abajo como esta alli lo implante en mi blog pero quiero hacerle ese pequeño cambio
17. VVendeta308 ago 2015#17
    disculpa los botones de las redes sociales no aparecen podrias revisar
18. Nnediar10 oct 2015#18
    Hola, buenas tardes. El locker esta hecho muy bien, de verdad. Muchas gracias por compartirlo con nosotros. Solo quieria preguntar como lo puedo editar para responsive? Poruqe no me llevo muy bien con JavaScript y veo que aqui hay un codigo que se puede ajustar y optimizar.
    
    Gracias, un saludo!
    
    
    
    
    

    	function setupgateway()
    	{
        var Left = $(window).width() /2;
        Left = Left - $('#gatewaydiv').width()/2;
        
       var Top = $(window).height()/2;
        Top = Top - $('#gatewaydiv').height()/20;
        
      $('#gatewaydiv').css('top', Top+'px').css('left', Left+'px').css('display', 'inline');
        $('#gatewayDimmer').width($('100%').width());
        $('#gatewayDimmer').height($('100%').height());
        $('#gatewayDimmer').css('display','block');

19. Jjosem_ramirez11 dic 2015#19
    Muy util para otras paginas que no usan wordpress ! Gracias!
20. Ppatriarca7 mar 2016#20
    Se ha puesto de moda este tipo de cosas y la verdad es que a algunos les funciona muy bien para moverse en las redes sociales.
21. G[email protected]7 dic 2018#21

    Sauron escribió:Si quieres bloquear un contenido para obligar al usuario a compartir tu web en las redes sociales como facebook, twitter o google plus, he hecho un ejemplo muy sencillo para realizar esta tarea y puedas usarla en cualquier web.
    
    Por un lado tienes el CSS (dentro de <head>):
    

    <style>
        #gatewaydiv
        {
            background-image:url("");
            background-repeat:no-repeat;
            width:500px;
            height:100px;
            padding:10px;
            position:absolute;
            display:none;
            background-color:#0e0f0f;
            border:solid 4px gray;
            text-align:center;
            font-family:arial;
            font-weight:bold;
            opacity:0.9;
            padding:50px;
                    
                    
        }
    
        #gatewaydiv h1
        {
            font-size:35px;
            color:#cc0000;
        }
    
        #gatewayMessage
        {
            font-size:18px;
        }
    
        #gatewayDimmer
        {
            background-color:#000000;
            opacity:0.9;
                    filter: alpha(opacity = 50);
            display:none;
            position:absolute;
            top:0;
        }
       
    </style>

    
    
    El código HTML y JS necesario (dentro de <body>):
    
    
    Esto lo puedes utilizar en landing page, tu plantilla de blogger o allá donde quieras poner el HTML bloqueador de contenido.
    
    Bloquea el contenido que tengas escrito dentro de esta capa div:
    

    <div id='gatewayDimmer'>
    </div>

    
    
    Gracias por compartir, oye hermano, hasta ahora lo coloque y todo bien, bloquea el contenido, y aparece para compartir, clickear me gusta, twittear, pero a la hora de darle click en cualquier red social para compartir seguir etc, no da click a nada.
    
    Si me podrías ayudar. te lo agradeceré un mundo.

Este hilo pertenece al archivo del foro y ya no admite respuestas.