{"id":8662,"date":"2019-06-06T21:25:24","date_gmt":"2019-06-06T21:25:24","guid":{"rendered":"https:\/\/blog.hostinger.io\/com-ar-tutoriales\/?p=8662"},"modified":"2023-08-03T20:44:45","modified_gmt":"2023-08-03T18:44:45","slug":"iconos-redes-sociales-wordpress","status":"publish","type":"post","link":"\/ar\/tutoriales\/iconos-redes-sociales-wordpress","title":{"rendered":"C\u00f3mo agregar \u00edconos de redes sociales en WordPress"},"content":{"rendered":"<p>Si tienes presencia en internet por alg&uacute;n medio adicional a tu sitio web, &iquest;por qu&eacute; no mostr&aacute;rselo a tus visitantes? En este articulo veremos c&oacute;mo agregar &iacute;conos de redes sociales en WordPress.<\/p><p>Al mostrarle tus redes sociales a los visitantes, ellos podr&aacute;n seguirte, y la mejor manera de lograrlo es poner &iacute;conos de redes sociales en tu sitio web. Como no ocupan mucho espacio puedes colocarlos en cualquier lugar sin alterar el dise&ntilde;o general del sitio.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-anadir-iconos-de-redes-sociales-en-wordpress-video\">C&oacute;mo a&ntilde;adir iconos de redes sociales en WordPress &ndash; Video<\/h2><p>Si prefieres un video, te invitamos a ver nuestro tutorial sobre c&oacute;mo agregar botones de perfiles sociales en WordPress. <\/p><figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"C&oacute;mo A&ntilde;adir Iconos de Redes Sociales en WordPress para Compartir (2024)\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/NlWkSqleeXI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure><p>\n\n\n\n  <div class=\"youtube-shortcode\">\n    <div class=\"row\">\n      <div class=\"col-7 col-sm-8 d-flex align-items-center\">\n        <img decoding=\"async\" class=\"channel-logo\" src=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/youtube-channels\/hostinger-spain.jpg\" alt=\"youtube channel logo\">\n        <div class=\"d-flex flex-column justify-content-between\">\n          <span class=\"slogan d-none d-sm-block\">Suscribite \u00a1Para m\u00e1s videos educativos!<\/span>\n          <span class=\"channel-name\">Academia de Hostinger<\/span>\n                    <\/div>\n      <\/div>\n      <div class=\"col-5 col-sm-4 d-flex align-items-center justify-content-end\">\n        <a class=\"subscribe-button\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" href=\"http:\/\/www.youtube.com\/channel\/UCYmKCu1yo_L0fqKe3U_oMnw?sub_confirmation=1\">\n          <img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/icons\/youtube.svg\" alt=\"subscribe\">\n          <span>Suscribite<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n\n    \n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-como-lo-hago\">&iquest;C&oacute;mo lo hago?<\/h2><p>Hay dos formas de hacerlo: agregando los &iacute;conos de redes sociales manualmente o con un plugin de &iacute;conos de WordPress proporcionado por terceros.<\/p><p>Si decides utilizar los plugins, aqu&iacute; hay una lista de nuestros favoritos que puedes usar:<\/p><ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/simple-social-icons\/\" target=\"_blank\" rel=\"noopener\">Simple Social Icons<\/a> (interfaz limpia y simple)<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/social-media-button\/\" target=\"_blank\" rel=\"noopener\">Social Media Buttons<\/a> (permite cambiar el color de tus &iacute;conos)<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/social-icons-widget-by-wpzoom\/\" target=\"_blank\" rel=\"noopener\">Social Icons Widget by WPZOOM<\/a> (puedes ajustar el tama&ntilde;o y el &aacute;rea de relleno o padding, buscar &iacute;conos por palabras clave, diferentes estilos para elegir, etc.)<\/li>\n<\/ul><p>Usar un plugin es una excelente opci&oacute;n para los principiantes, ya que no requiere mucha habilidad t&eacute;cnica de tu parte. Sin embargo, la mayor&iacute;a no incluyen otras redes sociales menos populares. Si no encuentras una opci&oacute;n en el plugin para agregar tu perfil social en particular, deber&aacute;s hacerlo manualmente.<\/p><p>Si bien enfrentar&aacute;s algo de codificaci&oacute;n, te aseguramos que agregar &iacute;conos de redes sociales a WordPress no es para nada complicado. Entonces veamos c&oacute;mo agregar f&aacute;cilmente &iacute;conos de redes sociales a tu sitio de WordPress.<\/p><h2 class=\"wp-block-heading\" id=\"h-1-elige-un-icono-de-redes-sociales\">1. Elige un &iacute;cono de redes sociales<\/h2><p>Encontrar el &iacute;cono que necesitas no es dif&iacute;cil en absoluto. Una b&uacute;squeda r&aacute;pida en Google te mostrar&aacute; muchas opciones.<\/p><p>\n\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Consejo profesional<\/h4>\n                    <p>Ten en cuenta que no puedes simplemente usar &iacute;conos que pertenecen a otros. Eso podr&iacute;a llevarte a infringir las leyes de derechos de autor.<\/p>\n                <\/div>\n\n\n\n<\/p><p>Una soluci&oacute;n para esto es filtrar la b&uacute;squeda de im&aacute;genes de Google seg&uacute;n los derechos de uso. Ve a <strong>Im&aacute;genes <\/strong>-&gt;<strong> Herramientas <\/strong>-&gt;<strong> Derechos de uso <\/strong>-&gt;<strong> Etiquetadas para reutilizaci&oacute;n<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/06\/imagenes-para-reutilizacio%CC%81n.png\" alt=\"Imagen de b&uacute;squeda de Google filtrada con etiquetado para reutilizar los derechos de uso.\" class=\"wp-image-8663\"><\/figure><\/div><p>Ahora, Google solo mostrar&aacute; los resultados que puedes usar libremente. Puedes seleccionar cada &iacute;cono que te guste o simplemente descargar paquetes de &iacute;conos todo en uno.<\/p><p>Algunos sitios como <a href=\"https:\/\/www.iconfinder.com\/\" target=\"_blank\" rel=\"noopener\">Iconfinder<\/a> te ofrecen paquetes de &iacute;conos gratuitos con muchas variedades para que los uses.<\/p><p>Una vez que encuentres los &iacute;conos, desc&aacute;rgalos y s&uacute;belos a la biblioteca de medios de WordPress. Ve a <strong>Medios<\/strong> -&gt; <strong>A&ntilde;adir nuevo<\/strong>, y a&ntilde;ade los &iacute;conos all&iacute;.<\/p><p>Es mejor si utilizas el cargador m&uacute;ltiple para poder cargar todos los &iacute;conos a la vez.<\/p><h2 class=\"wp-block-heading\" id=\"h-2-anadir-widget-y-configurar-html\">2. A&ntilde;adir widget y configurar HTML<\/h2><p>Ahora tienes que agregar el widget que contiene los &iacute;conos de redes sociales en tu sitio.<\/p><p>En el panel de WordPress, ve hasta <strong>Apariencia<\/strong> -&gt; <strong>Widgets<\/strong>. Luego, agrega el widget &ldquo;HTML personalizado&rdquo; arrastr&aacute;ndolo a la secci&oacute;n de encabezado, barra lateral o pie de p&aacute;gina.<\/p><p>En el t&iacute;tulo puedes escribir &ldquo;Redes sociales&rdquo;, por ejemplo, y luego copia y pega el siguiente c&oacute;digo:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"false\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div&gt;&lt;a href=\"http:\/\/instagram.com\/username\"&gt;&lt;img style=\"margin:5px\" src=\"[path to your icon]\" width=\"30\" height=\"30\" alt=\"Instagram\"&gt;&lt;\/a&gt;&lt;a href=\"http:\/\/facebook.com\/username\"&gt;&lt;img style=\"margin:5px\" src=\"[path to your icon]\" width=\"30\" height=\"30\" alt=\"Facebook\"&gt;&lt;\/a&gt;&lt;a href=\"http:\/\/youtube.com\/user\/username\" &gt;&lt;img style=\"margin:5px\" src=\"[path to your icon]\" width=\"30\" height=\"30\" alt=\"YouTube\"&gt;&lt;\/a&gt;&lt;\/div&gt;<\/pre><p>\n\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Consejo profesional<\/h4>\n                    <p>&iquest;Notas la palabra&nbsp;username&nbsp;(nombre de usuario) y los corchetes distribuidos a lo largo del c&oacute;digo? Debes reemplazarlos por los nombres de tus perfiles de redes sociales y la URL directa de tu imagen de &iacute;cono.<\/p>\n                <\/div>\n\n\n<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"413\" src=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/06\/copiar-enlace-de-icono-redes-sociales-1024x413.png\" alt=\"Pegando el c&oacute;digo html del widget de redes sociales\" class=\"wp-image-8666\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/06\/copiar-enlace-de-icono-redes-sociales-1024x413.png 1024w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/06\/copiar-enlace-de-icono-redes-sociales-150x60.png 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/06\/copiar-enlace-de-icono-redes-sociales-300x121.png 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/06\/copiar-enlace-de-icono-redes-sociales-768x310.png 768w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/06\/copiar-enlace-de-icono-redes-sociales-990x399.png 990w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/06\/copiar-enlace-de-icono-redes-sociales-1320x532.png 1320w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/06\/copiar-enlace-de-icono-redes-sociales.png 1367w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Ve a <strong>Medios<\/strong> -&gt; <strong>Biblioteca<\/strong> y haz clic en un &iacute;cono que hayas subido. Dale un vistazo al campo &ldquo;Copiar enlace&rdquo;. Ese es el enlace directo que debes usar para reemplazar los corchetes mostrados en el c&oacute;digo anterior.<\/p><p>Tu c&oacute;digo final deber&iacute;a verse algo as&iacute;:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"901\" height=\"652\" src=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/06\/pagina-widget-html-personalizado.jpg\" alt=\"Ingresando los c&oacute;digos para mostrar &iacute;conos de redes sociales como HTML personalizado\" class=\"wp-image-8667\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/06\/pagina-widget-html-personalizado.jpg 901w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/06\/pagina-widget-html-personalizado-150x109.jpg 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/06\/pagina-widget-html-personalizado-300x217.jpg 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/06\/pagina-widget-html-personalizado-768x556.jpg 768w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/06\/pagina-widget-html-personalizado-74x55.jpg 74w\" sizes=\"(max-width: 901px) 100vw, 901px\" \/><\/figure><\/div><p>Aseg&uacute;rate de que la URL directa de tu imagen termine con la extensi&oacute;n de archivo como <strong>.png<\/strong> o <strong>.jpg<\/strong>, de lo contrario, significa que has introducido el c&oacute;digo incorrecto y los &iacute;conos no se mostrar&aacute;n.<\/p><p>Cuando hayas terminado de reemplazar las partes del c&oacute;digo, haz clic en <strong>Guardar<\/strong>. Luego ve a tu sitio para ver el nuevo widget.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2019\/06\/pie-de-pa%CC%81gina-redes-sociales.jpg\" alt=\"Widget de redes sociales en vivo\" class=\"wp-image-8668\"><\/figure><\/div><p>Ahora que has agregado exitosamente los botones de redes sociales en tu sitio, puedes repetir el proceso para cada bot&oacute;n adicional que quieras agregar. Es f&aacute;cil y no te tomar&aacute; mucho tiempo, sin embargo, te ayudar&aacute; a aumentar tus seguidores en redes sociales y la interacci&oacute;n de los visitantes con tu sitio.<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>Agregar &iacute;conos de redes sociales a tu sitio de WordPress es una excelente manera para aumentar tus seguidores y la visibilidad general de la marca.<\/p><p>Ahora ya sabes c&oacute;mo agregar &iacute;conos de redes sociales a WordPress.<\/p><p>Esperamos que este art&iacute;culo te sea &uacute;til. &iexcl;&Eacute;xitos!<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/ar\/hosting-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/com-ar-tutoriales\/wp-content\/uploads\/sites\/38\/2024\/06\/ES-New-WP_in-text-banner.png\" alt=\"\" class=\"wp-image-40615\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2024\/06\/ES-New-WP_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2024\/06\/ES-New-WP_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2024\/06\/ES-New-WP_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2024\/06\/ES-New-WP_in-text-banner-768x225.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Si tienes presencia en internet por alg&uacute;n medio adicional a tu sitio web, &iquest;por qu&eacute; no mostr&aacute;rselo a tus visitantes? En este articulo veremos c&oacute;mo agregar &iacute;conos de redes sociales en WordPress. Al mostrarle tus redes sociales a los visitantes, ellos podr&aacute;n seguirte, y la mejor manera de lograrlo es poner &iacute;conos de redes sociales [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ar\/tutoriales\/iconos-redes-sociales-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":85,"featured_media":25076,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"C\u00f3mo agregar \u00edconos de redes sociales en tu sitio de WordPress","rank_math_description":"Mostrar tus redes sociales en tu sitio de WordPress es una gran idea. Lee nuestro art\u00edculo para saber c\u00f3mo agregar \u00edconos de redes sociales a WordPress.","rank_math_focus_keyword":"\u00edconos de redes sociales en wordpress","footnotes":""},"categories":[4747,14349],"tags":[],"class_list":["post-8662","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-basico"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/social-media-icons-wordpress","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/adicionar-icones-redes-sociais","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/iconos-redes-sociales-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/logo-sosmed-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/social-media-icons-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/social-media-icons-wordpress","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/social-media-icons-wordpress","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/iconos-redes-sociales-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/iconos-redes-sociales-wordpress","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/iconos-redes-sociales-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/adicionar-icones-redes-sociais","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/social-media-icons-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/social-media-icons-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/social-media-icons-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/social-media-icons-wordpress","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/8662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/comments?post=8662"}],"version-history":[{"count":11,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/8662\/revisions"}],"predecessor-version":[{"id":33457,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/8662\/revisions\/33457"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/media\/25076"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/media?parent=8662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/categories?post=8662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/tags?post=8662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}