Click to Tweet, ¿cómo usarlo en tu Web?

Publicado por JC

Desde hace tiempo vemos como en muchos blogs aparece contenido que se puede compartir via Twitter gracias a la estrategia Click to Tweet (o clic para tuitear). Los autores suelen usar citas o frases que llamen la atención para animar al usuario a que comparta esa entrada o página.

A continuación vamos a ver varias formas de implementar esta estrategia en tu página Web.

1. A través de la web Click to Tweet

Esta Web te proporciona en su versión gratuita hasta 5 enlaces normales (los cuales incluyen estadísticas y te acortan las URLs) e infinitos enlaces básicos. La pongo como primera opción porque es la manera más fácil para mi gusto de crear contenido para compartir por Twitter en cualquier página Web.

El funcionamiento es muy sencillo: Introduces el contenido que quieres que sea tuiteado, le das a generar enlace y solo tienes que pegar el código que te facilitan en tu página Web. Hay que tener en cuenta que si usas un editor tinyMCE o similar, tienes que pegarlo en la pestaña texto/HTML, no en la visual.

2. Usando un plugin

En el caso de WordPress recomiento el siguiente plugin:

Better Click to Tweet

Este plugin es usado por mucha gente (el diseño te debe sonar) y tiene muy buenas valoraciones. Además, es muy fácil de usar y añade el icono de Twitter en el editor de WordPress.

Por otra parte he visto el código fuente y es un plugin que yo instalaría. Está bien programado, elimina las opciones de la base de datos al desinstalarlo, etc.

Esta opción puede ser la más recomendable para los usuarios de WordPress que quieran olvidarse de copiar código y prefieran usar un plugin que se lo haga todo.

3. Creando nuestro propio código

Es mi opción favorita porque no dependemos de plugins ni de las limitaciones de la Web Click To Tweet. Además si tenemos unos mínimos conocimientos de HTML y CSS podemos personalizarlo como queramos.

A continuación dejo unas plantillas de ejemplo por si las quieres usar y explico qué debes cambiar para usarlas en tu página Web.

Plantilla Click to Tweet 1

<p>
    <a href="https://twitter.com/intent/tweet?url=https://josecarlosroman.com/click-to-tweet&text=¡Aprende cómo compartir contenido de tu blog en Twitter!&via=jcdotnet" target="_blank" rel="noopener">
        <img src="https://josecarlosroman.com/wp-content/uploads/2019/07/twitter-64.png" alt="Aprende cómo compartir contenido de tu blog en Twitter"/>
    </a>
    Aprende cómo compartir contenido de tu blog en Twitter
</p>

El resultado de incluir esta plantilla es el siguiente:

Aprende cómo compartir contenido de tu blog en Twitter
Aprende cómo compartir contenido de tu blog en Twitter

Plantilla Click to Tweet 2

<p>
    <a onMouseOver="this.style.color='#00aced'" onMouseOut="this.style.color='gray'" href="https://twitter.com/intent/tweet?url=https://josecarlosroman.com/click-to-tweet&text=¡Aprende como compartir de forma sencilla contenido de tu blog en Twitter!&via=jcdotnet" target="_blank" rel="noopener" style="text-decoration:none; color:gray;">
       <img src="https://josecarlosroman.com/wp-content/uploads/2019/07/twitter-64.png" alt="Aprende cómo compartir de forma sencilla contenido de tu blog en Twitter" />
       Aprende cómo compartir de forma sencilla contenido de tu blog en Twitter
    </a>
</p>

En esta plantilla hemos añadido algunos estilos. El resultado es el siguiente:

Aprende cómo compartir de forma sencilla contenido de tu blog en TwitterAprende cómo compartir de forma sencilla contenido de tu blog en Twitter

Plantilla Click to Tweet 3

<p>
    Aprende cómo compartir de forma sencilla contenido de tu blog en Twitter 
    <a onMouseOver="this.style.color='#1DA1F2'" onMouseOut="this.style.color='gray'" href="https://twitter.com/intent/tweet?url=https://josecarlosroman.com/click-to-tweet-&text=¡Aprende cómo compartir de forma sencilla contenido de tu blog en Twitter!&via=jcdotnet" target="_blank" rel="noopener" style="text-decoration:none; color:gray;">
        Clic para tuitear
    </a>
</p>

En esta plantilla usamos el enlace para publicar en Twitter en Clic para tuitear. El resultado es el siguiente:

Aprende cómo compartir de forma sencilla contenido de tu blog en Twitter Clic para tuitear

Plantilla Click to Tweet 4

<p style="border: 1px solid gray; border-radius: 5px; padding:30px 10px;">
    <a href="https://twitter.com/intent/tweet?url=https://josecarlosroman.com/click-to-tweet&text=¡Aprende cómo compartir de forma sencilla contenido de tu blog en Twitter!&via=jcdotnet" target="_blank" rel="noopener" style="text-decoration:none">
        Aprende cómo compartir de forma sencilla contenido de tu blog en Twitter
    </a>
    <a onMouseOver="this.style.color='#1DA1F2'" onMouseOut="this.style.color='gray'" href="https://twitter.com/intent/tweet?url=https://josecarlosroman.com/click-to-tweet&text=¡Aprende cómo compartir de forma sencilla contenido de tu blog en Twitter!&via=jcdotnet" target="_blank" rel="noopener" style="text-decoration:none; float: right; color: gray">
        Clic para tuitear
    </a>
</p>

En esta plantilla creamos una caja y tanto el texto como Clic para tuitear publican en Twitter. El resultado es el siguiente:

Aprende cómo compartir de forma sencilla contenido de tu blog en TwitterClic para tuitear

 

Plantilla Click to Tweet 5

<p style="border: 1px solid gray; border-radius: 5px; padding:30px 10px;">
    Aprende cómo compartir de forma sencilla contenido de tu blog en Twitter
    <a onMouseOver="this.style.color='#1DA1F2'" onMouseOut="this.style.color='gray'" href="https://twitter.com/intent/tweet?url=https://josecarlosroman.com/click-to-tweet&text=¡Aprende cómo compartir de forma sencilla contenido de tu blog en Twitter!&via=jcdotnet" target="_blank" rel="noopener" style="text-decoration:none;float:right;color:gray;">
        Clic para tuitear
    </a>
</p>

En esta plantilla creamos una caja y solo Clic para tuitear tiene un enlace para publicar en Twitter. El resultado es el siguiente:

Aprende cómo compartir de forma sencilla contenido de tu blog en TwitterClic para tuitear

 

URL para publicar en Twitter

La URL que usamos para publicar nuestro contenido es la siguiente:

https://twitter.com/intent/tweet?url=NUESTRA_URL&text=NUESTRO_TEXTO_A_COMPARTIR

Y si queremos añadir el usuario al final:

https://twitter.com/intent/tweet?url=NUESTRA_URL&text=NUESTRO_TEXTO_A_COMPARTIR&via=USUARIO_TWITTER

Con un enlace a esa URL ya tenemos lo que queremos. El resto es trabajar con el look and feel.

Si quieres usar una de las plantillas de arriba recuerda cambiar la URL, el texto y el usuario de Twitter. Respecto a los parámetros pasados te recomiendo que no uses espacios en blanco ni tildes. Por ejemplo pasaríamos:

%C2%A1Aprende+c%C3%B3mo+compartir+de+forma+sencilla+contenido+de+tu+blog+en+Twitter%21

en vez de:

¡Aprende cómo compartir de forma sencilla contenido de tu blog en Twitter!

 

Conclusión

Si te sientes cómodo creando la URL para publicar en Twitter te recomiendo que crees tu propio código: ¡Tus Click to Tweet serán únicos!

En caso contrario yo me iría a por una de las dos primeras opciones. Y si usas WordPress el plugin que recomiendo te gustará 🙂

Comparte esta entrada en las redes sociales si te ha gustado. En ese sentido, si te gustan los botones que uso para compartir puedes echarle un vistazo a esta entrada.

Como siempre puedes contactar conmigo para enviarme cualquier duda, comentario o sugerencia.