Compartir noticias en redes sociales
Cuando tienes un blog, una de las funcionalidades más habituales es permitir que el lector pueda compartir una noticia fácilmente en redes sociales.
Hace unos años implementé esta funcionalidad utilizando PHP, Bootstrap y algunos estilos CSS propios. El objetivo era sencillo: generar los enlaces de compartir a partir de la URL de la noticia y conseguir que los botones se adaptasen correctamente a pantallas pequeñas.
El concepto sigue siendo perfectamente válido, aunque algunas de las plataformas y APIs de compartición han cambiado con el tiempo. Por eso, además de conservar el ejemplo original, voy a aprovechar para explicar algunos detalles que conviene tener en cuenta actualmente.
Nota sobre el código original
El ejemplo pertenece a una implementación antigua basada en Bootstrap y en las URLs de compartición disponibles en aquel momento. La idea general sigue siendo válida, pero no todas las plataformas mantienen actualmente los mismos endpoints.
Obtener la URL de la noticia
Lo primero que necesito es conocer la URL de la página que quiero compartir.
En el código original utilizaba:
$get_uri = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
Esto concatena el nombre del servidor con la ruta solicitada. Por ejemplo:
misitio.com/blog/noticia/editar-estilos-en-bootstrap
La idea es correcta, aunque hay un pequeño detalle que conviene mejorar: SERVER_NAME y REQUEST_URI no forman necesariamente una URL absoluta y tampoco es recomendable construir URLs públicas confiando ciegamente en las cabeceras del servidor.
Si estoy trabajando dentro de WordPress, por ejemplo, utilizaría directamente:
$url = get_permalink();
De esta forma obtengo la URL canónica de la publicación actual sin tener que reconstruirla manualmente.
Si se trata de PHP fuera de WordPress, puedo construir la URL a partir de la configuración de mi aplicación o de una variable de entorno definida para el dominio.
Crear los enlaces para compartir
Una vez que tengo la URL, puedo construir los enlaces que utilizarán las diferentes plataformas.
Por ejemplo, para Facebook:
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u=' . urlencode($url);
Y para una plataforma que permita pasar el texto y la URL como parámetros:
$title = 'Título de la noticia';
$shareURL = 'https://example.com/share?text='
. urlencode($title)
. '&url='
. urlencode($url);
Es importante utilizar urlencode() al introducir una URL o un texto dentro de otra URL. De lo contrario, determinados caracteres pueden romper los parámetros de la dirección.
El HTML de los botones
Con los enlaces preparados, puedo generar los botones:
<div class="listaCompartir">
<span>Compartir</span>
<a
id="compFacebook"
class="btnCompartir"
href="..."
target="_blank"
rel="noopener noreferrer"
aria-label="Compartir en Facebook"
>
Facebook
</a>
<a
id="compWhatsapp"
class="btnCompartir"
href="..."
target="_blank"
rel="noopener noreferrer"
aria-label="Compartir por WhatsApp"
>
WhatsApp
</a>
</div>
En mi implementación original utilizaba iconos de Font Awesome y las clases de Bootstrap para distribuir los botones.
También utilizaba target="_blank" para abrir el servicio de compartición en una nueva pestaña. Cuando se utiliza esta opción, es recomendable acompañarla de:
rel="noopener noreferrer"
Es un pequeño detalle, pero evita problemas innecesarios cuando se abren páginas externas en una nueva pestaña.
Los estilos
En aquella versión utilizaba una combinación de Bootstrap y CSS propio.
El CSS principal era similar a este:
.listaCompartir {
padding-top: 20px;
}
.btnCompartir {
display: inline-block;
padding: 16px 20px;
text-align: center;
text-transform: uppercase;
font-size: 15px;
color: #fff;
text-decoration: none;
cursor: pointer;
transition: opacity .25s ease-in-out;
}
.btnCompartir:hover,
.btnCompartir:focus {
color: #fff;
opacity: .9;
}
#compWhatsapp {
background: #6dd373;
}
#compFacebook {
background: #3b5998;
}
La idea era mantener los botones en línea cuando había suficiente espacio disponible y hacer que ocuparan todo el ancho disponible cuando la pantalla fuese más pequeña.
Responsive: el problema de las pantallas pequeñas
Aquí estaba una de las partes importantes del ejemplo original.
En escritorio podía colocar los botones horizontalmente sin demasiados problemas. En dispositivos pequeños, sin embargo, intentar mantenerlos todos en una misma línea podía provocar que el diseño se comprimiese demasiado o terminase desbordándose.
Por eso utilizaba media queries para cambiar su comportamiento según el ancho de la pantalla.
Una versión más sencilla actualmente sería:
.btnCompartir {
display: inline-block;
width: auto;
}
@media (max-width: 767px) {
.btnCompartir {
display: block;
width: 100%;
margin-bottom: 10px;
}
}
De esta forma, en pantallas grandes los botones pueden aparecer uno junto a otro, mientras que en móviles pasan a ocupar una línea completa.
Ya no necesito definir dos media queries diferentes para los rangos 320px–767px y 768px–991px. Puedo plantear simplemente el comportamiento que quiero modificar a partir de un determinado ancho.
¿Y qué ocurre con Twitter?
Aquí es donde el ejemplo original ha quedado más desactualizado.
En aquella época utilizaba el endpoint:
https://twitter.com/intent/tweet
Actualmente Twitter se ha convertido en X, aunque el sistema de publicación mediante URL puede seguir dependiendo de la compatibilidad que mantenga la plataforma con los endpoints heredados.
Por eso, si estoy actualizando hoy este código, no asumiría que una URL antigua de compartición seguirá funcionando indefinidamente. Conviene comprobar siempre la documentación y el comportamiento actual de cada plataforma antes de incorporarla a una aplicación.
Un detalle importante con WhatsApp
El código original utilizaba un enlace con el esquema:
whatsapp://send?text=...
Este tipo de enlace intentaba abrir directamente la aplicación de WhatsApp instalada en el dispositivo.
El problema es que los esquemas personalizados dependen del dispositivo, del navegador y de que la aplicación correspondiente esté instalada.
Por eso, actualmente es preferible utilizar un mecanismo de compartición que tenga en cuenta tanto dispositivos móviles como navegadores de escritorio, en lugar de asumir que el esquema whatsapp:// estará disponible.
Una implementación más limpia
Si quiero mantener el ejemplo lo más sencillo posible, puedo separar completamente la generación de las URLs de la presentación de los botones.
Por ejemplo:
<?php
$url = get_permalink();
$title = get_the_title();
$facebookURL =
'https://www.facebook.com/sharer/sharer.php?u='
. urlencode($url);
?>
<div class="listaCompartir">
<span>Compartir</span>
<a
class="btnCompartir"
href="<?php echo esc_url($facebookURL); ?>"
target="_blank"
rel="noopener noreferrer"
>
Facebook
</a>
</div>
En este caso, si estoy dentro de WordPress, también puedo utilizar sus funciones de escape para evitar introducir directamente contenido sin filtrar en el HTML.
El resultado original
La implementación que publiqué originalmente quedaba aproximadamente así en escritorio:
Y en dispositivos móviles el objetivo era que los botones pasasen a mostrarse verticalmente:
¿Qué ha cambiado desde entonces?
La idea fundamental del artículo sigue siendo exactamente la misma, pero algunas cosas han cambiado bastante desde que escribí el código original.
- Las plataformas sociales han cambiado sus sistemas de compartición.
- Twitter pasó a convertirse en X.
- Los esquemas personalizados como
whatsapp://no deberían darse por garantizados. - Bootstrap ha evolucionado y las clases utilizadas en versiones antiguas ya no son necesariamente aplicables a proyectos actuales.
- Actualmente puedo conseguir un diseño responsive con mucho menos CSS.
- Es recomendable escapar correctamente las URLs y los textos generados dinámicamente.
Por tanto, no se trata simplemente de copiar y pegar el código de 2019 en un proyecto actual. La técnica sigue siendo válida, pero la implementación concreta depende de las plataformas y herramientas que esté utilizando.
Conclusión
Compartir una noticia desde un blog no requiere una implementación especialmente compleja. Básicamente necesito conocer la URL de la publicación, construir la dirección de compartición correspondiente y presentarla mediante un enlace o botón.
Lo realmente importante es no quedarse únicamente con el código: las plataformas sociales cambian sus sistemas, las librerías evolucionan y determinadas técnicas que funcionaban perfectamente hace unos años pueden dejar de ser la mejor opción.
El ejemplo original me sirvió precisamente para resolver una necesidad muy concreta: permitir compartir las noticias y conseguir que los botones funcionasen correctamente tanto en escritorio como en dispositivos móviles.
Y esa idea sigue siendo perfectamente válida.
Visitas: 566
Automation & Data Specialist | Web Development | Data Processing & Integration