WordPress y las redes sociales: botones estáticos para compartir para un sitio web más rápido

Hoy en día, un sitio web no puede ser lo suficientemente rápido. Particularmente porque la velocidad de carga ahora constituye un factor de clasificación para Google, optimizar el rendimiento es una tarea importante. Hay una serie de problemas de rendimiento. Uno de los más grandes es el «botón de compartir» a menudo popular de las grandes redes sociales. Estos suelen cargar una cantidad considerable de JavaScript desde sus servidores domésticos, lo que infla el sitio web innecesariamente. Más a menudo de lo que nos gustaría, los botones se «cuelan» porque el código requerido no se puede cargar desde el servidor tan rápido como es necesario. Esto puede retrasar significativamente la carga de toda la página. Hay alternativas, sin embargo. En este artículo, le mostraremos cómo integrar WordPress y las redes sociales. Crearemos botones para compartir para las redes sociales más importantes como elementos estáticos y los agregaremos a su sitio web con tecnología de WordPress sin usar JavaScript.

Botones de compartir estáticos en dos variantes

Hoy te presentamos los botones en dos variantes, una con y otra sin contador. Además, también le mostramos la forma más fácil de incluir estos botones en tu tema de wordpress. Para eso, creamos una función de WordPress, que luego se implementa en functions.php del tema de WordPress en cuestión. De esa manera, los botones se puede mostrar en cualquier posición deseada con una etiqueta PHP simple y pequeña.

El CSS necesario

Agregue el siguiente CSS necesario para los botones al style.css archivo de su tema (wp-content/themes/your theme).

.share-buttons { border-top: 1px dashed #ddd; border-bottom: 1px dashed #ddd; margin: 10px 0; padding: 20px 0; position: relative; line-height: 1;}
.share-buttons a { text-decoration: none; margin-right: 20px; border-radius: 3px; text-align: center; color: #fff; padding: 5px 15px 5px 15px;}
.share-buttons a:hover { text-decoration: none; }
.share-buttons a.twitter {background: #5DB5DE;} 
.share-buttons a.facebook {background: #3D62B3;} 
.share-buttons a.googleplus {background: #D34836;} 
.share-buttons a.googleplus:hover {background: #f75b44}
.share-buttons a.facebook:hover {background: #4273c8} 
.share-buttons a.twitter:hover {background: #32bbf5}

El código necesario para el contador

Para mantener los archivos del tema limpios y ordenados, necesitamos dos funciones PHP simples, que se pueden implementar con una sola línea de código PHP detrás de la posición deseada en el tema.

Abre el functions.php de su tema de WordPress e incluya el siguiente código al final del archivo:

/**
* Static Share Buttons without Counter
*
*/
function ah_share_buttons() {
?>
<div class="share-buttons">
<a class="twitter" title="Recommend on Twitter" href="https://twitter.com/intent/tweet?source=webclient&amp;text=<?php echo rawurlencode(strip_tags(get_the_title())) ?> <?php echo urlencode(get_permalink($post->ID)); ?>" target="blank" rel="nofollow"><span>Twitter</span></a>
<a class="facebook" title="Recommend on Facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Facebook</span></a>
<a class="googleplus" title="Recommend on Google+" href="https://plusone.google.com/_/+1/confirm?hl=de&amp;url=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Google+</span></a>
</div>
<?php }

/**
* Static Share Buttons with Counter
*
*/
function ah_share_buttons_zaehler() {
?>
<div class="share-buttons">
<a class="facebook" title="Recommend on Facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Facebook <?php $URL = get_permalink();function get_shares($URL) { $json_string = file_get_contents('http://graph.facebook.com/?ids=" . $URL); $json = json_decode($json_string, true); return intval( $json[$URL]["shares'] );} ?><?php echo get_shares($URL); ?></span></a>
<a class="twitter" title="Recommend on Twitter" href="https://twitter.com/intent/tweet?source=webclient&amp;text=<?php echo rawurlencode(strip_tags(get_the_title())) ?> ? <?php echo urlencode(get_permalink($post->ID)); ?>" target="blank" rel="nofollow"><span>Twitter <?php $URL = get_permalink();function get_retweets($URL) { $SBstring = file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url=" . $URL); $SBarray = json_decode($SBstring, true); return intval( $SBarray["count'] );} ?><?php echo get_retweets($URL);?></span></a>
<a class="googleplus" title="Recommend on Google+" href="https://plusone.google.com/_/+1/confirm?hl=de&amp;url=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Google+ <?php $URL = get_permalink();function get_plusone($url) { $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, "https://clients6.google.com/rpc"); curl_setopt($curl, CURLOPT_POST, 1); curl_setopt($curl, CURLOPT_POSTFIELDS, '[{"method":"pos.plusones.get","id":"p","params":{"nolog":true,"id":"' . $url . '","source":"widget","userId":"@viewer","groupId":"@self"},"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]'); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-type: application/json')); $curl_results = curl_exec ($curl); curl_close ($curl); $json = json_decode($curl_results, true); return intval( $json[0]['result']['metadata']['globalCounts']['count'] );} ?><?php echo get_plusone($URL); ?></span></a>
</div>
<?php }

El resultado: así es como se ven los botones de compartir estáticos

Los botones sin contador

Los botones con contador

El código con el formato CCS anterior da como resultado botones agradables y prominentes, que se cargan rápidamente y hacen su trabajo a la perfección. En comparación con los botones originales, es menos probable que se pasen por alto y, por lo tanto, es más probable que se utilicen. El aspecto se puede modificar fácilmente, por supuesto. Si prefieres el diseño de los botones de compartir originales de las redes sociales, también puedes pegar gráficos (que hay que crear u obtener) aquí, para que no haya diferencia visual con los botones oficiales. Sin embargo, esto solo funciona para botones sin contador. Naturalmente, puede omitir el formato CSS y usar los botones como simples enlaces de texto, pero esto le quita la ventaja de la prominencia visual. Los lectores sólo pueden hacer clic en lo que ven.

El uso dentro de un tema de WordPress

Finalmente, los botones de compartir deben colocarse en la posición deseada en su tema de WordPress. Para esto, creamos dos pequeñas etiquetas PHP, de las cuales la preferida solo tiene que copiarse en el lugar apropiado. Hay otras formas de integrar los botones en el tema, para que los cambios permanezcan incluso después de una actualización del tema. Uno sería escribir un complemento, el otro la creación de un tema secundario. Sin embargo, analizar estas dos opciones estaría más allá del alcance de este artículo, por lo que solo presento la integración a través de la etiqueta php directamente en el tema. El enfoque de un tema secundario sería idéntico, tan pronto como se haya creado el tema secundario, es decir.

Integración a través de la etiqueta PHP

Abre el single.php archivo de su tema de WordPress y busque el siguiente pasaje:

Ahora agregue debajo o arriba del pasaje marcado la siguiente etiqueta para mostrar botones sin contador:

<?php echo ah_share_buttons(); ?>

Para mostrar los botones de compartir con un contador, necesita la siguiente etiqueta PHP:

<?php echo ah_share_buttons_zaehler(); ?>

encima de the_content() los botones se muestran encima del contenido, debajo de la etiqueta de contenido, la pantalla estará debajo del contenido. Él the_content()- la invocación no siempre se encuentra directamente dentro de single.php. Es perfectamente posible que haya otro archivo dentro de su tema que esté cargado en single.php y contenga el el contenido().

enlaces relacionados

• Escribir un complemento – WordPress Codex
• Temas secundarios – Código de WordPress
• Pingdom-Tools – Medición del tiempo de carga

Conclusión

Los botones estáticos son llamativos, atractivos y funcionan perfectamente. El usuario agradecerá el tiempo de carga reducido debido a la cantidad de JavaScript omitido. La diferencia se puede medir con una herramienta de prueba de velocidad como Pingdom, si ya ha eliminado cualquier obstáculo adicional en el camino.

(dpe)