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

Autor: Antonio Sala

Fecha: 10/09/2019

驴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

2 Comentarios

  1. Antonio Sala

    Muchas gracias Max por invitarme a escribir en tu blog.

    Quer铆a matizar una cosa del v铆deo de las opciones extra de el widget de Twitter:

    Cuando digo que no se puede mandar un DM en Twitter a alguien a no ser que el follow sea rec铆proco no es del todo cierto, digamos que as铆 est谩 por defecto pero se puede cambiar dicha opci贸n siempre que sea para uno mismo. Me explico:

    Si modificas la opci贸n, podr谩s RECIBIR mensajes de cualquiera, independientemente del follow, pero no podr谩s mandarlo (siempre que no os sig谩is) si la otra persona no tiene activada dicha opci贸n.

    Para modificar la opci贸n:

    M谩s opciones>Configuraci贸n y privacidad>Privacidad y seguridad>Mensajes directos>Recibir mensajes de cualquiera

    Un abrazo!

    Responder
    • Max Camu帽as

      隆Much铆simas gracias a ti, Antonio!

      No solo te has currado un post brutal, sino que tambi茅n te molestas en aclarar y puntualizar el contenido.

      Un abrazo grande

      Responder

Enviar un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Para cumplir con el nuevo RGPD y que tus datos est茅n a salvo, debes leer y aceptar mi pol铆tica de privacidad. Tus datos ser谩n guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

Soy Max Camu帽as y te doy la bienvenida a mi blog (mi casa).

Por aqu铆 hablo sobre los temas que me apasionan: WordPress, Marketing, Social Media o Blogging.

Me encanta ayudar a otras empresas a marcas a crear el dise帽o de su web desde cero.

隆M脕S SOBRE M脥!

masterclass
C脫MO PLANIFICAR TU P脕GINA WEB PARA QUE TU NEGOCIO BRILLE
隆accede gratis!