Existe una solución sencilla que ocupa poco espacio para añadir botones de redes sociales a tu web. Como todas las cosas, existen muchas formas de conseguir esto, pero en este caso nos centraremos en el rendimiento y velocidad de carga.
Las redes sociales proporcionan una forma sencilla de añadir los botones redes sociales a tu web, pero la parte negativa es que requieren la carga de varios scripts y hojas de estilo CSS que incrementan el peso de la página web. Y si además queremos tener varios botones (Twitter, Facebook, Google+ y LinkedIn), posiblemente estemos requiriendo la carga de varios scripts más.
Con esta solución, no tendrás la experiencia de las ventanas «pop-up» que suele ser habitual en la mayoría de botones sociales, pero añadiendo el valor «_blank» al atributo target del link, podremos abrir una nueva pestaña en el navegador, que a fin de cuentas produce prácticamente el mismo efecto.
Gracias a que a la mayoría de redes sociales podemos pasarle la URL como atributo, es posible hacer estos botones redes sociales. Aquí sólo vamos a explorar las más usadas: facebook, google+ y twitter.
- Facebook:
-
http://www.facebook.com/sharer.php?u={url} - Google+:
-
https://plus.google.com/share?url={url} - Twitter:
-
https://twitter.com/share?url={url}&text={title}&via={via}
Como verás, se requieren varios argumentos:
- URL (dinámico)
- Title (dinámico)
- Via (Estático)
Existen varias formas de pasar de forma dinámica estos valores a la URL, pero en el caso de WordPress, se tendría que realizar así:
https://twitter.com/share?url=<?php echo esc_url( get_permalink() ); ?>&text=<?php echo get_the_title(); ?>&via=wdweekly
Usamos get_permalink() para conseguir la URL y con es_url() no aseguramos que la URL está limpia de atributos suplementarios. Con get_the_title() obtenemos el título. Podemos añadir argumentos si queremos por ejemplo, controlar de dónde viene el link. Todo lo que tenemos que hacer es añadir el link en la plantilla de la página donde queremos añadir el botón:
<a href="https://twitter.com/intent/tweet?text=<?php echo get_the_title(); ?>&url=<?php echo esc_url( get_permalink() );?>&via=wdweekly" target="_blank" title="twitter">Twitter</a>
Para añadir iconos a este link, lo único que tendremos que hacer es añadir iconos SVG vectoriales al CSS. Por ejemplo:
<a href="https://twitter.com/intent/tweet?text=<?php echo get_the_title(); ?>&url=<?php echo esc_url( get_permalink() );?>&via=wdweekly" target="_blank" title="twitter"> <svg width="56" height="56" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><g fill="none" fill-rule="evenodd"><path d="M.106.183h55.127V55.31H.106V.183z" fill="#00ACED"/><path d="M37.09 21.016c-.728.352-1.504.58-2.325.685.837-.538 1.48-1.387 1.784-2.404-.784.497-1.65.852-2.575 1.06-.735-.85-1.79-1.38-2.95-1.38-2.234 0-4.045 1.946-4.045 4.354 0 .338.035.673.102.988-3.355-.174-6.34-1.914-8.336-4.544-.346.642-.545 1.388-.545 2.19 0 1.506.714 2.848 1.8 3.617-.663-.026-1.287-.21-1.832-.54v.06c0 2.105 1.395 3.862 3.245 4.27-.34.097-.698.143-1.07.143-.258 0-.505-.018-.755-.078.513 1.737 2.008 2.998 3.777 3.023-1.385 1.174-3.128 1.864-5.023 1.864-.328 0-.65-.02-.966-.06 1.79 1.24 3.912 1.964 6.2 1.964 7.44 0 11.51-6.638 11.51-12.39 0-.186-.004-.372-.013-.558.79-.623 1.476-1.39 2.018-2.262" fill="#FFF"/></g></svg></a>
De igual forma procederemos para las otras dos redes sociales:
Facebook:
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo esc_url( get_permalink() ); ?>" target="_blank" title="Facebook"> <svg width="56" height="56" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><g fill="none" fill-rule="evenodd"><path d="M.32.183h55.127V55.31H.32V.183z" fill="#3B5998"/><path d="M32.446 24.287h-3.108V22.25c0-.766.507-.945.865-.945h2.192V17.94l-3.02-.01c-3.352 0-4.114 2.508-4.114 4.114v2.243h-1.938v3.467h1.94v9.81h4.076v-9.81h2.75l.358-3.467" fill="#FFF"/></g></svg></a>
Google:
<a href="https://plus.google.com/share?url=<?php echo esc_url( get_permalink() ); ?>" target="_blank" title="Google+"> <svg width="56" height="56" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg"><title>Google+</title><g fill="none" fill-rule="evenodd"><path d="M.5.18h55.127v55.127H.5V.18z" fill="#DD4B39"/><path d="M28.49 29.307c-.54-.38-1.57-1.31-1.57-1.855 0-.64.18-.954 1.144-1.707.986-.77 1.685-1.855 1.685-3.115 0-1.5-.67-2.963-1.924-3.446h1.89l1.336-.965h-5.966c-2.674 0-5.19 2.026-5.19 4.372 0 2.4 1.822 4.335 4.543 4.335.19 0 .372-.004.552-.017-.176.338-.303.72-.303 1.113 0 .667.358 1.208.81 1.65-.342 0-.673.01-1.032.01-3.314 0-5.864 2.11-5.864 4.297 0 2.155 2.796 3.503 6.108 3.503 3.777 0 5.863-2.143 5.863-4.298 0-1.728-.51-2.763-2.086-3.878zM25.3 26.32c-1.537-.047-2.998-1.72-3.263-3.74-.266-2.017.765-3.562 2.3-3.517 1.538.047 3 1.665 3.264 3.684.265 2.02-.765 3.618-2.302 3.572zM24.7 36.53c-2.29 0-3.944-1.45-3.944-3.19 0-1.707 2.052-3.128 4.342-3.103.534.006 1.032.09 1.484.238 1.243.864 2.134 1.352 2.386 2.338.047.2.073.405.073.615 0 1.742-1.12 3.1-4.34 3.1z" fill="#FFF"/><path d="M34.846 26.494v-2.322h-1.87v2.322h-2.32v1.87h2.32v2.322h1.87v-2.322h2.323v-1.87h-2.324" fill="#FFF"/></g></svg></a>
Deberías obtener algo así:
