Cómo agregar Twitter @ en cualquier lugar de WordPress

Twitter lo lanzó Plataforma @Anywhere No hace mucho tiempo. Esta nueva plataforma integra Twitter en su sitio con solo unas pocas líneas de JavaScript. Permite más tweets, más tráfico, más seguidores, más participación, más usuarios y más información. Ahora puede incrustar un cuadro de tweet en su sitio donde las personas pueden twittear directamente desde su sitio. También convierte todos los nombres de usuario de Twitter en un enlace (@trucoswp). Si habilita la opción de tarjeta flotante, los usuarios verán un cuadro flotante con un botón Seguir e información del usuario. También puede conectarse con los botones de Twitter, seguir a @trucoswp en los botones de Twitter y mucho más. Creemos que esta nueva plataforma jugará un papel muy importante en el futuro de la web a medida que Twitter crezca. En este artículo, compartiremos cómo puede agregar algunos elementos de la plataforma de Twitter en cualquier lugar de su blog de WordPress.

Actualización: Twitter desactivará la API de @anywhere el 6 de diciembre de 2012. Aquí más detalles.

Paso 1: registrar una API

Antes de que pueda agregar la plataforma en cualquier lugar de su sitio, debe hacerlo registrar una API. Aparecerá una página similar a esta:

Una vez registrado, debería recibir una clave API. Lo siguiente que debe asegurarse es que el nivel de permiso esté configurado en Lectura y escritura; de lo contrario, los usuarios no podrían hacer clic en el botón Seguir. Este es un problema técnico de Twitter, pero están trabajando para solucionarlo. Pero para estar seguros, proporcionaremos orientación sobre cómo hacer esto.

Primero haga clic en el enlace http://twitter.com/oauth. En esta página verá la aplicación que registró. Haga clic en el nombre de la aplicación y debería aparecer la página de detalles de la aplicación. Hay un botón llamado «Cambiar la configuración de la aplicación». Haga clic en este botón para ir a la página de edición donde deberá desplazarse hacia abajo hasta la entrada titulada «Tipo de inicio de sesión predeterminado». Cambie esto a «Leer y escribir».

Paso 2: impleméntalo en tu sitio

Como hay numerosas funciones en la plataforma en todas partes, explicaremos cada una de ellas una por una. Lo primero que debe hacer es llamar al JavaScript principal. Twitter recomienda poner este script en el archivo header.php ( entre estos dos códigos ).

<script src="https://platform.twitter.com/anywhere.js?id=YourAPIKey&v=1" type="text/javascript"></script>

Recuerde agregar su clave de API donde dice YourAPIKey en el enlace.

Ahora echemos un vistazo a las funciones individuales que esta plataforma puede ofrecerle.

Vincular automáticamente todos los nombres de usuario de Twitter

Esta función vinculará automáticamente todos los nombres de usuario de Twitter a sus publicaciones y comentarios. Si menciona un nombre de usuario de Twitter en este formato: @trucoswp Vincular automáticamente todos los nombres de usuario de Twitter con una Hovercard

Vincular automáticamente todos los nombres de usuario de Twitter con una Hovercard

Esta función vincula automáticamente todos los nombres de usuario de Twitter que se encuentran en la página y también proporciona una tarjeta de presentación en un efecto de mouseover. Entonces, cuando el usuario de su sitio se desplaza sobre un nombre de usuario como @trucoswp, verá un cuadro flotante como se muestra en el ejemplo anterior. Si hacen clic en el botón Seguir, pueden seguir directamente al usuario desde su sitio web. Para habilitar esta función, simplemente pegue el siguiente código en el encabezado de su sitio debajo del script principal.

<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter.hovercards();
};
</script>

Botones de seguimiento inteligentes para Twitter

Botón de seguimiento inteligente para Twitter

El botón Smart Follow permite a su usuario seguir su cuenta directamente desde su sitio. Puede crear botones para su sitio y usarlos en su publicación o en cualquier otro lugar. Vea el ejemplo en vivo a continuación:

Para agregar este tipo de botón a su sitio, primero pegue el siguiente código en el encabezado de su sitio debajo del script principal:

<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter('#follow-trucoswp').followButton("trucoswp");
};
</script>

En segundo lugar, debe agregar la siguiente etiqueta div donde desea que aparezca este botón:

<div id="follow-trucoswp"></div>

Recuerde cambiar trucoswp a su nombre de usuario; de lo contrario, se mostrará un enlace a nuestra cuenta de Twitter.

Live Tweet Box en su sitio

Puede crear un cuadro de tweet en su sitio que permitirá a los usuarios twittear directamente desde su sitio sin tener que ir a Twitter. Un ejemplo de este cuadro se puede ver a continuación: (Recuerde que si hace clic en tuitear, se tuiteará).

Intente twittear desde el cuadro en vivo de arriba para ver qué tan bien se ve. Le agradeceríamos mucho que tuiteara el contenido predeterminado, así que ayúdenos :)

Como puede ver, este cuadro de tweets en vivo es realmente poderoso. También puede agregar algo de texto Retweet si lo desea con una ligera personalización. Para agregar un cuadro de tweet en vivo en su sitio, primero pegue el siguiente código en el encabezado de su sitio después del script principal:

<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter("#custom-tweetbox").tweetBox({
label: "Live Tweet Box:",
defaultContent: "Everyone should follow @trucoswp for awesome #WordPress tips",
height: 50,
width: 480,
});
};
</script>

Luego agregue el siguiente código donde desea que aparezca el cuadro de tweet en vivo:

<div id="custom-tweetbox"></div>

Vemos que ya hay algunos plugins en el directorio de plugins de WordPress que le permiten usar funciones básicas como la pestaña flotante o el enlace automático. Puede usar esos plugins si lo desea, pero esto es algo tan simple que es mejor ingresar los códigos manualmente.

Si te gustó este artículo, retuitee. Si nos perdimos algo, avísanos en los comentarios.

Recurso adicional:

Documentación de Twitter Anywhere
Plugin simple para Twitter Connect (Gran plugin de un autor de apoyo – Gracias Otto)

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *