Tutorial: Cómo adaptar un script de Facebook para compartir un video en tu página web

  • Autor Autor laider91
  • Fecha de inicio Fecha de inicio
laider91

laider91

Beta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola chicos,

Quiero comentaros una forma que me imagino que alguien ya posteo, pero por si alguien lo necesita, paso a explicar como adaptar el script que obliga a compartir en facebook, para acceder a un "Vídeo"

Aquí os dejo en enlace por si no lo tienen: https://mega.co.nz/#!v5BmjBYI!uF_n5WpP73VO1xVtqyd2YlCKX0p4I5GOg050aXpCW78

Bueno, la forma que yo tuve para adaptarlo a mi web, ya que mi web no es de vídeos fue la siguiente, pongo código y después explico:

HTML:
<div style="position:relative">El contenido que quieres bloquear, ya puede ser la web entera si lo deseas.</div>
	<div style="position:absolute; top:0px; left:0px; width:ancho que cubra el contenidopx; height:alto que cubra el contenidopx; z-index:2">
							<script>
        youtube("GNF3KI7Po_o"); Codigo de un video de youtube
    </script>
	 </div>


Bueno, el código anterior, lo que hace si alguno no lo sabéis, es posicionar un div encima de otro, básicamente lo que hago con esto es hacer que el "Vídeo" aparezca encima del contenido que queremos bloquear en cierta manera, ahora bien lo único que debemos hacer ahora, es modificar las imágenes que vienen en este script así, como también su tamaño, no os preocupéis, no hace falta que el tamaño sea igual de grande que el del div que queremos bloquear, si por ejemplo, el div que queremos bloquear es muy grande, o queremos hacer que el div, que bloquea el contenido sea de un tamaño menor solo debemos hacer lo siguiente:

HTML:
<div style="position:absolute; top:0px; left:0px; width:ancho que cubra el contenidopx; height:alto que cubra el contenidopx; z-index:2;text-align:center">
<div style=" width:ancho que queramospx; height:alto que queramospx">
							<script>
        youtube("GNF3KI7Po_o"); Codigo de un video de youtube
    </script>
</div>
</div>

Lo que he hecho ahora, es hacer que el div donde aparece el script, este dentro a su vez de una mas mayor, que es el que realmente bloqueara el contenido de la pagina, así podemos jugar con el tamaño de las imágenes de el div que bloquea la pagina.

Ahora, para que no carge ningun video, debemos dirigirnos a "blocker.js" y debemos eliminar esta parte:
HTML:
style="background-image: url(http://img.youtube.com/vi/' + IDyoutube + '/0.jpg)"

Lo siguiente que vamos a hacer, es modificar el iframe que aparece por nuestra propia pagina, exactamente este:

HTML:
<iframe width="480" height="360" src="http://www.youtube.com/embed/'+IDyoutube+'?autoplay=0" frameborder="0" allowfullscreen></iframe>

Debe quedar algo asi:

<iframe  noresize scrolling="No" frameborder="0" marginwidth="0" marginheight="0" border="0" width="480" height="360" src="aquitupagina.html" frameborder="0" allowfullscreen></iframe>

Os lo he puesto ya en el ejemplo, para evitar que salgan scroll, margenes y demás... aunque si queréis scroll por ejemplo solo debéis quitar el noresize scrolling.

Ahora bien, podéis pensar... menuda mierda, tanto trabajo y cuando la persona comparte, se queda el recuadro transparente del div, y no deja acceder al contenido, bueno para eso existe varias opciones, pero yo la que voy a poner en este tutorial va a ser el colocar un botón en la pagina que hemos creado para el iframe con el siguiente código:

HTML:
<button id="BUTTON" class="button" onclick="window.parent.document.getElementById('nombre del div).style.display='none';">CERRAR</button>

Con esto lo que hacemos es que cuando pulsemos dicho botón, desaparezca el div que nosotros digamos ya sea directamente el div que contiene directamente las imágenes para compartir, o el div que tiene enjaulado a los divs del script.

Podéis, pensar... pero valla mierda compartirá un vídeo, pues no, compartirá los metatags de la pagina donde se encuentre, ya sea el index o alguna extensión.

También deciros, que currándose el diseño, queda bonito y hace aumentar las visitas considerablemente.

Es un tutorial cutre lo se, si existe podéis eliminarlo, o si me confundí de sitio podéis mover lo, en definitiva no me importa :welcoming:

Os puedo segurar que hasta el momento que lo he hecho funciona perfectamente, y quizás a alguien le haga falta o lo quiera.

Así que bueno, un saludo.


HTML:
<div style="position:relative">El contenido que quieres bloquear, ya puede ser la web entera si lo deseas.</div>
	<div style="position:absolute; top:0px; left:0px; width:ancho que cubra el contenidopx; height:alto que cubra el contenidopx; z-index:2">
							<script>
        youtube("GNF3KI7Po_o"); Codigo de un video de youtube
    </script>
	 </div>

Importante que se me paso, en "Codigo de un video de youtube" debéis poner uno cualquiera, tranquilos que no se vera, ni cogerá la imagen ni nada, pero ya que este script esta hecho para viralizar vídeos en facebook, no funcionara si no ponéis un código.

Un saludo.
 
Última edición:
Gracias por compartir y aportar al foro, está muy bien explicado el tuto :mola:
 
muchas gracias por compartir!:encouragement: a probarlo
 
Gracias por el aporte. Tengo unas dudas te deje un privado.

Saludos
 
Cuando se presiona el botón "ver video" sale la ventana para compartir en blanco y no aparece nada para compartir. Sabes a que se debe?
 
Muy buen aporte:encouragement:
 
Hola amigo muy buen aporte, pero podrias poner un ejemplo mas especifico ya funcionando en una web de videos o almenos explicar donde debemos colocar cada codigo, porque eh provado y no me funciona gracias por el aporte espero tu respuesta.
 
esto es en blogger? disculpa es que no entendi mucho
 
ese script esta malo... alguien ya pudo ponerlo a funcionar para que lo comparta???
 
Hola amigo, muy buen aporte me gustaria que si a alguien leha funcionado aporte,

ya que al ventana sale en blanco y no se porque
 
alguien tiene el que funciona ? pago 5$ por el script que funcione.
 
Perfecto, lo que estaba buscando! :encouragement:

- - - Actualizado - - -

NO funciona, no comparte el post, hasta hacer el clic para ver el video, perfecto... cuando hace clic abre otra ventana asi: https://www.facebook.com/dialog/sharer.php?u=http://mi sitio&t=?app_id=1439152689637274&display=popup&e2e=%7B%7D&locale=es_LA&next=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FDU1Ia251o0y.js%3Fversion%3D41%23cb%3Df1b282271a56f34%26domain%3Dsocialnoticias.com%26origin%3Dhttp%253A%252F%252Fsocialnoticias.com%252Fff8fe1818f0076%26relation%3Dopener%26frame%3Df12bb6224d19a06%26result%3D%2522xxRESULTTOKENxx%2522&sdk=joey

Y nada mas!
 
si alguien lo hace anda que lo pase
 
Hacia tiempo que no lo revisaba, pude solucionarlo en 5 minutos, y esta en pleno funcionamiento, pero esta vez no voy a postear la forma, debido a que cuanto mas gente lo use antes falla por lo que he visto, pero vamos va de mil maravillas... 🙂
 
Pásalo amigo por mp prometo dar buen uso 🙂
 
Gracias por compartir este scrip amigo! Saludos.
 
Atrás
Arriba