02 noviembre 2014

Compartir video en Facebook para visualizar

compartir video en facebook para ver

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;
}
iframe.ytb-embed {
max-width: 100% !important;
display: block;
}
</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 == &quot;item&quot;'>
<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

22 comentarios

muchas gracias como siempre de gran ayuda ;)

Buen articulo .. pero valdria con las ventanas modales?

David no lo he probado pero pienso que no.

Gracias antonio es bueno saberlo .eh mejorado el blog de las horas que lllevo dedicado en el . Y el tiempo que perdiste conmigo para mejoralo, teng una deuda contigo. . Enorabuena por las mejoras de esta plantilla
Un saludo amigo

Salio bien el truco, pero al compartirlo en facebook sale solo la url sin ninguna imagen, se puede solucionar eso? Gracias

Como hago para que la portada del video me salga al compartilo en vez de mi imagen de blogger.

Norlan déjame url donde lo tienes colocado y observo donde se puede producir el fallo.

ya lo estoy solucinando echale un ojo a esta entrada.
http://megapeliculasdvdrip.blogspot.com/2014/11/noah-noe-dvdrip-latino-700-mb-mega.html

disculpa aun sirve este truco?? lo que pasa es que me sale un error al querer compartir el enlace, y eh revisado tu DEMO y me sale el mismo error es falla mia y de algun codigo?? mira aqui el post http://adictos-alared.blogspot.mx/2015/01/descarga-kmspico-v89-activador-de.html

disculpa aun sirve este truco?? lo que pasa es que me sale un error al querer compartir el enlace, y eh revisado tu DEMO y me sale el mismo error es falla mia y de algun codigo?? mira aqui el post http://adictos-alared.blogspot.mx/2015/01/descarga-kmspico-v89-activador-de.html

Adictos no encuentro errores en ninguno de los lados, te dejo captura pantalla del compartir en tu blog......aquí

Este comentario ha sido eliminado por el autor.

Hey, eh puesto todo bien, pero despues de todo el video no aparece en el blog, que puede ser?

Si no lo veo instalado no se que comentarte.

Además te infomo que Blogger va a eliminar todos los blog con contenido sexual.
Mira esta ENTRADA

como hago para que sea responsive... asi como el video de youtube se achica con la plantilla, este script como haría q se achique con la plantilla? intente poniendo porcentajes pero nada no da.

Este comentario ha sido eliminado por el autor.

Bueno ya lo solucione, solo agregan este codigo:

iframe.ytb-embed {
max-width: 100% !important;
display: block;
}


y en el script la class, tbm lo agregan a sus demas videos de youtube la class y ya seran responsives.


El ejemplo pueden verlo aquí: http://www.dbmosjugar.com/2014/08/entrar-eventos-de-gms.html

Esta chevere tu web, haber que cosillas me sirven. :D

Gracias Brahayan por el aporte.

Sabes el codigo para compartir, pero que no sean videos de youtube, sino de otra pagina?

Hola Amigo. Excelente tu Blog. Tengo un problema al implementar el código. Después compartido el vídeo permanece la pantalla de bloqueo. Me podrías ayudar? http://www.bajardepesodeformaefectiva.tk/2016/03/dieta-para-conseguir-unos-gluteos.html


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"