Cómo agregar Twitter en cualquier lugar de WordPress

Twitter lanzó su plataforma @anywhere no hace mucho tiempo. Esta nueva plataforma integra twitter en su sitio con algunas líneas de JavaScript. Permite más tweets, más tráfico, más seguimientos, más interacció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 (@wpbeginner). Si habilita la opción de hovercard, los usuarios verán un cuadro de desplazamiento con un botón de seguimiento e información del usuario. También puede crear conectarse con los botones de twitter, seguir @wpbeginner en los botones de twitter y mucho más. Creemos que esta nueva plataforma jugará un papel 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 cualquier lugar de Twitter en su blog de WordPress..

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

Paso 1: Registro de una API

Antes de poder agregar la plataforma en cualquier lugar de su sitio, debe registrar una API. Se te dirigirá a una página que se verá así:

Una vez que se registre, debe recibir una clave API. Lo siguiente que debe asegurarse es que el nivel de permiso esté establecido en Lectura y Escritura, de lo contrario, los usuarios no podrían hacer clic en el botón Seguir. Esto es un problema técnico con Twitter, pero están trabajando para solucionarlo. Pero para mantenernos seguros, le proporcionaremos instrucciones sobre cómo hacerlo..

Primero haga clic en el enlace http://twitter.com/oauth. En esta página, verá la aplicación que se registró. Haga clic en el nombre de la aplicación y debería ir a la página de detalles de la aplicación. Hay un botón llamado "Editar 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 el elemento etiquetado como "Tipo de acceso predeterminado". Cambia esto a "Leer y escribir".

Paso 2: Implementándolo en tu sitio.

Debido a que existen numerosas características en la plataforma en cualquier lugar, explicaremos cada una de ellas una por una. Lo primero que debes hacer es llamar al JavaScript principal. Twitter recomienda que coloques este script en tu header.php archivo (entre estos dos códigos).

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

Ahora veamos las características individuales que esta plataforma puede hacer por usted..

Vincular automáticamente todos los nombres de usuario de Twitter

Esta función vinculará automáticamente todos los nombres de usuario de Twitter en tus publicaciones y comentarios. Si mencionas un nombre de usuario de Twitter en este formato: @wpbeginner << It will automatically be linked to the appropriate twitter account. This can save you a lot of time if you write posts with mentions to twitter users. To add this feature, you simply paste the following code in your site's header, after the main script. [php] twttr.anywhere(onAnywhereLoad); function onAnywhereLoad(twitter) twitter.linkifyUsers(); ; [/php] This will link all twitter usernames mentioned in your body tag excluding the links, scripts, iframes, text area, title tags, and other buttons.

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

Esta función enlaza automáticamente todos los nombres de usuario de Twitter que se encuentran en la página, y también proporciona una hovercard con un efecto de mouseover. Entonces, cuando el usuario de su sitio lleve el mouse a un nombre de usuario como @wpbeginner, verá un hoverbox 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.

  twttr.anywhere (onAnywhereLoad); función onAnywhereLoad (twitter) twitter.hovercards (); ;  

Botones inteligentes para seguir en Twitter

El botón de seguimiento inteligente le permite a su usuario seguir su cuenta directamente desde su sitio. Puede crear botones para su sitio y utilizarlos 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 de la secuencia de comandos principal:

  twttr.anywhere (onAnywhereLoad); function onAnywhereLoad (twitter) twitter ('# follow-wpbeginner'). followButton ("wpbeginner"); ;  

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

Recuerde cambiar wpbeginner a su nombre de usuario, de lo contrario mostrará un enlace de seguimiento a nuestra cuenta de twitter.

Live Tweet Box en su sitio

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

Intenta twittear desde el cuadro en vivo de arriba para ver lo genial que es. Realmente agradeceríamos si tuiteas el contenido predeterminado, por lo que nos ayuda

Bueno, como puedes ver, esta caja de tweets en vivo es realmente poderosa. Incluso puede agregar texto de Retweet allí 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 de la secuencia de comandos principal:

  twttr.anywhere (onAnywhereLoad); funcion onAnywhereLoad (twitter) twitter ("# custom-tweetbox"). tweetBox (label: "Live Tweet Box:", defaultContent: "Todo el mundo debería seguir @wpbeginner para obtener consejos impresionantes #WordPress", altura: 50, ancho: 480 ,); ;  

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

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

Si te ha gustado este artículo, por favor, retweetea. Si nos perdimos algo, por favor háganoslo saber en los comentarios..

Recurso adicional:

Documentación de Twitter Anywhere
Sencillo complemento de conexión de Twitter (gran complemento de un autor de apoyo - Gracias Otto)