Hace unas semanas que hemos descubierto que en el repositorio de plugins de WordPress hay una versión mejorada del plugin «Click to Tweet» que incluye todas las actualizaciones que nosotros programamos y alguna más: Better Click To Tweet.

El plugin Click to Tweet nos permite introducir un recuadro con un texto para tuitear dentro de una entrada de WordPress.

El problema que nosotros le veíamos al plugin era que por un lado no era posible traducirlo directamente, porque su código fuente no estaba preparado para ser traducido y por otro lado que incluía siempre «powered by CoSchedule» con enlace (lo cual está en contra de las normas del repositorio de plugins de WordPress, por eso lo eliminaron en una versión 1.3, además de no quedar estético).

Aunque les mandamos a los creadores de Click to Tweet diversos emails con nuestra versión con la posibilidad de traducir el plugin y con nuestras mejoras, nunca obtuvimos respuesta alguna.

Nosotros en su día no quisimos publicar el plugin modificado, aunque probablemente lo deberíamos de haber hecho.

Hasta ahora estábamos enviándolo por email a todo aquel que nos lo pidiese a través de un comentario en: Click to Tweet: Cambiar el aspecto de este plugin WordPress.

Ahora os recomendamos descargar del repositorio de WordPrees el plugin «Better Click To Tweet« que incorpora la posibidad de traducirlo (incluye versión en castellano), además de haber arreglado la función que cuenta los caracteres con caracteres no romanos, además de utilizar el API oficial de WordPress para los Shortcodes (esto significa que es más seguro y será compatible con futuras versiones de WordPress).

OJO al actualizar de Click To Tweet a Better Click To Tweet

Lo único negativo de este plugin es que cambia el shortcode para insertar el recuadro con el texto para tuitear. El shortcode de Better Click To Tweet tiene el siguiente formato:

Mientras que en el plugin Click To Tweet tiene el siguiente formato:

Esto puede ser un problema si tienes instalado el Click To Tweet y lo has usado en las entradas y ahora cambias a Better Click To Tweet.

¿Cómo actualizar desde Click To Tweet a Better Click To Tweet?

OJO: Esto no te aplica si nunca has usado Click To Tweet. Solo si ya has usado Click To Tweet y actualizas a Better Click To Tweet.

Lo más sencillo (si se sabe utilizar) es realizar una sustitución del ShortCode dentro de la base de datos a través de PhpMyAdmin. OJO: Imprescindible hacer una copia de seguridad antes de hacer cualquier cambio.

Suponiendo que las tablas tienen el prefijo por defecto de WordPress (wp) la sentencia SQL a ejecutar que a nosotros nos ha funcionado es la siguiente:

Edición apariencia Better Click To Tweet

Os dejamos aquí las instrucciones para cambiar su apariencia (son las mismas que en su día publicamos para Click To Tweet pero adaptadas a las clases CSS de Better Click To Tweet; pero cambia el prefijo tm por bctt):

El código CSS hay que pegarlo en el recuadro de vuestro tema para incluir CSS personalizado.

Alinear bien el texto del recuadro

A nosotros en el Better Click To Tweet la primera línea de texto a tuitear nos sale desplazada a la derecha y no está alineada con la siguiente línea (suponiendo que haya dos líneas). Para solucionar esto:

.bctt-click-to-tweet .bctt-ctt-text a { padding-left:0px; padding-right:0px; }

Para editar el color de la fuentede de Click to Tweet:

.bctt-click-to-tweet .bctt-ctt-text a { color: #5798CD; }

Se cambia #5798CD al color elegido. Si no sabéis como generar el código de color, os puede ayudar www.colorpicker.com que os generará el código de color a poner detrás del la #.

Para editar el tamaño de la fuente de Click to Tweet:

.bctt-click-to-tweet .bctt-ctt-text a { font-size: 20px; }

Solo hay que cambiar el número al tamaño deseado.

Cambiar color y tamaño de la fuente de Click to Tweet:

Estas dos líneas también se pueden combinar para tener un código más eficiente:

.bctt-click-to-tweet .bctt-ctt-text a { color: #5798CD; font-size: 20px; }

Para editar el fondo del recuadro de Click to Tweet:

.bctt-click-to-tweet { background-color: #eeeeee; }

Otra vez hay que cambiar el código detrás de la # por el color deseado.

Para editar el borde de Click to Tweet:

.bctt-click-to-tweet { border: 1px solid #eeeeee; }

Esto nos crea un borde de 1 píxel, de trazo sólido con el color que sigue a la #. Si se incrementa el número, el borde se hará más grueso. Si no queremos un trazo sólido, sino rayado o punteado, hay que sustituir solid por dashed o dotted. Si queremos cambiar el color, al igual que en los ejemplos anteriores, hay que sustituir el código de color detrás de la # por el deseado.

Cambiar fondo y borde de Click to Tweet:

Si cambiamos el fondo y el borde, se puede combinar en una única instrucción:

.bctt-click-to-tweet { border: 1px solid #eeeeee; background-color: #eeeeee; }

Esperamos que os haya parecido interesante.

Créditos imágenes: ShutterStock (AtomicBHB), Shutterstock (lculig), ShutterStock (Bloomua)