Incluir botones de redes sociales en WordPress vía widget

Categorias: Tutoriales, Widgets

La promoción de nuestra página web en redes sociales es uno de los factores clave en la red hoy en día. Al final estamos enviando la inforamción a quien le interesa (por algo nos siguen) y en su mayoría son servicios gratuítos. Vamos a ver cómo podemos incluir botones de redes socialesen nuestro WordPress para crear enlaces directos con las páginas de Facebook, Twitter y demás.

El primer paso: no te asustes. Vas a ver partes en las que se incluye código que vas a tener que modificar para copiarse en una serie de casilleros. Lo más difícil que vas a tener que hacer es pulsar el botón de borrar, copiar y pegar en el código. Prometido.

Tenemos que saber qué botones queremos para poder añadirlos a nuestra página. Depende del diseño que queramos, cual es el público objetivo de nuestra web o algún factor más, nos puede interesar un estilo de botones u otro. Te dejamos un enlace de ejemplo para que puedas descargarte un pack de ejemplo, pero ya sabes que buscando en Google se encuentra todo. Para esta búsqueda, con poner «social media icons» nos aparecerán miles de ellos.

Tras esta descaga y descompresión, subimos los botones seleccionados a nuestra galería multimedia. Accedemos al Escritorio de nuestro WordPress y vamos a la sección Medios > Añadir Nuevo

Desde aquí, seleccionamos la ruta para cargar los ficheros desde nuestro Local o bien arrastramos los ficheritos al panel para que se produzca su carga, si tienes instalado WordPress 4.0 o superior.

Una vez subidos necesitamos saber cual es su URL. Hacemos click en uno de ellos y vemos sus características, entre ellas la URL dnde está alojado esta imagen. La copiamos en un archivo de texto.

Una vez con los datos de las URL de cada uno de los ficheros que queremos subir vamos a la sección Apariencia > Widgets y añadimos un Widget de texto.

Modificaremos el Widget de la siguiente manera:

– Campo Título: podemos dejarlo vacío o situar algo como «Botón Facebook»

– Cuerpo: introduciremos el siguiente código, teniendo en cuenta que variará para cada una de las redes sociales:

<a href=»http://www.facebook.com/TU_PÁGINA_DE_FACEBOOK/»><img src=»URL_DE_LA_IMAGEN_QUE_HEMOS_COPIADO_ANTES» width=»50″ height=»50″></a>

En este ejemplo estamos metiendo la dirección Web de nuestro Facebook (a href), la imágen que hemos subido con el botón de Facebook (img src) y le estamos dando un ancho (width) y un alto (height) de 50 píxeles.

Aquí tienes una imagen que explica lo que hemos hecho:

Pues bien, este widget de texto podemos incluirlo en nuestra página en el apartado que más rabia nos de. Siempre y cuando pueda introducirse un Widget, estos botones podrán ir situados en esa zona. Para situar este texto, vamos a la sección Apariencia > Widgets > Gestionar en el Personalizador (botón en la parte superior).

Desde aquí, hacemos click en Widgets y seleccionamos el widget de texto. Arrastrándolo podemos situarlo en un lugar o en otro, donde más nos convenga. El resultado sería este:

Haciendo click en este botón iremos directamente a la web que hemos configurado, en nuestro caso el Facebook de Hostinet.