√ Compartir para desbloquear contenido

Compartir para desbloquear contenido, hay veces que en algunas web o blog nos encontramos palabras como estas. Esto significa que el código, enlace, imagen o cualquier contenido permanece oculto y solo aparecerá después de compartir en cualquiera de las Redes Sociales, (Twitter,Facebook o Google+).

Este truco es muy útil para fortalecer nuestra posición porque al compartir en las redes sociales aumenta nuestra Optimización SEO. Todos sabemos lo difícil que resulta conseguir que los lectores compartan nuestros artículos en las diferentes redes sociales, sin embargo con este pequeño gadget los forzaremos un poco a compartir para obtener acceso al contenido.

Los botones sociales consisten en Facebook, Twitter y Google plus. Cada vez, que una persona comparta en Tweeter, Facebook o +1 en Google+, se mostrará el contenido oculto.

VER DEMO

Cómo instalar Compartir para desbloquear contenido en Blogger?

Los pasos son muy sencillos, todo lo que tenemos que hacer es copiar y pegar el código. Sólo tienes que seguir las siguientes instrucciones.

Paso 1: Instalar el jQuery
Para mostrar y ocultar el contenido, se necesita jQuery. Por lo tanto, incluya el código por encima de </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Si ya lo tienes instalado en tu plantilla, pasa al siguiente paso.

Paso 2: Instalar el CSS
Buscar </head> justo y por encima de ella pega el siguiente código CSS.

<link href="https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/compartir.css" rel="stylesheet" type="text/css"></link>

Paso 3: Instalar la Api de Facebook:
Buscamos <body> o <body expr:class='"loading" + data:blog.mobileClass'> y justamente debajo colocamos lo siguiente:

<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Si ya lo tienes instalado en tu plantilla, pasa al siguiente paso.

Paso 4: Cómo agregar Compartir para desbloquear contenido en Blogger:

Ahora, cada vez que queramos añadir el gadget de bloqueo a cualqier artículo seguiremos las siguientes instrucciones:

Ir a Blogger >> Nueva Entrada.
Seleccione "HTML" en el editor de entradas y pegue el siguiente código:

<article id="default-usage">
<div class="to-lock" style="display: none;">

Código,imagen o link a ocultar

</article>
</div>
<script type="text/javascript" src="https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/LOCKE.js"></script>
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({

text: {
header: "Comparte para desbloquear",
message: "Si quieres ver el contenido, comparte en cualquiera de las Redes"
},

style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"] },
// twitter options
twitter: {
url: "URL DE LA ENTRADA",
text: "Título de la entrada!"
},
// facebook options
facebook: {
url: "URL DE LA ENTRADA",
appId: "588590114535104"
},
google: {
url: "URL DE LA ENTRADA"}});});;;;</script>

Recuerde: No se olvide de agregar su Facebook App ID de lo contrario el botón de Facebook no aparecerá correctamente. es decir reemplazar 588590114535104 por el vuestro.

Extraido de Mybloggerlab