Compartir noticias en redes sociales

Tiempo de lectura estimado: 2 minutos

Compartir noticias en redes sociales

Tienes un blog montado y listo para que lo vea todo el mundo pero no tienes la opción de poder compartir tus noticias en redes sociales?. Vamos a ver cómo hacerlo y que sea responsive también.

Para este sencillo tutorial nos hará falta entender unos conceptos básicos de PHP.

Lo primero será obtener la URL completa de la noticia.

$get_uri=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];

Concatenamos el host con la url. De esta forma tendriamos una url como la siguiente:

misitio.com/blog/noticia/editar-estilos-en-bootstrap

Ahora que ya tenemos guardada en nuestra variable la URL de cada noticia, vamos a crear los enlaces de las redes sociales para poder compartirlas.

<div class="container">

<div class="row">

<div class="col-md-6 col-md-offset-3">

COMPARTIR

<div class="listaCompartir">

<?php
//Obtenemos la url
$title=$titulo_noticia;
$get_uri=$_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"];

$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$get_uri;
$twitterURL = 'https://twitter.com/intent/tweet?text='.$title.'&amp;url='.$get_uri;

echo '<a id="compWhatsapp" class="btnCompartir col-md-3" href="whatsapp://send?text=<?php echo $get_uri;?> data-action="share/whatsapp/share"><i class="fa fa-whatsapp" aria-hidden="true"></i></a>';
echo '<a id="compFacebook" href="'.$facebookURL.'" class="btnCompartir col-md-4" target="_blank"><i class="fa fa-facebook"></i></a>';
echo '<a id="compTwitter" href="'.$twitterURL.'" class="btnCompartir col-md-4" target="_blank"><i class="fa fa-twitter"></i></a>';
?>

</div>

</div>

</div>

</div>

 

Como observamos, hacemos uso de las clases de Bootstrap y algunas creadas por nosotros para darle estilo a los botones.

Veamos el código CSS:

.listaCompartir {
padding-top: 20px;
}

.btnCompartir {
cursor: pointer;
/*En bloque cuando no puedan estar en linea los 3*/
display: inline-block;
padding: 16px 20px;
text-align: center;
text-transform: uppercase;
font-size: 15px;
color: #FFF;
opacity: 1;
background-color: transparent;
-webkit-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;

}

.btnCompartir:active,
.btnCompartir:focus,
.btnCompartir:hover {
color: #FFF;
opacity: 0.9;
}
/*COLORES DE LAS RISTINTAS REDES SOCIALES*/

#compWhatsapp.btnCompartir {
background: #6DD373;
}

#compFacebook.btnCompartir {
background: #3B5998;
}

#compTwitter.btnCompartir {
background: #55ACEE;
}

 

Con lo que tendríamos algo como esto:

 

 

 

Queda bien, verdad?. Pero nosotros siempre vamos un paso por delante. Y aunque en versiones de escritorio se vea bien, en móvil ha de verse igual de bien. Algo como esto:

 

 

 

 

 

 

 

 

Vamos a crear dos media queries para conseguir el efecto deseado.

/*Hacemos que se muestren en bloque cuando la resolucion sea más pequeña */
@media(min-width:768px) and (max-width:991px) {
.btnCompartir {
/*Ya no es inline block*/
display: block;
margin-bottom: 10px;
padding: 20px;
/*Desplazamos a la izquierda para que no tope con el menu lateral e igualamos*/
margin-left:60px;
}
}

@media(min-width:320px) and (max-width:767px) {
.btnCompartir {
display: block;
margin-bottom: 10px;
padding: 20px;
/*Desplazamos a la izquierda para que no tope con el menu lateral e igualamos*/
margin-left:60px;
}
}

Y con esto, ya tendremos creados nuestros botones para compartir en redes sociales.

¡Ya no hay excusas!.