Tutorial: Super Método para Viralizar los Videos de tu Web

  • Autor Autor Salvamagic2013
  • Fecha de inicio Fecha de inicio
Buen tutorial. Gracias por compartir el contenido.
 
Super Método para Viralizar los Videos de tu W

Exlente metodo. bien explicado. me gusta mucho
 
Muy buen aporte, voy a utilizar esta técnica. Muchas Gracias.
 
Buen aporte, tiempo sin revisar los tutoriales y al parecer muchos han dejado buen material por acá. Muchas gracias!
 
No sirve para wordpress, lo probe con mi web y no aparece el video. Solo aparece un espacio en blanco donde debia aparecer el video.
 
[MENTION=50091]Salvamagic2013[/MENTION] pero podrías decir porfa donde va el código, en que archivo, en que linea, para los que no sabemos de codigos
 
sirve para blogger?
 
Hola, después de algunos meses de inactividad, vuelvo con un nuevo tutorial que, sin duda, os gustará a muchos de vosotros, no solo por el efecto que causa si no por su gran versatilidad y uso en cualquier tipo de plataforma o cms.

¿En qué consiste este método?. Es una nueva forma de viralizar todos los videos que queramos y que publiquemos en nuestra web. Para esto utilizaremos el reproductor más usado por todos, el reproductor de Youtube. Y, ¿de qué forma vamos a viralizar los videos?, con un popup elegante, adaptado a todos los dispositivos, tanto el desktop, como en cualquier dispositivo móvil (celular) y lo mejor de todo, dicho popup está integrado en el propio video.

Pero, ¿de qué forma aparece el popup?. Nuestro popup que invitará al usuario a compartir el video o post, aparecerá al finalizar la reproducción del video. Por tanto, os dejaré una pequeña lista de las ventajas que tiene el método.

Ventajas que tiene el método

- Viraliza nuestros posts o videos de manera eficiente
- El popup no es molesto
- El popup queda integrado en el propio video
- Compatible en cualquier dispositivo (celular o desktop, tablets, etc)
- El popup siempre se acciona al finalizar la reproducción del video, invitando a compartir.

El resultado del opup es este cuando el video finaliza.

Ver el archivo adjunto 70626

Después de esta pequeña introducción, comenzaré a explicar cómo vamos a conseguir esto. Empecemos.

En primer lugar, os dejaré el código completo que deberemos incluir donde deseemos que aparezca nuestro video dentro nuestro post.

Insertar CODE, HTML o PHP:
<div id='player'></div>
  <script type='text/javascript'> 
        // create youtube player
        var tag = document.createElement('script');
       tag.src = "http:\/\/www.youtube.com/player_api";
       var firstScriptTag = document.getElementsByTagName('script')[0];
       firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
              height: '450',
              width: '100%',
              wmode: 'transparent',
              videoId: 'q1rfjSg89bM',
              playerVars: {
               enablejsapi:1,
               controls:1,
               showinfo:0, 
               color:'white',
               rel:0,
               wmode:'transparent',
               modestbranding:1,
               theme:'light'
              },
              events: {
                'onStateChange': onPlayerStateChange
             }
            });
        }

       // when video ends
        function onPlayerStateChange(event) { 
            if(event.data == 0) { clickcallpopup(); }
        }
    </script>
<style>
  .fb-share-button{
   padding: 0px 10px 10px;
   background: #4c69ba;
  }
  .uiIconText{
   color: white;
  }
  </style>
  <div id="mask_layer" style="background:#000000; opacity:0.5"></div>
  <div id="popup" style="background: white; padding: 10px 20px; border:1px solid #888; display:none; font-weight:bold; font-family:arial; ">
<div style="margin-bottom:8px; text-align : center;">
   <div style="font-size:25px">¿Te ha gustado el video?</div>
</div>
   <a href="javascript:var dir=window.document.URL;var tit=window.document.title;var tit2=encodeURIComponent(tit);var dir2= encodeURIComponent(dir);window.location.href=('http://www.facebook.com/share.php?u='+dir2+'&amp;t='+tit2+'');">
    <div id="share_button" style="background:#2a5f9d; color: white; border-radius: 7px; padding: 14px; width:95%;">
     <div style="margin:auto; width:340px; font-size: 14pt">
      <img src="http://oi65.tinypic.com/vzdds2.jpg">
Comparte el video en Facebook
     </div>
    </div>
   </a>
   <div style="text-align: center; width:190px; margin: auto;">
    <span class="share-count" style="color:#229df1; font-size:20px; font-weight:bold;"></span>
   </div>
  </div>
 <script>
     function onPlayerStateChange(event){
      console.log("new state: ", event.data);
      if(event.data == 0){
       var player = jQuery("#player");
       var popup = jQuery("#popup")
       jQuery("body").append(jQuery(popup));
       popup.css({
        position: "absolute",
        "z-index": 8,
        top: jQuery(player).offset().top + jQuery(player).height()/2-popup.height()/2,
        left: jQuery(player).offset().left + jQuery(player).width()/2-popup.width()/2-42/2
       }).show();
    console.log(jQuery(player).width()/2, popup.width()/2)

    var mask = jQuery("#mask_layer");
    jQuery("body").append(mask);
    mask.css({
     position: "absolute",
     "z-index": 7,
     top: jQuery(player).offset().top,
     left: jQuery(player).offset().left,
     width: jQuery(player).width(),
     height: jQuery(player).height()
    })

    jQuery(".share-count").html(share_count);
 clickcallpopup(); jQuery(".backgroundPopup").css({"z-index": 9}); 
      }
     }
     </script>

En la parte de videoid, pondremos la id del video de youtube que queramos publicar. No creo que haga falta explicar cómo se extrae la id de un video de youtube ( en todo caso, si alguien no sabe hacerlo puede preguntarme).

Ver el archivo adjunto 70627

Otra parte también importante, es la parte para editar el titulo del popup con la frase que queramos

Ver el archivo adjunto 70630

El popup no saldrá en mitad del video ya que con el código estamos obligando a que el video finalice para hacer la llamada al popup.

Funciona a la perfección en cualquier plataforma, ya sea blogger o wordpress, pero si vuestro cms es WP tendréis que añadir al principio del código estas nuevas lineas, para que el reproductor se visualice con normalidad.

Insertar CODE, HTML o PHP:
<script type='text/javascript'>
goviralhasPoppedUp = false;
</script>

Para que comprobéis que funciona sin ningún tipo de problema, os dejo la DEMO. Veréis el método en acción.

Demo Video Viral al Finalizar la Reproducción | Web Antonio Maquinon

Y aquí finaliza el tutorial. Espero que os sirva para vuestros proyectos y que lo disfrutéis. Cualquier duda, la responderé con mucho gusto. :encouragement:
Sirve para una web tipo script osea que no es ni wordpress ni blogger
 
Funciona! Muchas gracias!
 
Que buen aporte, gracias!
 
Hola!

Hola, queridos todos, soy nueva en este sitio y me encantaría aprender mucho sobre cómo hacer popular mis videos. Yo soy profesora de literatura y filosofía, así que no tengo una idea de programación. Pero estoy interesada en aprender. Recién cree un canal en youtube con la finalidad de transmitir los mejores tips de los grandes empresarios sobre cómo triunfar en los negocios; por ahora estoy dedicando tiempo a Timothy Ferriss:

https://www.youtube.com/?gl=MX&hl=es-419

Quisiera saber cómo puedo hacer llegar estos consejos a más personas. Muchísimas gracias. Saludos desde México.
 
Hola, después de algunos meses de inactividad, vuelvo con un nuevo tutorial que, sin duda, os gustará a muchos de vosotros, no solo por el efecto que causa si no por su gran versatilidad y uso en cualquier tipo de plataforma o cms.

¿En qué consiste este método?. Es una nueva forma de viralizar todos los videos que queramos y que publiquemos en nuestra web. Para esto utilizaremos el reproductor más usado por todos, el reproductor de Youtube. Y, ¿de qué forma vamos a viralizar los videos?, con un popup elegante, adaptado a todos los dispositivos, tanto el desktop, como en cualquier dispositivo móvil (celular) y lo mejor de todo, dicho popup está integrado en el propio video.

Pero, ¿de qué forma aparece el popup?. Nuestro popup que invitará al usuario a compartir el video o post, aparecerá al finalizar la reproducción del video. Por tanto, os dejaré una pequeña lista de las ventajas que tiene el método.

Ventajas que tiene el método

- Viraliza nuestros posts o videos de manera eficiente
- El popup no es molesto
- El popup queda integrado en el propio video
- Compatible en cualquier dispositivo (celular o desktop, tablets, etc)
- El popup siempre se acciona al finalizar la reproducción del video, invitando a compartir.

El resultado del opup es este cuando el video finaliza.

Ver el archivo adjunto 70626

Después de esta pequeña introducción, comenzaré a explicar cómo vamos a conseguir esto. Empecemos.

En primer lugar, os dejaré el código completo que deberemos incluir donde deseemos que aparezca nuestro video dentro nuestro post.

Insertar CODE, HTML o PHP:
<div id='player'></div>
  <script type='text/javascript'> 
        // create youtube player
        var tag = document.createElement('script');
       tag.src = "http:\/\/www.youtube.com/player_api";
       var firstScriptTag = document.getElementsByTagName('script')[0];
       firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
              height: '450',
              width: '100%',
              wmode: 'transparent',
              videoId: 'q1rfjSg89bM',
              playerVars: {
               enablejsapi:1,
               controls:1,
               showinfo:0, 
               color:'white',
               rel:0,
               wmode:'transparent',
               modestbranding:1,
               theme:'light'
              },
              events: {
                'onStateChange': onPlayerStateChange
             }
            });
        }

       // when video ends
        function onPlayerStateChange(event) { 
            if(event.data == 0) { clickcallpopup(); }
        }
    </script>
<style>
  .fb-share-button{
   padding: 0px 10px 10px;
   background: #4c69ba;
  }
  .uiIconText{
   color: white;
  }
  </style>
  <div id="mask_layer" style="background:#000000; opacity:0.5"></div>
  <div id="popup" style="background: white; padding: 10px 20px; border:1px solid #888; display:none; font-weight:bold; font-family:arial; ">
<div style="margin-bottom:8px; text-align : center;">
   <div style="font-size:25px">¿Te ha gustado el video?</div>
</div>
   <a href="javascript:var dir=window.document.URL;var tit=window.document.title;var tit2=encodeURIComponent(tit);var dir2= encodeURIComponent(dir);window.location.href=('http://www.facebook.com/share.php?u='+dir2+'&amp;t='+tit2+'');">
    <div id="share_button" style="background:#2a5f9d; color: white; border-radius: 7px; padding: 14px; width:95%;">
     <div style="margin:auto; width:340px; font-size: 14pt">
      <img src="http://oi65.tinypic.com/vzdds2.jpg">
Comparte el video en Facebook
     </div>
    </div>
   </a>
   <div style="text-align: center; width:190px; margin: auto;">
    <span class="share-count" style="color:#229df1; font-size:20px; font-weight:bold;"></span>
   </div>
  </div>
 <script>
     function onPlayerStateChange(event){
      console.log("new state: ", event.data);
      if(event.data == 0){
       var player = jQuery("#player");
       var popup = jQuery("#popup")
       jQuery("body").append(jQuery(popup));
       popup.css({
        position: "absolute",
        "z-index": 8,
        top: jQuery(player).offset().top + jQuery(player).height()/2-popup.height()/2,
        left: jQuery(player).offset().left + jQuery(player).width()/2-popup.width()/2-42/2
       }).show();
    console.log(jQuery(player).width()/2, popup.width()/2)

    var mask = jQuery("#mask_layer");
    jQuery("body").append(mask);
    mask.css({
     position: "absolute",
     "z-index": 7,
     top: jQuery(player).offset().top,
     left: jQuery(player).offset().left,
     width: jQuery(player).width(),
     height: jQuery(player).height()
    })

    jQuery(".share-count").html(share_count);
 clickcallpopup(); jQuery(".backgroundPopup").css({"z-index": 9}); 
      }
     }
     </script>

En la parte de videoid, pondremos la id del video de youtube que queramos publicar. No creo que haga falta explicar cómo se extrae la id de un video de youtube ( en todo caso, si alguien no sabe hacerlo puede preguntarme).

Ver el archivo adjunto 70627

Otra parte también importante, es la parte para editar el titulo del popup con la frase que queramos

Ver el archivo adjunto 70630

El popup no saldrá en mitad del video ya que con el código estamos obligando a que el video finalice para hacer la llamada al popup.

Funciona a la perfección en cualquier plataforma, ya sea blogger o wordpress, pero si vuestro cms es WP tendréis que añadir al principio del código estas nuevas lineas, para que el reproductor se visualice con normalidad.

Insertar CODE, HTML o PHP:
<script type='text/javascript'>
goviralhasPoppedUp = false;
</script>

Para que comprobéis que funciona sin ningún tipo de problema, os dejo la DEMO. Veréis el método en acción.

Demo Video Viral al Finalizar la Reproducción | Web Antonio Maquinon

Y aquí finaliza el tutorial. Espero que os sirva para vuestros proyectos y que lo disfrutéis. Cualquier duda, la responderé con mucho gusto. :encouragement:

Saludos Salvamagic ¿donde debo de poner el codigo en que linea?
 
Pues a mí no me ha funcionado
 
Salvamagic2013 lo probe funciona de maravilla en blogger pero me pregunto si hay manera de ponerlo al inicio o poder controlar el tiempo de salida del popup?

Y la otra pregunta es:
Hay manera de hacer que el video compartido se vea con imagen?, porque cuando lo compartes sale poco vistoso, osea sin imagen. Solo sale el titulo y descripcion.
 
Gracias por el aporte amigo, tengo un blog viral y esto me ha caido como anillo al dedo, a exprimirlo al maximo
 
Atrás
Arriba