Hoy vamos a compartir unos códigos para que coloques en tu Blogger de videos de Youtube, cuando un usuario desee ver el video, tenga que compartirlo primero en las redes sociales.
1.- Paso:
- 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.
2.- Paso:
- 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>
3.- Paso:
- Instalar la App 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>
- Una vez puesto los codigos, le damos clic " Guardar "
4.- Paso:- Ahora nos vamos a crear entrada, y colocamos el codigo en donde ustedes quieran y listo.
<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>
0 comentarios:
Publicar un comentario