kanikase
Préstamo
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
- Desde
- 22 Feb 2014
- Mensajes
- 4.720
Buenas betas 
Hace unos días publicaron aquí mismo en el foro un blog con un script vira, lo que hacía es que en los videos de YouTube, se empezaban a reproducir, pero luego de 15 segundos el vídeos se pausaba, y para segurlo viendo, el usuario tenía que compartir la entrada, y pues de eso se tratará este tutorial.
Funciona en cualquier plataforma, ya sea Blogger, Wordpress o script propio, solo se necesita poder editar un poco el código.
Para que funcione el script tenemos que crear una aplicación de Facebook, así que la creamos :topsy_turvy:
Nos vamos a https://developers.facebook.com/apps ahí damos click a Add a new app
En el modal que se les va abrir les aparecerán 4 opciones (iOS, Android, Facebook Canvas y Website), seleccionan Website.
En lo siguiente que les aparecerá, solo le dan click a Skip and Create App ID.
Ahora se les abrirá otro modal, donde solo tendrán que poner el nombre de la aplicación, el "Namespace", y la categoría, le pueden poner cualquier cosa:
Y crean la aplicación, click en Create App ID.
De la aplicación lo único que necesitamos es el App ID, así que lo copiamos y lo guardamos.
Ahora, ahí mismo nos vamos a Settings, en App Domains ponemos el dominio donde usaremos el script y dan click en Add plataform, y seleccionan Website, en Site URL ponen el mismo dominio. Y así guardan los cambios.
Y eso es todo lo que haremos con Facebook y la aplicación, si ya hicieron todo bien, ahora toca hacer el script, se hace con un poco de JavaScript, y se usa la API de YouTube y Facebook, todo lo pondremos en el mismo js.
Crean un nuevo archivo con la extensión .js, en él pegan:
Y así lo guardan, no editen nada.
Lo suben a donde quieran, puede ser a su mismo hosting o en algún otro como por ejemplo Dropbox.
Y por último, donde quieran que aparezca el vídeo, por ejemplo en una entrada, ponen el siguiente código:
Solo ponen configuran lo que les pide, que es el ID del video, el ancho (width), el alto (height), los segundos para mostrar la imagen de compartir, el ID de la aplicación.
Y opcional, pueden cambiar la imagen que aparecerá de compartir, no hace falta hacer ningún cambio, la imagen se ajustará automáticamente.
Si hicieron todo bien, ya lo tendrán funcionando.
DEMO
Hace unos días publicaron aquí mismo en el foro un blog con un script vira, lo que hacía es que en los videos de YouTube, se empezaban a reproducir, pero luego de 15 segundos el vídeos se pausaba, y para segurlo viendo, el usuario tenía que compartir la entrada, y pues de eso se tratará este tutorial.
Funciona en cualquier plataforma, ya sea Blogger, Wordpress o script propio, solo se necesita poder editar un poco el código.
Para que funcione el script tenemos que crear una aplicación de Facebook, así que la creamos :topsy_turvy:
Nos vamos a https://developers.facebook.com/apps ahí damos click a Add a new app
En el modal que se les va abrir les aparecerán 4 opciones (iOS, Android, Facebook Canvas y Website), seleccionan Website.
En lo siguiente que les aparecerá, solo le dan click a Skip and Create App ID.
Ahora se les abrirá otro modal, donde solo tendrán que poner el nombre de la aplicación, el "Namespace", y la categoría, le pueden poner cualquier cosa:
Y crean la aplicación, click en Create App ID.
De la aplicación lo único que necesitamos es el App ID, así que lo copiamos y lo guardamos.
Ahora, ahí mismo nos vamos a Settings, en App Domains ponemos el dominio donde usaremos el script y dan click en Add plataform, y seleccionan Website, en Site URL ponen el mismo dominio. Y así guardan los cambios.
Y eso es todo lo que haremos con Facebook y la aplicación, si ya hicieron todo bien, ahora toca hacer el script, se hace con un poco de JavaScript, y se usa la API de YouTube y Facebook, todo lo pondremos en el mismo js.
Crean un nuevo archivo con la extensión .js, en él pegan:
Insertar CODE, HTML o PHP:
var js, js1, fjs = document.getElementsByTagName('script')[0];
js = document.createElement('script'); js.id = 'facebook-jssdk';
js1 = document.createElement('script'); js1.id = 'YouTubeAPI';
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3&appId="+configs.appID;
js1.src = 'https://www.youtube.com/iframe_api';
fjs.parentNode.insertBefore(js, fjs);
fjs.parentNode.insertBefore(js1, fjs);
var player;
var done = false;
function compartirYT() {
FB.ui({
method: 'share',
href: document.location.href,
},
function(response) {
if (response && !response.error_code) {
$(".shareBox").remove();
player.playVideo();
} else {
alert("Error! tienes que compartirlo.");
}
});
}
function onYouTubeIframeAPIReady() {
player = new YT.Player('youtubePlayer', {
height: configs.height,
width: configs.width,
videoId: configs.id,
playerVars: {
'controls': 1,
'showinfo': 0,
'rel': 0,
'iv_load_policy': 3,
'modestbranding': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.setVolume(100);
cajaCompartir();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(function(){
player.pauseVideo();
$('.shareBox').show();
}, configs.segundos * 1000);
done = true;
}
}
function cajaCompartir() {
var width = $('#youtubePlayer').width();
var height = $('#youtubePlayer').height();
var img = new Image();
img.src = configs.image;
var inter = setInterval(function() {
if (img.width && img.height) {
$('#youtube').prepend('<div class="shareBox" style="width:'+width+'px;height:'+height+'px;position:absolute;background:rgba(0,0,0,.6);display:none"><img class="img-compartir" src="'+configs.image+'" style="max-width:100%;position:absolute;top:50%;left:50%;margin:-'+img.height/2+'px 0 0 -'+img.width/2+'px;cursor:pointer" onclick="compartirYT()"></div>');
clearInterval(inter);
}
}, 100);
}Y así lo guardan, no editen nada.
Lo suben a donde quieran, puede ser a su mismo hosting o en algún otro como por ejemplo Dropbox.
Y por último, donde quieran que aparezca el vídeo, por ejemplo en una entrada, ponen el siguiente código:
Insertar CODE, HTML o PHP:
<div id="youtube">
<script type="text/javascript">
var configs = {
id: '', // ID DEL VIDEO
width: 600, // ANCHO DEL IFRAME
height: 400, // ALTO DEL IFRAME
segundos: 10, // TIEMPO DE REPRODUCCION ANTES DE PAUSAR EL VIDEO
appID: '', // ID APLICACION DE FACEBOOK
image: 'http://www.filz.us/files/1db90217/712/compartir.png' // IMAGEN PARA COMPARTIR
}
</script>
<script type="text/javascript" src="URL DEL SCRIPT"></script>
<div id="youtubePlayer"></div>
</div>Solo ponen configuran lo que les pide, que es el ID del video, el ancho (width), el alto (height), los segundos para mostrar la imagen de compartir, el ID de la aplicación.
Y opcional, pueden cambiar la imagen que aparecerá de compartir, no hace falta hacer ningún cambio, la imagen se ajustará automáticamente.
Si hicieron todo bien, ya lo tendrán funcionando.
DEMO
Es necesario tener JQuery
Imagen que yo usé para el demo:
Imagen que yo usé para el demo:
Última edición:
