Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5

Social Locker simple en HTML y JavaScript
#1

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>):
[social]
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>
[/social]

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>

Canal SEO en Telegram premium
Influenet - Compra/Venta de artículos patrocinados. Sonrisa
Responder
#2

Jajjaa doy fe que funciona perfecto en blogger
Responder
#3

Excelente, hace tiempo postee aquí en busca de este social locker, me lo llevo pa' blogger Guiño
¡Gracias!

-= Stay hungry, stay foolish =-
Responder
#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.
Responder
#5

(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.

Canal SEO en Telegram premium
Influenet - Compra/Venta de artículos patrocinados. Sonrisa
Responder
#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. Guiño

Trasteando con las webs, aupa foroblackhat! Interesante
Responder
#7

(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-posicio...-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.

Canal SEO en Telegram premium
Influenet - Compra/Venta de artículos patrocinados. Sonrisa
Responder
#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!

the_burguet, orgulloso de ser un miembro de Foro Black Hat SEO desde Dec 2014.
Responder
#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..

arena, orgulloso de ser un miembro de Foro Black Hat, a subirla hasta el cielo y más alláInteresante
Responder
#10

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>

Canal SEO en Telegram premium
Influenet - Compra/Venta de artículos patrocinados. Sonrisa
Responder


Posibles temas similares…
Tema / Autor Respuestas Vistas Último mensaje
Último mensaje por Curl
08-12-2016, 05:45 PM

Salto de foro:


Usuarios navegando en este tema: 1 invitado(s)
Telegram Grupo Telegram