Haz tu blog viral: Botones de compartir para WordPress (SIN plugins)

Los códigos a continuación te permitirán añadir botones de Facebook, Twitter y WhatsApp a tus posts o páginas, de modo que los visitantes puedan compartirlos en estas redes sociales.

Estos códigos usan los iconos de redes sociales que ya vienen integrados en WordPress (relleno de color blanco), por lo que no tendrás que cargar iconos propios o hacer referencia a recursos externos. Son los mismos iconos que usan por defecto algunos plugins, como Menu Image, que sirve para añadir iconos al menú en WordPress.

El resultado que conseguirás debería ser parecido al mostrado a continuación:

El código a continuación debes pegarlo en tu archivo functions.php del child theme de tu blog. Yo lo he probado en el tema Genesis Sample (Genesis Framework). Si no usas Genesis Framework, es posible que debas adaptar este código al tema que estés usando.

Código

/** Add custom social share icons **/

add_action( 'genesis_after_entry_content', 'single_post_social_share' );
function single_post_social_share() {
    if ( is_singular( 'post' ) || is_page( array( '1234', '5678' ) ) ) { ?>

<p style="margin: 5px;"><em>Por favor, comparte este artículo: </em></p>

<div class="social-sharer">

<!-- Facebook Share -->
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink()); ?>&title=<?php echo urlencode(get_the_title()); ?>" target="_blank"><div class="share-facebook"><div class="share-text"><div class="dashicons dashicons-facebook-alt"></div>Facebook</div></div></a>

<!-- Twitter Share -->
<a href="https://twitter.com/intent/tweet?text=<?php echo urlencode(get_permalink()); ?>&title=<?php echo urlencode(get_the_title()); ?>" target="_blank"><div class="share-twitter"><div class="share-text"><div class="dashicons dashicons-twitter"></div> Twitter</div></div></a>

<!-- WhatsApp Share -->
<a href="https://api.whatsapp.com/send?text=<?php echo urlencode(get_the_title() . ' - ' . get_permalink()); ?>" target="_blank"><div class="share-whatsapp"><div class="share-text"><div class="dashicons dashicons-whatsapp"></div>WhatsApp</div></div></a>

</div>

<div style="clear:both"></div>
   <?php }
}

Una vez añadido este código al functions.php del child theme en tu Genesis, los botones se mostrarán al pie del contenido de cada post.

Este es un código que yo uso, pero puedes modificar cosas. Por ejemplo, la línea que comienza por «if» hace que los botones aparezcan en TODOS los posts y también en las páginas que tengan los IDs «1234» y «5678». Hay fragmentos de texto modificables.

Con las clases «share-XXX» que puedes añadir a tu hoja de estilos, puedes dar forma a esos links (por ejemplo, renderizar un botón para cada red social).

La clase «dashicons dashicons-XXX» generará iconos de las redes sociales (en color blanco), para que el link quede más bonito. La ventaja de dashicons es que son iconos que ya vienen integrados en el core de WordPress, así que solo tendrás que llamar a la respectiva clase para llamarlos. Más información aquí.

Estilo

En caso de que no tengas idea de qué estilos añadir a tu CSS, usa estos. Abre la opción «Personalizar» de WordPress y pega este código dond dice «CSS personalizado».

/* BOTONES COMPARTIR
---------------------------------------------------------------------------------*/
.dashicons {
	line-height: inherit !important;
}
.social-sharer {
	display: table;	
}

.share-love {
	float: left;
	height: 42px;
	margin-right: 2px;
	margin-bottom: 2px;
	padding: 0 10px 0 10px;
	border-radius: 2px;
	line-height: 41px;
	background-color: #333;
}

.share-facebook {
	float: left;
	height: 42px;
	margin-right: 8px;
	margin-bottom: 8px;
	padding: 0 10px 0 10px;
	border-radius: 2px;
	line-height: 41px;
	background-color: #3b5998;
}

.share-twitter {
	float: left;
	font-size: 14px;
	height: 42px;
	margin-right: 8px;
	margin-bottom: 8px;
	padding: 0 10px 0 10px;
	border-radius: 2px;
	line-height: 41px;
	background-color: #00aced;
}

.share-whatsapp {
	float: left;
	height: 42px;
	margin-right: 2px;
	margin-bottom: 2px;
	padding: 0 10px 0 10px;
	border-radius: 2px;
	line-height: 41px;
	background-color: #00E676;
}

.share-text,
.share-text-twitter {
	color: #ffffff;
	font-size: 14px;
}

.longtext {
	display: none;
}

.share-facebook:hover,
.share-twitter:hover,
.share-whatsapp:hover {
	opacity: 0.9;
}

@media only screen and (max-width:422px) {
	.share-love {
		display: none;
	}
}

@media only screen and (min-width:724px) and (max-width:1023px) {
	.longtext {
		display: inline;
		color: #ffffff;
		text-align: left;
	}

	.share-text-twitter {
		display: none;
	}
}

@media only screen and (min-width:1140px) {
	.longtext {
		display: inline;
		color: #ffffff;
		text-align: left;
	}

	.share-text-twitter {
	display: none;
	}
}
/* BOTONES COMPARTIR FIN----------------------------------*/

Redes sociales en el menú de WordPress: Menu Image Plugin

Encabezado fijo en WordPress: Cómo desactivar en el tema Genesis Sample

Cómo acelerar tu blog de WordPress fácilmente (Plugins)