M
manudavril
Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Les dejo la DEMO para que se animen
Cómo colocar Social Locker en Blogger
Aunque blogger tiene algunas ventajas respecto a otros gestores de contenido (sencillez, rápido aprendizaje, etc). No está entre dichas ventajas la aplicación fácil de plugins que nos faciliten la vida.
En WordPress, colocar Social Locker, es fácil, tan solo debes instalar el plugin, activarlo y voilá… Listo para funcionar.
En Blogger deberás de introducir el código en tu artículo. Para ello deberás primeramente ir a tu plantilla e introducir el código siguiente (antes de cualquier cambio, Guarda tu plantilla actual).
Asegúrate que tienes jQuery library incluido en tu blog. Para ello en la plantilla pulsa (CTRL+F) y busca </head> Introduce el siguiente código antes de esta etiqueta.
HTML:
<script src='googledrive.com/host/0B2hRcAPsUBbBcG5rbWJOUWRnb0U/Sociallocker.js' type='text/javascript'/>Lo siguiente será instalar el siguiente código, también por encima de la etiqueta </head>
HTML:
<link href='https://googledrive.com/host/0B2hRcAPsUBbBcG5rbWJOUWRnb0U/Sociallocker.css' rel='stylesheet' type='text/css'/>Luego deberemos de colocar un código para que pueda realizar la acción social con Facebook.
Buscamos la etiqueta <body> o <body expr:class=’"loading" + data:blog.mobileClass’> colocamos el siguiente código:
HTML:
<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>Ya el siguiente paso lo realizamos en el artículo que queremos que se vea el Social Locker. En edición HTML del artículo tendremos que introducir el siguiente código:
HTML:
<article id="default-usage">
<div class="to-lock" style="display: none;">
<br />
"TEXTO OCULTO QUE SE VERÁ AL REALIZAR LA ACCIÓN SOCIAL"
<br />
<a href="COLOCA AQUÍT TU ENLACE SI ES UNA DESCARGA" target="_blank">NOMBRE DEL LINK</a>
</div>
</article>
<script src="https://googledrive.com/host/0B2hRcAPsUBbBcG5rbWJOUWRnb0U/Sociallocker2.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
text: {
header: "TEXTO QUE APARECE ARRIBA DEL SOCIAL LOCKER SIN DESBLOQUEAR",
message: "TEXTO QUE APARECE ABAJO DEL SOCIAL LOCKER SIN DESBLOQUEAR"
},
style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"] },
// twitter options
twitter: {
url: "COLOCA LA URL DE LA ENTRADA (ENLACE PERMANENTE)",
text: "TEXTO APARECERA EN TWITTER"
},
// facebook options
facebook: {
url: "COLOCA LA URL DE LA ENTRADA (ENLACE PERMANENTE)",
appId: "86************34"
},
google: {
url: "COLOCA LA URL DE LA ENTRADA (ENLACE PERMANENTE)"}});});;;;</script>Algunas Recomendaciones
Coloca Social Locker a la altura que más te convenga del artículo. No lo pongas ni al principio del todo ni al final.
Recuerda poner el ENLACE PERMANENTE, o sea, el enlace de la entrada o articulo del post.
Recuerda también poner LA API (appID) de facebook en su lugar correspondiente (esta API te la facilita Facebook).
Les dejo la DEMO para que se animen
PD: los archivos .css .js los pueden alojar en Google Drive, no recomiendo alojarlos en dropbox ya que al momento de cargarlo se demora y no nos conviene, la mejor opción es google drive 😉 para evitar que se pierdan y le dañen todo el estilo al social Locker.
