Tutorial: Script viral en videos de YouTube

  • Autor Autor kanikase
  • Fecha de inicio Fecha de inicio
kanikase

kanikase

Préstamo
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
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.

Captura.png

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

Captura.png

En el modal que se les va abrir les aparecerán 4 opciones (iOS, Android, Facebook Canvas y Website), seleccionan Website.

Captura.png

En lo siguiente que les aparecerá, solo le dan click a Skip and Create App ID.

Captura.png

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:

Captura.png

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.

Captura.png

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.

Captura.png

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:
compartir.webp
 
Última edición:
Genial aporte gracias :encouragement:


Sent from my Nokia Lumia 520 using Tapatalk
 
WTF! eres un genio va a favoritos y un me agrada :encouragement::encouragement::encouragement: :love_heart::love_heart::love_heart:
 
Wao, siempre me habia preguntado como es que se hacia, muchas gracias por el aporte !
 
a leerlo mas tarde con mas tranquilidad se ve buena
 
que buen script, tendré que probarlos, gracias pr compartir!
 
Va a favoritos y a mi colección, gracias capo :congrats:
 
perdon, eres mujer o hombre, para darte las gracias debidamente. :encouragement::encouragement:
 
Muchas gracias por el script gran aporte
 
Perfecto! muchas gracias
 
Es válido en adsense esto?
Me parece que no. Que alguien me corrija antes de mandarme alguna macana. Saludos, tenés mi agrada
 
[MENTION=81006]kanikase[/MENTION], en el demo no está funcionando.
[MENTION=114489]Menorah[/MENTION], esto no es válido para AdSense. Esto se discutió recientemente: Script Viral + Adsense. Otros temas similares lo puedes encontrar haciendo clic aquí. :encouragement:
 
[MENTION=81006]kanikase[/MENTION], en el demo no está funcionando.
[MENTION=114489]Menorah[/MENTION], esto no es válido para AdSense. Esto se discutió recientemente: Script Viral + Adsense. Otros temas similares lo puedes encontrar haciendo clic aquí. :encouragement:

Que es lo que no te funciona? porque a mi me va bien 😕
 
Es válido en adsense esto?
Me parece que no. Que alguien me corrija antes de mandarme alguna macana. Saludos, tenés mi agrada

Bueno ya te contestaron :fatigue: XD
 
Gran aporte, te dejo mi voto.
 
Simplemente una obra de arte =)
 
Tengo una consulta igual funciona si el sitio tiene publicidad en el video y lo puedo poner en el head para que en todo el sitio donde aparesca el video se tenga que compartir?
 
WTF!! T__T te mereces un aplauso y abrazo jajaja, por meses busque eso.. Gracias (y) :couple_inlove: espero que si seas una chica o mi hombria se vera claramente afectada por ese emoticon xD saludos
 
Atrás
Arriba