Agregar botones de Facebook y Twitter en WordPress
Si deseas aumentar la interacción de tus publicaciones en WordPress, una excelente opción es agregar botones de «Like» de Facebook y «Compartir» de Twitter. En este artículo, te enseñaré cómo hacerlo de forma sencilla y sin necesidad de plugins adicionales.
Vamos a agregar los botones debajo del título de cada publicación. Para esto, editaremos el archivo functions.phpy el archivo de la plantilla de posts.
Agregar el código en functions.php
Edita el archivo functions.phpde tu tema y agrega la siguiente función para generar los botones:
<?php
function addSocialButtons( $content ) {
if ( is_single() ) {
$postUrl = get_permalink();
$postTitle = get_the_title();
$facebookBtn = '<div class="socialButtons">';
$facebookBtn .= '<iframe src="https://www.facebook.com/plugins/like.php?href=' . urlencode( $postUrl ) . '&width=100&layout=button&action=like&size=small&share=false&height=21" width="100" height="21" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>';
$twitterBtn = '<a href="https://twitter.com/share?url=' . urlencode( $postUrl ) . '&text=' . urlencode( $postTitle ) . '" target="_blank" class="twitterShareButton">Compartir en Twitter</a>';
$facebookBtn .= $twitterBtn . '</div>';
return $facebookBtn . $content;
}
return $content;
}
add_filter( 'the_content', 'addSocialButtons' );
Agregar estilos CSS opcionales
Para que los botones se vean bien, agrega estos estilos en style.css de tu tema:
.socialButtons {
margin-bottom: 15px;
display: flex;
gap: 10px;
align-items: center;
}
.twitterShareButton {
display: inline-block;
background-color: #1DA1F2;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
text-decoration: none;
font-size: 14px;
}
.twitterShareButton:hover {
background-color: #0d8ddb;
}
Con este código, los botones aparecerán automáticamente debajo del título de cada post en WordPress. ¡Así de fácil!
