Better Click to Tweet: Plugin mejorado y publicado

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.

Click to Tweet: Recuadros con texto para tuitear directamente desde 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).

Powered by

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:

Better Click To Tweet Shorcode

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

Click To Tweet Shorcode

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:

Actualizar desde Click To Tweet a Better Click To Tweet

Twitter

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; }

Click To Tweet

Esperamos que os haya parecido interesante.

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

3 comentarios en “Better Click to Tweet: Plugin mejorado y publicado

  1. Angel

    Muchas gracias por vuestro trabajo. Es fantástico.
    Una consulta, anteriormente al tuitear se podía acortar el enlace a compartir, ¿Se puede hacer ahora?
    Gracias por todo y feliz 2015.

    Responder
  2. Ben Meredith

    Gracias!

    I’ve also update the plugin now to be fully customizable. Check out my customization guide (Solamente ingles, lo siento!)

    Ben

    Responder
    1. Hablando de Internet (Administrador)

      Hi Ben, Thanks for the info.

      TRADUCCIÓN: Ben Meredith (el autor de Better Click to Tweet) nos comenta que ha actualizado el plugin y que ahora permite personalizar directamente como se visualizan los tweets sin tener que hacer las modificaciones que os comentábamos en el post. Simplemente hay que copiar el archivo bcttstyle.css que encontráis en /wp-content/plugins/better-click-to-tweet/assets/css a la raíz del directorio de subida de vuestros archivos en WordPress (normalmente /wp-content/uploads directory). Y una vez copiado el archivo lo podéis modificar para cambiar la visualización del texto a tuitear.

      Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.