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!
Resumen
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
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
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
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.
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:
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.
Si en el espacio de «Pestañas» escribes «Timeline», aparecerá, además de lo de antes, el timeline de tu página.
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.
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«.
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):
Y esta es la URL para poder llevar a cabo el proceso. Dirígete a ella: publish.twitter.com
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).
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).
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.
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».
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).
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)
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)
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)
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)
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
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».
En la pestaña de privacidad haz clic en «Editar tu perfil público».
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».
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.
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.
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.
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
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
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
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
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».
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.
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
