Ejemplo para añadir botones de Pocket y LinkedIn en plantillas de GavickPro
Desde el lanzamiento del Framework Gavern una de las características centrales de las plantillas de GavickPro ha sido el dar soporte a los botones sociales. Decidieron añadir como estándar los iconos de redes sociales más populares, como Facebook, Twitter, Google+ y Pinterest.
Sin embargo, hay por ahí muchas más redes sociales que atienden a una amplia gama de gustos y culturas, cada una con sus propios iconos y botones de acción. En este artículo vamos a ver el proceso necesario para agregar tus propios iconos de redes sociales mediante la adición de dos populares iconos que actualmente no están incluidos en las plantillas de GavickPro.
Botones de compartir en GavickPro
Si echas un vistazo a la pestaña social API en las opciones de plantilla encontrarás opciones para configurar todos los elementos sociales relacionados con la red de una plantilla determinada. Puedes configurar opciones tales como la disposición de los botones, si deseas activar o desactivar botones particulares, y controlar las páginas en que van a aparecer los elementos sociales.
Ten en cuenta que si agregas un nuevo botón social no va a tener las mismas características como los botones sociales predeterminados en las plantillas de GavickPro. Esto significa que tendrás que especificar la disposición y la función de los botones durante la generación del botón; es decir, en el propio código. Para deshabilitar el botón, se deberá eliminar el código creado.
Esto es por supuesto una gran desventaja en comparación con los botones predeterminados que incluyen todas las funciones adicionales, pero poner en práctica un nuevo botón de una red social con todas las funciones que incluyen los botones predeterminados requeriría una inversión de tiempo mucho mayor que realmente no vale la pena. Una vez que estás cómodo con el proceso, se puede generar un nuevo botón en cuestión de segundos.
Este tutorial cubre la ampliación de los botones sociales para compartir por defecto con dos botones de redes populares adicionales: Add to Pocket y LinkedIn. La adición de botones de otras redes sociales va a ser muy similares a los incluidos en esta guía.
Pocket es un servicio que permite almacenar prácticamente cualquier contenido en la web para verlo más adelante, ya sean artículos, videos, imágenes y mucho más. Pocket ofrece aplicaciones multiplataforma que proporcionan una gran cantidad de opciones para guardar los artículos en una amplia gama de dispositivos, ya sea un navegador, tablet o smartphone. El soporte de correo electrónico permite que los enlaces de emails se agreguen automáticamente a tus artículos almacenados, y la integración con más de 500 aplicaciones populares como Twitter y Flipboard significa que muchas de tus aplicaciones sociales o multimedia favoritas están soportadas por Pocket.
Hay también una solución para los desarrolladores de agregar un botón directamente en su página web que automáticamente les ahorrará lo que vamos a explicar en este artículo sobre este servicio. Aparte de la funcionalidad principal de Pocket hay otro beneficio; al leer más tarde el recurso vinculado se nos proporcionará con una vista limpia. Esto significa que serán eliminados cualquier tipo de publicidad, módulos adicionales u otros elementos que puedan distraer la lectura.
Para añadir un botón de Pocket a nuestra área de social APIs vamos a necesitar generar primero el código. Para obtener el código de cabecera (head) del botón ve a este sitio web y elige el tipo de botón deseado.
Para este tutorial escogeremos la disposición vertical por defecto con un contador, ya que el estilo de este botón combina muy bien con la plantilla Gavern que utilizamos en este sitio. El código generado que utiliza este botón se parece a esto:
<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="es"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
Recuerda que este código puede ser diferente si se selecciona un tipo de presentación diferente, así que es muy importante copiarlo directamente del sitio web de Pocket. Ahora, todo lo que tenemos que hacer es copiar este código a la zona de social API predeterminada. La disposición del artículo y botones existentes se definen en el archivo template/html/com_content/article/default.php , por lo que este es el archivo que debemos modificar. En la mayor parte de las plantillas de GavickPro el área del bloque social API está en un contenedor DIV:
<div id="gkSocialAPI">"¦</div>
Es realmente importante agregar el nuevo botón justo antes de la etiqueta de cierre para este elemento - </ div> . Una vez encuentres esta área copia el código de Pocket al final del contenedor DIV; después de guardar, el efecto debería ser como esta captura de pantalla:
Probablemente no sea necesario una introducción a LinkedIn; es la red social relacionada con el negocio principalmente especializada con el crecimiento de los contactos de negocios. La página web está disponible en más de 20 países y, aparte de las características empresariales de redes como listados de trabajo, habilidades y personas influyentes, también tiene un feed de red social para informarte al interactuar con tus contactos y notas de post interesantes, ya sea en relación de negocios o de otra clase. Al igual que Pocket, LinkedIn ha elaborado una página web específica en la que se puede personalizar y generar el código del botón de compartir.
En la página Build a Share Button de LinkedIn podremos definir nuestro propio botón y generar el código para él. Usaremos la disposición vertical como lo hicimos con el botón de Pocket en la última sección, porque nos gusta mantener las cosas uniformes. Al elegir el botón debes asegurarte de que se deja vacío el campo de la URL que se comparte, porque queremos que el botón comparta el artículo que se está viendo, en lugar de una dirección URL específica. Si se deja en blanco, entonces el script detectará automáticamente la URL actual y la compartirá. El código para el botón vertical con un contador es el siguiente:
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: es_ES
</script>
<script type="IN/Share" data-counter="top"></script>
Al igual que el botón anterior necesitamos copiar este código al archivo template/html/com_content/article/default.php ; si ya has añadido un botón para Pocket entonces debes copiar el código justo después del código para el botón de Pocket, pero antes del cierre DIV. De lo contrario, si sólo deseas agregar un botón de LinkedIn busca la etiqueta de cierre para el contenedor <div id = "gkSocialAPI"> y copia el código antes del DIV de cierre (</ div>).
Después de este paso deberías ver así el botón extra en tus artículos de Joomla:
Adición de otros botones
En este breve tutorial nos hemos centrado en dos de los botones sociales más populares que se pueden encontrar en los sitios web, además de los ya disponibles en la pestaña social API de las plantillas GavickPro, como los botones de Facebook, Twitter, Google+ y Pinterest. Cada aplicación de servicio puede ser diferente por lo que a pesar de que siempre tendrás que editar el visor de artículos de Joomla (archivo default.php), a veces también necesitarás incluir una secuencia de comandos en el área de la plantilla (normalmente en el <head>).
