¬ŅQuieres mostrar el feed de las diferentes redes sociales en tu web? En este post encontrar√°s mini tutoriales para aprender c√≥mo se pone tu timeline de Twitter, una publicaci√≥n de tu Fan Page, tu perfil de LinkedIn, el feed de tu cuenta de Instagram, tus pines de Pinterest o bien c√≥mo insertar v√≠deos de YouTube o Vimeo en tu web WordPress.

Sin duda alguna, las Redes Sociales vinieron para quedarse y es importante darle un buen uso a nivel profesional para potenciar tu imagen de marca, ya sea comercial para tu negocio o para una marca personal.

Una muy buena forma de hacerlo es insertando las diferentes redes sociales en las que tengas presencia en tu web para mostrar a los usuarios tu actividad en ellas.

De modo que, he preparado este mega tutorial con mini tutoriales para que sepas c√≥mo insertar los feed de las redes sociales en el dise√Īo de tu p√°gina web.

¬°Vamos a ello!

Cómo insertar el plugin de Facebook en tu web


Antes de nada, decirte que cabe la posibilidad de insertar tu página de Facebook sin plugins; más abajo te explico cómo por si no quieres utilizar plugin y quieres pasar directamente a ello saltando esta parte. Y si no, vamos con 3 plugins de Facebook para mostrar tu Fan Page en tu web WordPress.

Custom Facebook Feed

Cómo insertar el plugin de Facebook en tu web: Smash Balloon Social Post Feed

Custom Facebook Feed es un plugin gratuito con versión de pago.

En su versión gratuita permite mostrar el feed de manera personalizada, pero no muestra las fotos y los vídeos de los post, por lo que recomiendo su versión de pago donde tendrás, entre otras, estas opciones:

  • Muestra feeds de cualquier fan page de Facebook, incluso de m√ļltiples p√°ginas.
  • Los motores de b√ļsqueda pueden rastrear el feed y agregar valor SEO a tu web.
  • Feed completamente personalizable: color de fondo, tipograf√≠a, tama√Īo, etc.
  • Te permite agregar tu propio CSS personalizado.
  • Mostrar y ocultar partes de la publicaci√≥n, foto de perfil y nombre de autor.

Simple Like Page Plugin

Cómo insertar el plugin de Facebook en tu web: Simple Like Page Plugin

Simple Like Page Plugin es un plugin gratuito m√°s sencillo que el anterior y bastante completo, ya que, mediante widget creado por el plugin,  te permite mostrar:

  • A cuantas personas les gusta tu Fan Page y cu√°les de sus amigos les gusta ya dicha p√°gina.
  • Las publicaciones recientes.
  • P√°gina de eventos.
  • Bot√≥n de me gusta para seguir tu p√°gina sin necesidad de entrar.

Easy Facebook Like Box

Cómo insertar el plugin de Facebook en tu web: Easy Facebook Like Box

Con Easy Facebook Like Box tienes muchas opciones para mostrar tu Fan Page. Con este plugin podr√°s:

  • Mostrar el feed personalizado de tu Fan Page.
  • Poner el bot√≥n me gusta para que puedan hacer clic sin entrar.
  • Mostrar tu p√°gina de Facebook con un PopUp personalizado.

Widget Facebook con Developers

Aquí tienes otra opción para insertar tu Fan Page en tu web de manera gratuita con la herramienta Developers de Facebook.

Facebook pone a disposición de sus usuarios esta herramienta llamada Facebook for Developers (Facebook para desarrolladores) y aunque parece que vaya a ser complicada de usar, es muy sencilla, no es necesario unos altos conocimientos de código ni mucho menos.

El enlace directo es developers.facebook.com/docs/plugins y te explico en esta imagen las opciones disponibles una vez aterrizas en la p√°gina.

Cómo insertar el plugin de Facebook en tu web: developers

Tienes la posibilidad de insertar en tu WordPress:

  • El timeline
  • Bot√≥n «Me gusta»
  • Bot√≥n «Guardar»
  • Bot√≥n «Compartir»
  • Una publicaci√≥n concreta

Ahora te explicaré cómo poner el timeline de tu Fan Page en tu web.

Una vez est√°s en la pantalla de Facebook Developers, cuyo enlace te he dejado m√°s arriba, haz clic en «Plugin de p√°gina», a continuaci√≥n ver√°s esta pantalla:

Cómo insertar el plugin de Facebook en tu web: developers

Introduce la URL de tu Fan Page en el espacio indicado para ello y podrás visualizar cómo se vería en tu web.

En este caso aparece la portada, amigos a los que le gusta la página, botón me gusta y enviar mensaje.

Cómo insertar el plugin de Facebook en tu web: developers

Si en el espacio de «Pesta√Īas» escribes «Timeline», aparecer√°, adem√°s de lo de antes, el timeline de tu p√°gina.

Cómo insertar el plugin de Facebook en tu web: developers

Puedes escribir tambi√©n «events» y «messages» separados por coma si quieres que se aparezcan los botones de eventos y mensajes con la opci√≥n de pulsar en ellos para que se muestren en tu web sin necesidad de ir a la p√°gina de Facebook.

Cómo insertar el plugin de Facebook en tu web: developers

Configura la visualización con las opciones que te da, como son la anchura, altura, usar encabezado corto, ocultar portada, mostrar caras de amigos y adaptar anchura al contenedor del plugin.

Una vez lo tengas a tu gusto, haz clic en el bot√≥n azul que dice «obtener c√≥digo«.

Cómo insertar el plugin de Facebook en tu web: developers

Copia y pega el primer código en el archivo del tema de tu web, después de la tag <body> y guarda cambios. Esto sólo lo tendrás que hacer una vez, si ya lo habías hecho antes, perfecto, ya no hace falta más. Y si no:

Apariencia > Editor de temas > Archivos del tema > header.php (se encuentra en el men√ļ de la derecha) > debajo de <body> y guardas cambios.

Si te da alg√ļn error y no te permite guardar cambios, deber√°s hacerlo a trav√©s del cPanel de tu hosting.

Ahora copia y pega el segundo código en un widget HTML en tu sidebar, sidebar page o footer y ya lo tienes.

Insertar el widget de Twitter en tu web


Para a√Īadir tu timeline de Twitter en tu web es tan f√°cil como insertar un widget HTML en la barra lateral. Te explico c√≥mo.

Lo primero de todo es abrir tu cuenta de Twitter (en esta imagen tienes un resumen con los pasos a seguir por los que te guiaré, punto por punto):

Insertar el widget de Twitter en tu web

Y esta es la URL para poder llevar a cabo el proceso. Dirígete a ella: publish.twitter.com

Insertar el widget de Twitter en tu web

Una vez estés en esta pantalla, introduce la URL de lo que desees mostrar, ya que existen varias opciones: URL de tu perfil o URL de un tweet específico. Te explico cada opción.

Si introduces la URL de tu perfil de Twitter, podr√°s:

  • Mostrar tu timeline (embedded timeline).
  • Crear botones twitter (bot√≥n de seguir o bot√≥n de menci√≥n).
Insertar el widget de Twitter en tu web

Si eliges la opci√≥n de «Embedded Timeline», podr√°s visualizar el timeline de tu cuenta de Twitter, y haciendo clic en «set customization options», puedes personalizarlo a tu gusto seg√ļn las opciones disponibles (tama√Īo en p√≠xeles, light o dark y el color de hashtag y enlace).

Insertar el widget de Twitter en tu web

Igualmente, si haces clic en «Twitter Buttons», te saldr√° una ventana donde tendr√°s que elegir entre «Follow Button» o «Mention Button».

Y una vez elijas, tendr√°s la posibilidad de customizarlo para mostrarlos en tu web, seg√ļn las opciones disponibles que te muestro en esta imagen.

Insertar el widget de Twitter en tu web

Y si introduces el enlace de un tweet, podr√°s insertar y mostrar en tu web √ļnicamente dicho tweet. Para personalizar su visualizaci√≥n haz clic en «set customization options».

Insertar el widget de Twitter en tu web

El siguiente paso, despu√©s de personalizar seg√ļn las opciones disponibles, es hacer clic en «update» y copiar el c√≥digo generado y pegarlo en un tu web con HTML o con un widget HTML personalizado que puedes colocar en el footer o en la sidebar.

Apariencia > Widgets > HTML personalizado > Sidebar o Sidebar page (o en las dos) o también en Footer.

Así es como quedan en mi web las tres opciones (timeline, botón seguir y botón de mención).

Insertar el widget de Twitter en tu web

Pero espera, que a√ļn hay m√°s. Aqu√≠ te dejo un breve v√≠deo donde explico unas opciones extra que quiz√° te puedan interesar.

Plugins para mostrar tu feed de Instagram en WordPress


Te traigo un listado de los 5 mejores plugins de Instagram para wodpress actualizados y con muy buenas rese√Īas que son perfectos para usarlos en tu web. Todos ellos permiten mostrar el feed de tu Instagram pero a√Īado algunas caracter√≠sticas extra que cabe destacar en cada uno de ellos.

10Web Social Photo Feed (WD Instagram Feed)

Plugins para mostrar tu feed de Instagram en WordPress: 10Web Social Photo Feed

10Web Social Photo Feed es un plugin gratuito con opciones de pago y podr√°s, entre otras cosas:

  • Dise√Īar feeds personalizados.
  • Crear galer√≠as.
  • Crear un widget para la barra lateral.
  • Mostrar comentarios.
  • Tener control sobre las im√°genes que no queremos que se visualicen.

Smash Ballon Social Photo Feed (Instagram Feed)

Plugins para mostrar tu feed de Instagram en WordPress: Instagram Feed

Con el plugin gratuito Instagram Feed puedes:

  • Personalizar el aspecto de tu feed a mostrar.
  • Utilizar y mostrar publicaciones de varias cuentas diferentes.
  • Incluir bot√≥n de «Seguir».

WP Social Feed Gallery (Insta Gallery)

Plugins para mostrar tu feed de Instagram en WordPress: Insta Gallery

Insta Gallery es un plugin gratuito con opciones de pago y muy sencillo de usar que te permite:

  • Mostrar galer√≠as y carruseles.
  • Personalizar el feed.
  • A√Īadir un bot√≥n de «Cargar m√°s».
  • Mostrar «Me gusta».

Social Slider Widget (Instagram Slider Widget)

Plugins para mostrar tu feed de Instagram en WordPress: Social Slider Widget

Instagram Slider Widget es un plugin gratuito tiene como particularidad el poder crear un widget deslizable de las publicaciones que elijas. Otras características son:

  • Personalizar el feed.
  • Posibilidad de mostrar im√°genes de un Hashtag.
  • Ordenar las im√°genes por fecha, popularidad, al azar, etc.

Enjoy Instagram feed with Widget and Shortcode on WordPress website

Plugins para mostrar tu feed de Instagram en WordPress: Enjoy Instagram feed

Enjoy Instagram feed es un plugin freemium que tiene, entre otras, las siguientes características:

  • Mostrar las im√°genes en modo carrusel o cuadr√≠cula.
  • Personalizar el feed.
  • Dise√Īo responsive.

Incrustar el widget de LinkedIn en tu web


Aqu√≠ te ense√Īar√© a poner tu perfil de LinkedIn en tu web (WordPress) con un widget o bien mediante plugin.

Puedes usar la forma que te sea más cómoda, pero te diré que con el widget solamente podrás poner una insignia de tu perfil donde si tus usuarios hacen clic les llevará a tu perfil en dicha red social. En cambio, con el plugin podrás mostrar más cosas además de ésta.

Widget LinkedIn: crear tu insignia

 Crear la insignia de tu perfil de LinkedIn es muy sencillo, vamos paso por paso.

En tu cuenta de LinkedIn, en el feed, arriba a la derecha haz clic en tu foto donde pone «Yo» y en el desplegable pincha en «Ajustes y privacidad».

Incrustar el widget de LinkedIn en tu web

En la pesta√Īa de privacidad haz clic en «Editar tu perfil p√ļblico».

Incrustar el widget de LinkedIn en tu web

En la parte lateral derecha, abajo del todo ver√°s un apartado donde pone «Insignia del perfil p√ļblico», haz clic en «Crear una insignia».

Incrustar el widget de LinkedIn en tu web

En esta pantalla tienes que crear tu insignia y para ello el primer paso para que se muestre en tu web es copiar el script y pegarlo en la cabecera de tu tema.

Incrustar el widget de LinkedIn en tu web

Igual que con el widget de Facebook pero en la tag </head>. Te digo cómo.

En el panel de administrador de tu web WordPress, en:

Apariencia > Editor de temas > Archivos del tema > header.php (se encuentra en el men√ļ de la derecha) > Y pegas el c√≥digo despu√©s de la etiqueta </head>, despu√©s guardas cambios y listo.

[Antes de hacerlo, recuerda crear un tema hijo en WordPress]

Ya sabes que si te da alg√ļn error y no te permite guardar cambios deber√°s hacerlo a trav√©s del cPanel de tu hosting o, si lo prefieres, puedes hacerlo con un truco que te ense√Īar√© m√°s abajo para no tener que usar c√≥digo y que te resulte m√°s f√°cil.

Ahora solo tienes que crear tu insignia y copiar el código y pegarlo, dependiendo de la que hayas elegido, en tu web.

Incrustar el widget de LinkedIn en tu web
Incrustar el widget de LinkedIn en tu web

Si quieres que se muestre en una p√°gina de tu web (tu p√°gina de inicio, por ejemplo) debes saber que dependiendo del maquetador visual que utilices se har√° de una forma u otra.

Para que se muestre en la barra lateral (blog y entradas) simplemente lo insertas con un widget HTML personalizado. Ya sabes:

Apariencia > Widgets > HTML personalizado > Sidebar o Sidebar page (o en las dos) o en el Footer.

Trucazo EXTRA para el widget de LinkedIn

Si no te quieres complicar con el código existe una forma muy sencilla de poner tu insignia y es que, una vez creada, hagas una captura de pantalla y guardes la foto en tu ordenador. Después, en tu web, solo tienes que insertar un widget de imagen con enlace a tu perfil de LinkedIn.

Lo malo es que la imagen pierde calidad pero es un recurso por si no te aclaras con el código.

Incrustar el widget de LinkedIn en tu web

Así quedaría en tu página de blog, que considero que es una de las más importantes en una web, puesto que es donde aportas contenido de valor al usuario y atrae tráfico orgánico.

Si todavía no tienes uno, te dejo un post donde hablo de la importancia que tiene el blog para tu estrategia de marketing.

Plugin WP LinkedIn

Incrustar el widget de LinkedIn en tu web: plugin WP LinkedIn

Si prefieres insertar el widget de LinkedIn de tu web a través de un plugin, con WP LinkedIn tendrás la posibilidad de:

  • Mostrar tu perfil.
  • Mostrar recomendaciones.
  • Personalizar plantillas.
  • Mostrar actualizaciones de tu red.

Plugins de Pinterest para WordPress


Es posible mostrar tu cuenta de Pinterest en tu web mediante plugins, o bien creando widgets para que tus usuarios vean tu actividad. Ya sea pines, tableros, tu perfil, etc.

A continuación, te dejo dos plugins sencillos para Pinterest.

Pin It Button On Image Hover And Post

Plugins de Pinterest para WordPress: Pin It Button On Image Hover And Post

Pin It Button On Image Hover And Post te permite mostrar un bot√≥n de «Pin it» encima de la imagen de Pinterest de tu web cuando el usuario pase por encima el cursor, de esta manera tendr√°  la posibilidad de pinear a sus tableros.

Adem√°s, podr√°s mostrar tus pines y tu perfil de Pinterest.

Pinterest Pin It Button For Images

Plugins de Pinterest para WordPress: Pinterest Pin It Button For Images

Pinterest Pin It Button For Images te permite la misma funcionalidad que el anterior en lo que respecta a mostrar un bot√≥n «Pin it» cuando se pasa el puntero del rat√≥n por encima de la imagen.

Widget Pinterest (Developers)

En Pinterest también disponemos de la herramienta Developers, al igual que en Facebook. De esta manera, podemos crear widgets para colocar en la sidebar o footer de nuestra web con WordPress.

Estes es el enlace para acceder al creador de widgets de Pinterest Developers es: developers.pinterest.com/tools/widget-builder

Widget Pinterest para web

Aqu√≠ tienes varias opciones seg√ļn la pesta√Īa que elijas para luego mostrar en tu web, como son:

  • Crear un bot√≥n de «Guardar».
  • Crear un bot√≥n de «Seguir».
  • Mostrar un Pin en concreto.
  • Mostrar un Tablero concreto.
  • Mostrar tu perfil.

Por ejemplo, para mostrar todos tus pines, tienes que elegir la pesta√Īa de «perfil».

Widget Pinterest para web

Una vez est√©s aqu√≠, pones la URL de tu perfil de Pinterest y eliges el tama√Īo de visualizaci√≥n del widget entre las opciones que hay. As√≠, puedes previsualizar c√≥mo se ver√° en tu web. Debajo tienes los c√≥digos generados para copiarlos y pegarlos en tu web.

Widget Pinterest para web

El de arriba debes pegarlo en la parte que quieras que se vea de tu web. En el caso de que quieras que se muestre en la barra lateral deber√°s hacerlo en un widget HTML.

Apariencia > Widgets > HTML Personalizado > Sidebar.

El de debajo deber√°s pegarlo antes de la etiqueta de cierre </body>.

Apariencia > Editor de temas > Archivos del tema > header.php (se encuentra en el men√ļ de la derecha) > debajo de </body> y guardas cambios.

Cómo insertar un vídeo en WordPress


El formato v√≠deo uno de los m√°s demandados actualmente, as√≠ que te recomiendo a√Īadir v√≠deos en tu web, tanto en las p√°ginas como en las entradas.

Si lo a√Īades en un post, enriquece el contenido y adem√°s aumenta el tiempo de permanencia y, por tanto, disminuye la tasa de rebote.

A continuación, te voy a explicar cómo insertar vídeos de YouTube y Vimeo en tu web.

Cómo insertar un vídeo de YouTube

Para insertar un vídeo de YouTube en un WordPress, la opción más fácil es copiar la URL del vídeo (en Youtube) y pegar en la parte que queramos de la entrada.

En YouTube, en la pantalla del vídeo > botón derecho del ratón > copiar url del vídeo.

Otra forma de insertar un vídeo de YouTube en una web es copiar el código iframe y pegarlo en WordPress, en el lugar donde queramos que aparezca.

Para ello, en YouRube, abajo del vídeo, haz clic en compartir.

Cómo insertar un vídeo de YouTube

Como ves, aparecen opciones de compartir en redes sociales, insertar y copiar la URL (aquí también tienes la opción de copiar la URL y pegarla directamente en tu entrada de WordPress).

Haz clic en insertar:

Cómo insertar un vídeo de YouTube

Después, en la ventana que aparece tienes el código que debes copiar y además algunas opciones que puedes personalizar, como elegir el tiempo por el que quieres que empiece el vídeo y otros ajustes de inserción.

Cómo insertar un vídeo de YouTube

Copias el c√≥digo y lo pegas en tu entrada de WordPress en la pesta√Īa HTML y despu√©s vuelves a visual. Como digo, lo m√°s sencillo es hacerlo de la primera forma, pero no est√° de m√°s conocer ambas opciones.

Cómo insertar un vídeo de Vimeo

Insertar un vídeo de Vimeo en WordPress es diferente, pero también muy sencillo.

Puedes copiar la URL del vídeo y pegarla directamente en la entrada / página, o bien haciendo clic en el avión de papel que aparece en la pantalla a la derecha.

Cómo insertar un vídeo de Vimeo

En la siguiente ventana tienes diferentes opciones:

  • V√≠nculo (para copiar la URL).
  • Medios sociales (para compartir en redes sociales).
  • Enviar por correo electr√≥nico (para compartir por email).
  • Insertar (para copiar el c√≥digo iframe).
Cómo insertar un vídeo de Vimeo

En la opci√≥n insertar tienes el c√≥digo iframe, lo copias y lo pegas en WordPress como HTML. F√°cil ¬Ņno?

Ten en cuenta que todo esto sirve de poco si el usuario accede a nuestras RRSS y no tenemos una imagen profesional. Por eso, es muy importante tener los perfiles de tus redes sociales bien optimizados para proyectar una buena imagen de marca y crear impacto en tus potenciales clientes.

Aquí te dejo un post para saber cómo optimizar tus perfiles en Redes Sociales y tener una imagen más profesional.

Espero que estos tutoriales te hayan servido de ayuda para insertar tus redes sociales en tu web, poder mostrar tu actividad y que el usuario tenga en un clic cualquier opción que le presentes con respecto a tus perfiles sociales.

Y t√ļ, ¬Ņconoces otra forma de insertar los widgets de las diferentes redes sociales? ¬ŅTe ha gustado este tutorial?

Portada: social media account / Shutterstock

Summary
Cómo insertar los widgets de las diferentes redes sociales en tu web
Article Name
Cómo insertar los widgets de las diferentes redes sociales en tu web
Description
Aprende cómo insertar los widgets de las diferentes redes sociales en tu web con este tutorial: Facebook, LinkedIn, Pinterest, Twitter, YouTube y Vimeo.
Author
Publisher Name
Max Camu√Īas
Publisher Logo