Skip to toolbar

Cómo insertar los widgets de las diferentes redes sociales en tu web

Cómo insertar los widgets de las diferentes redes sociales en tu web

Translating…

¿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

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

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».

ustar el widget de LinkedIn en tu web “class =” wp-image-225776 “width =” 750 “height =” 501 “srcset =” https://www.maxcf.es/wp-content/uploads/2019/09 /widget-linkedin-web-1.jpg 750w, https://www.maxcf.es/wp-content/uploads/2019/09/widget-linkedin-web-1-480×321.jpg 480w “tamaños =” (mín. -ancho: 0px) y (ancho máximo: 480px) 480px, (ancho mínimo: 481px) 750px, 100vw “/>

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 etiqueta . 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 , 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, 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, según 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 guarda 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 .

Complemento WP LinkedIn

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

Si prefiere insertar el widget de LinkedIn de tu web a través de un complemento, 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 complementos, 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.

Botón Pin It al desplazar la imagen y publicarla

 Plugins de Pinterest para WordPress: Botón Pin It On Image Hover and Post

Botón Pin It al desplazar la imagen y publicarla te permite mostrar un botón de« Pin it » encima de la imagen de Pinterest de tu web cuando el usuario pase por encima del cursor, de esta manera tendrá la posibilidad de pinear a sus tableros.

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

Botón Pin It de Pinterest para imágenes

 Plugins de Pinterest para WordPress: Botón Pin It de Pinterest para imágenes

Botón Pin It de Pinterest para imágenes te permite la misma funcionalidad que el anterior en lo que respeta a mostrar un botón «Pin it» cuando se pasa el puntero del ratón por encima de la imagen.

Widget Pinterest (Desarrolladores)

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> Barra lateral.

El de debajo deberás pegarlo antes de la etiqueta de cierre .

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

Cómo insertar un vídeo en WordPress


El formato de 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 .

Insertar un vídeo de YouTube en WordPress

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.

Si usas el editor de bloques de WordPress (Gutengerg) , simplemente tienes que añadir el bloque llamado «YouTube» y pegar la URL de tu vídeo.

 Cómo insertar un vídeo de YouTube en WordPress

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 aparecen.

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

 Cómo insertar un vídeo de YouTube en WordPress

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.

Insertar un vídeo de Vimeo en WordPress

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

Si utilizas el editor de Gutenberg, también tienes disponible el bloque de Vimeo para que solo tengas que pegar la URL del vídeo.

 Cómo insertar un vídeo de YouTube en WordPress

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 clientes potenciales.

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 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 presente 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?

Related Articles