Añade botones para compartir JsSocials a tu tema de WordPress

JsSocials es un plugin jquery que agrega botones para compartir tu contenido vía redes sociales. Esta es una pequeña guía para implementarlo en tu tema de WordPress.

Paso 1: descargar los archivos de JsSocial.

Facil, basta con ir a la pagina oficial de JsSocial y descargar el archivo zip. Ahórrate el tiempo con este enlace directo.

Descargar JsSocials

Ahora toca extraer los archivos del zip. al extraer obtendrás una carpeta llamada ‘jssocials-1.4.0’ o algo similar (según la versión actual). Es recomendable que renombres la carpeta a simplemente ‘jssocials’.

Paso 2: subir los archivos JsSocials a la carpeta de tu tema

Sube los archivos de JsSocials (con todo y carpeta) en la raíz de tu tema que por lo general es ‘wp-content/themes/nombre_del_tema’. La ruta de tu carpeta JsSocials sería ‘wp-content/themes/nombre_del_tema/jssocials’.

Paso 3: integrar JsSocials al funcionamiento de tu tema

La implementación de JsSocials requiere de editar, primero, el archivo functions.php.

Agrega este código a functions.php.

function jssocials_scripts() {

wp_enqueue_style( ‘mytheme-jssocials’, get_template_directory_uri() . ‘/jssocials/jssocials.css’ );

wp_enqueue_style( ‘mytheme-jssocials-flattheme’, get_template_directory_uri() . ‘/jssocials/jssocials-theme-flat.css’);

wp_enqueue_script(‘mytheme-jssocials-js’, get_template_directory_uri().’/jssocials/jssocials.min.js’, array(‘jquery’)

}

add_action( ‘wp_enqueue_scripts’, ‘jssocials_scripts’ );

Para variar entre los distintos temas que nos ofrece JsSocials, basta con editar en el código el texto ‘jssocials-theme-flat.css’ (del código anterior) por el nombre de cualquiera de los siguientes temas:

• jssocials-theme-flat.css – flat theme
• jssocials-theme-classic.css – classical theme with raised buttons
• jssocials-theme-minima.css – minimalistic theme with logos instead of buttons
• jssocials-theme-plain.css – monochromatic theme

Por último, para que aparezcan los botones de compartir en tus post de wordpress, es necesario editar el archivo content-single.php. Debes ubicar el código dónde quieras que aparezca, por ejemplo yo lo tengo ubicado antes del inicio de la etiqueta ‘<header>’

<div id="share"></div>
<script>
	jQuery( document ).ready( function( $ ) { 
        $("#share").jsSocials({
            shares: ["twitter", "facebook", "googleplus", "linkedin", "pinterest", "whatsapp"],
            showLabel: true,
			showCount: true,
			shareIn: "popup"
        });
	});
</script>

Eso es todo. Si algo no te sale, no dudes en preguntar a través de los comentarios.