De nuevo regreso con otro tutorial a petición de Luis Andrés Reyes, basicamente lo qué hace este plugin es que al publicar un video de youtube el usuario qué lo quiera visualizar, debe compartirlo antes en Facebook y de esta forma comenzar a viralizar y generar muchas visitas al blog. Ideal para generar altas ganancias con publicidades si se utiliza de forma correcta.
Es muy fácil de implementar en cualquier blog, tan solo debes seguir los siguientes pasos:
Colocando el CSS
Entra en Diseño | Edición de HTML y antes de </head> pega lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<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://lh4.googleusercontent.com/-P1Pjl2ki-EA/VFRXU6tg6CI/AAAAAAAAAs4/ReYCZQ6yymg/s620/01.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://lh4.googleusercontent.com/-UUbakY9zfyM/VFRXVALTT2I/AAAAAAAAAtA/cDnmd5v6xnA/s620/02.png);
}
#youtubeblocker #sharebox {
display:none;
cursor:pointer;
position:absolute;
top:0;
left:0;
width:640px;
height:360px;
background: url(https://lh4.googleusercontent.com/-ueJdVKrljTs/VFRap9VkxKI/AAAAAAAAAtU/5PknlzYVSko/s620/01.png);
border:0px solid #000;
z-index:2;
}
</style>
Colocando el script
Ahora después de <body> pega este script:
<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=";
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: '',
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>
</b:if>
Colocando el video en la entrada
Creamos una nueva entrada y donde queremos mostrar el video colocamos lo siguiente:
<script>youtube("id de youtube");</script>
Modificación
ID de Youtube:
VER DEMO
Este tutorial está extraido de CODE-Bloggers
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure