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

danieltorolara dijo:

sirve para blogger?

Hacer clic para expandir...

Salvamagic2013 dijo:

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:

Hacer clic para expandir...

Salvamagic2013 dijo:

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:

Hacer clic para expandir...