• Descarga el eBook gratuito SEO en Wordpress 2015 aquí

    • Pack con las mejores herramientas SEO en las VIP Tools apúntate!


     
    Calificación:
    • 0 votos - 0 Media
    • 1
    • 2
    • 3
    • 4
    • 5
    Social Locker simple en HTML y JavaScript

    Administrador


    *******
    Puntos de comerciante: 1 (100%)
    2,900


    Programador Promotor Blog 1000 Posts Asistente

    Crédito: 22.73 BHC
    Mensaje: #1
    Social Locker simple en HTML y JavaScript
    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>):
    Código:
    <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>):
    Comparte para ver el contenido!


    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:
    Código:
    <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>

    http://foroblackhat.com/hilo-abrir-un-nuevo-grupo-vip-tools-para-herramientas-seo-premium
    Para ver el enlace necesitas registrarte o acceder a tu cuenta
    - Canciones. Traducidas. Dedicadas. Sonrisa
    (Este mensaje fue modificado por última vez en: 18-12-2014 08:46 AM por Sauron.)
    16-06-2014 01:15 PM
    Buscar Citar
     Gracias recibidas por: mrr276 , Ensiferum , rogelio , balcerx , iMaka , arena , Cyrax

    BlackHat Cobre


    ***
    Puntos de comerciante: 0 (0%)
    187


    100 Posts

    Crédito: 4.54 BHC
    Mensaje: #2
    RE: Social Locker simple en HTML y JavaScript
    Jajjaa doy fe que funciona perfecto en blogger

    Para ver el enlace necesitas registrarte o acceder a tu cuenta
    16-06-2014 01:16 PM
    Buscar Citar
     Gracias recibidas por: maestrodellaves

    BlackHat Cobre


    ***
    Puntos de comerciante: 0 (0%)
    90

    3

    Promotor Twitter

    Crédito: 1.02 BHC
    Mensaje: #3
    RE: Social Locker simple en HTML y JavaScript
    Excelente, hace tiempo postee aquí en busca de este social locker, me lo llevo pa' blogger Guiño
    ¡Gracias!

    -= Stay hungry, stay foolish =-
    16-06-2014 09:58 PM
    Buscar Citar

    BlackHat Cobre


    ***
    Puntos de comerciante: 1 (100%)
    213


    100 Posts Asistente

    Crédito: 0.65 BHC
    Mensaje: #4
    RE: Social Locker simple en HTML y JavaScript
    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.

    Para ver el enlace necesitas registrarte o acceder a tu cuenta
    17-06-2014 09:38 AM
    Buscar Citar

    Administrador


    *******
    Puntos de comerciante: 1 (100%)
    2,900


    Programador Promotor Blog 1000 Posts Asistente

    Crédito: 22.73 BHC
    Mensaje: #5
    RE: Social Locker simple en HTML y JavaScript
    (17-06-2014 09:38 AM)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 Sonrisa.

    Si alguien lo tiene funcionando y quiere compartir la demo, estaría muy bien.

    http://foroblackhat.com/hilo-abrir-un-nuevo-grupo-vip-tools-para-herramientas-seo-premium
    Para ver el enlace necesitas registrarte o acceder a tu cuenta
    - Canciones. Traducidas. Dedicadas. Sonrisa
    17-06-2014 09:49 AM
    Buscar Citar
     Gracias recibidas por: maestrodellaves

    BlackHat Bronce


    **
    Puntos de comerciante: 0 (0%)
    49

    3

    Asistente

    Crédito: 0.66 BHC
    Mensaje: #6
    RE: Social Locker simple en HTML y JavaScript
    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. Guiño

    Trasteando con las webs, aupa foroblackhat! Interesante
    18-06-2014 12:51 PM
    Buscar Citar

    Administrador


    *******
    Puntos de comerciante: 1 (100%)
    2,900


    Programador Promotor Blog 1000 Posts Asistente

    Crédito: 22.73 BHC
    Mensaje: #7
    RE: Social Locker simple en HTML y JavaScript
    (18-06-2014 12:51 PM)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. Guiño

    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.

    http://foroblackhat.com/hilo-abrir-un-nuevo-grupo-vip-tools-para-herramientas-seo-premium
    Para ver el enlace necesitas registrarte o acceder a tu cuenta
    - Canciones. Traducidas. Dedicadas. Sonrisa
    27-06-2014 03:12 PM
    Buscar Citar

    BlackHat Bronce


    **
    Puntos de comerciante: 0 (0%)
    2

    0


    Crédito: 0.02 BHC
    Mensaje: #8
    RE: Social Locker simple en HTML y JavaScript
    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!

    the_burguet, orgulloso de ser un miembro de Foro Black Hat SEO desde Dec 2014.
    (Este mensaje fue modificado por última vez en: 16-12-2014 06:12 PM por the_burguet.)
    16-12-2014 12:18 PM
    Buscar Citar

    BlackHat Bronce


    **
    Puntos de comerciante: 0 (0%)
    27

    2


    Crédito: 0.78 BHC
    Mensaje: #9
    RE: Social Locker simple en HTML y JavaScript
    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..

    arena, orgulloso de ser un miembro de Foro Black Hat, a subirla hasta el cielo y más alláInteresante
    17-12-2014 12:46 PM
    Buscar Citar

    Administrador


    *******
    Puntos de comerciante: 1 (100%)
    2,900


    Programador Promotor Blog 1000 Posts Asistente

    Crédito: 22.73 BHC
    Mensaje: #10
    RE: Social Locker simple en HTML y JavaScript
    @the_burguet @arena acabo de actualizar para indicar que el contenido que se bloquea debe estar puesto en la capa:

    Código:
    <div id='gatewayDimmer'>
    </div>

    http://foroblackhat.com/hilo-abrir-un-nuevo-grupo-vip-tools-para-herramientas-seo-premium
    Para ver el enlace necesitas registrarte o acceder a tu cuenta
    - Canciones. Traducidas. Dedicadas. Sonrisa
    18-12-2014 08:47 AM
    Buscar Citar


    Posibles temas similares...
    Tema: Autor Respuestas: Vistas: Último mensaje
      Poner Ñ en código html Curl 0 62 Ayer 05:45 PM
    Último mensaje: Curl
      Como ofuscar a tope un código JavaScript gratis Sauron 4 536 13-10-2016 02:20 AM
    Último mensaje: iamcholo
      Desofuscar código JavaScript Sauron 7 3,114 12-10-2016 05:44 AM
    Último mensaje: TheoXT
      Como hacer vibrar un móvil usando Javascript HTML5 Sauron 1 1,211 06-03-2016 11:47 AM
    Último mensaje: javinoyo
      Fundamentos de javascript Alex kriminal 0 712 02-01-2015 08:23 PM
    Último mensaje: Alex kriminal
      API GeoIP para JavaScript y PHP Sauron 0 987 02-09-2014 04:23 PM
    Último mensaje: Sauron
      Como sacar un parámeto GET de una url con JavaScript Sauron 1 925 21-04-2014 03:16 AM
    Último mensaje: deulo

    Salto de foro:


    Usuario(s) navegando en este tema: 1 invitado(s)
    Anuncios FBH (+ info)

    Foro Black Hat

    ForoBlackHat es un foro público con ánimo de desarrollo de aplicaciones y estrategias SEO para la comunidad hispano hablante cuyo objetivo sea el de aprender técnicas de posicionamiento.

    Nuestra comunidad cuenta con un equipo de programadores que desarrollan día a día nuevas herramientas gratuitas para los usuarios. ¡Siéntete libre de registrarte y comentar por los hilos!