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
botones para compartir JsSocials

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.