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.
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: Abrir el Blog
Paso 2: Ir a Plantilla
Paso 3: Ir a Editar HTML
Paso 4: 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 5: 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 6: 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 7: Cómo agregar Compartir para desbloquear contenido en Blogger:
Ahora, cada vez que queramos añadir el gadget de bloqueo a cualquier 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: "582294238483132"
},
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 582294238483132 por el vuestro.
Tambien todo lo que esta en ROJO se tiene que modificar por lo que uno desea poner.
Lo que esta en colo AZUL, es donde va el codigo, la imagen o lo que se desea ocultar.
