YouTube LOCK nos permitirá hacer que los lectores que visiten nuestro blog tenga que compartir el vídeo para poder verlo, esto es un truco viral para aumentar nuestro alcance en las redes sociales y actualmente es muy usado por paginas de contenido variado (memes, imágenes, vídeo, gifs, etc)
Primero vamos a nuestro editor de plantillas en modo HTML (ver imagen guia)
y buscamos la etiqueta </head> y antes de esta pegamos todo este codigo:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>Si tu plantilla ya tiene JQuery entonces ya no pongas la linea en rojo del código anterior.
<style>
#youtubeblocker {
position:relative;
margin:0px auto;
cursor:;
overflow: hidden;
border:0px solid #000;
width:640px;
height:360px;
}
#youtubeblocker iframe {
display:;
}
#youtubeblocker #image {
width:100%;
height:100%;
background-size:100% 100%;
}
#youtubeblocker #play {
position:absolute;
top:0;
left:0;
display:block;
width:640px;
height:360px;
background: url(https://dl.dropboxusercontent.com/u/84010639/LockYouTube%20Blogger/play.png);
border:0px solid #000;
z-index:1;
}
#youtubeblocker #play-button {
position:absolute;
cursor:pointer;
top:0;
left:0;
display:block;
width:640px;
height:360px;
}
#youtubeblocker #play-button:hover {
position:absolute;
cursor:pointer;
top:0;
left:0;
display:block;
width:640px;
height:360px;
background: url(https://dl.dropboxusercontent.com/u/84010639/LockYouTube%20Blogger/play-2.png);
}
#youtubeblocker #sharebox {
display:none;
cursor:pointer;
position:absolute;
top:0;
left:0;
width:640px;
height:360px;
background: url(https://dl.dropboxusercontent.com/u/84010639/LockYouTube%20Blogger/sharebut.png);
border:0px solid #000;
z-index:2;
}
</style>
Ahora buscamos la etiqueta <body> y pegamos este código:
<div id='fb-root'/>
<script>
//<![CDATA[
(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&appId=1439152689637274";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == "item"'>
<script>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId: '1439152689637274',
status: true,
xfbml: true
});
// Additional initialization code such as adding Event Listeners goes here
};
function youtubeblocker() {
FB.ui( {
method: '../sharer/sharer.php?u=' +document.URL+ '',
link : document.URL,
},
function(response) {
if (response) {
$("#image, #play, #play-button, #sharebox").fadeOut('slow');
} else {
//alert('');
}
}
);
};
function sharebox(){
$("#sharebox").show();
}
function youtube (IDyoutube) {
var output1 = '<div id="youtubeblocker"><div id="image" style="background-image: url(http://img.youtube.com/vi/' + IDyoutube + '/0.jpg)"><div id="play"><div id="play-button" onclick="sharebox();"></div></div><div id="sharebox" onclick="youtubeblocker();"></div></div><iframe width="640" height="360" src="http://www.youtube.com/embed/'+IDyoutube+'?autoplay=0" frameborder="0" allowfullscreen></iframe></div>';
document.write (output1);
}
//]]>
</script>
Ahora para publicar nuestros videos bloqueado, vamos a crear nuestra nueva entrada y entramos en edicion HTML y pegamos lo siguiente:
<script>youtube("AQUI-ID-DEL-VIDEO");</script>
y solo remplazamos lo que esta en rojo el id del video.
¿Como saber el id del Video?
No hay comentarios:
Publicar un comentario