Crear un botón de suscripción a YouTube sin usar el botón de YouTube | Oloblogger ¿Tienes un canal en YouTube y quieres promocionarlo ofreciendo la suscripción desde un botón en tu w...

21 de febrero de 2015

Crear un botón de suscripción a YouTube sin usar el botón de YouTube

¿Tienes un canal en YouTube y quieres promocionarlo ofreciendo la suscripción desde un botón en tu web? Bien, pues esa es una tarea muy fácil: sólo hay que acercarse a la página adecuada (esta) y en ella encontrarás el muestrario oficial. Desde allí lo único que hay que hacer es indicar el nombre o ID del canal, pinchar en un par de selectores para elegir el estilo y listo, ya tienes tu flamante botón.

Pero dicho botón, como la inmensa mayoría de los oficiales, tiene un inconveniente y no es otro que su dependencia de JavaScript ajeno. Esto implica peticiones extra, estar sujeto al estado del servidor del servicio y en conjunto, demora en la carga. No es un drama pero como todo va sumando, vamos a ver la manera de hacer que con un pequeño sacrificio, el botón corra como las liebres.

Imagen original: imgkid.com


Si habéis ido al enlace anterior, habréis comprobado que el código resultante para un botón normal es como este:

<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="ID_o_NOMBRE_CANAL" data-layout="default" data-count="undefined"></div>
(*) En verde lo que hay que cambiar por el dato del propio canal

La primera línea es la que carga la API de Google y aunque para Blogger os la podéis ahorrar porque la plataforma ya la carga de serie para los botones de G+ y otras cositas, el botón igualmente acudirá allí a por lo que le hace falta, básicamente el dato de suscriptores actuales para mostrar el número en el botón.

Y este será el pequeño sacrificio que vamos a tener que hacer, prescindir del contador. Esto es así porque lo que usaremos será una simple URL que remite directamente a una página con el formulario de suscripción. Como añadido la imagen no será tal, sino un conjunto de formas básicas hechas con CSS. Esta sería la manera:

<a class='ytboton' href='http://www.youtube.com/subscription_center?add_user=ID_o_NOMBRE_CANAL'>YouTube</a>

YouTube

Con esto ya tendremos un enlace simple como el anterior que lleva a la página en cuestión, pero si queréis que tenga el mismo aspecto (o casi) que el botón original, sólo habrá que añadir este CSS a continuación del anterior código:

<style>
a.ytboton {position: relative;display: block;width: 100px;height: 24px;margin: 0 auto;padding: 4px 8px 4px 34px;background: #B31217;color: white;line-height: 16px;font-size: 12px;text-decoration: none;font-family: arial;box-sizing: border-box;}
a.ytboton:before {content:"\25B6";position: absolute;top: 4px;left: 8px;padding: 1px 5px;background: white;color: #B31217;border-radius: 3px;font-size: 10px;box-sizing: border-box;line-height: 12px;}
</style>

YouTube


Evidentemente podéis prescindir de esto último y directamente dentro del enlace sustituir el texto ("YouTube") por una imagen al estilo de estas:

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

3 comentarios :

  1. Me gusta esta forma de integrar nuestro Canal de YouTube con nuestro blog. Lo tendré en cuenta para usarlo en un futuro.

    Gracias Oloman. Salu2.

    ResponderEliminar
  2. quiero saber como abrir una nueva cuenta de Youtube para salvar los videos que tengo, y ese programa embedr que antes era un play list como trasbasarlo a otros playlist sin tenerlo que hacer uno a uno.

    Yo sacaba el audio de algunos videos de youtube para luego transcribirlo y una vez me olvide de dejar mi trabajo en el y me han sancionado solo por USAR SUS PROPIAS HERRAMIENTAs. Lo veo fatal.

    Sabes algo
    Juan

    ResponderEliminar
    Respuestas
    1. Lo siento Sricaitanya. Además de responderte con demora, no conozco apenas el servicio de YouTube salvo como usuario-visor-devorador de vídeos.
      Ahora bien, en el foro del producto encontrarás varios expertos en el tema.

      Eliminar