{"id":8670,"date":"2019-07-10T09:43:50","date_gmt":"2019-07-10T07:43:50","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=8670"},"modified":"2020-11-18T14:09:02","modified_gmt":"2020-11-18T12:09:02","slug":"redes-sociales-crea-tus-propios-botones-de-compartir-en-html","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2019\/07\/redes-sociales-crea-tus-propios-botones-de-compartir-en-html\/","title":{"rendered":"Redes sociales: crea tus propios botones de compartir en HTML"},"content":{"rendered":"

Buenos d\u00edas a tod@s,<\/p>\n

En este post hablare de como crear botones para compartir contenido a trav\u00e9s de las redes sociales con HTML.<\/p>\n

Para implementar esos botones, las redes sociales ofrecen muchos m\u00e9todos.<\/p>\n

Algunos involucran generadores de botones, y algunos requieren c\u00f3digo JavaScript externo. Lo que significa m\u00e1s scripts adicionales en tu web que rastrear\u00e1n a tus usuarios y que har\u00e1n la carga m\u00e1s lenta.<\/p>\n

 <\/p>\n

Sin embargo, para evitar esto, existen otros m\u00e9todos m\u00e1s simples y efectivos para crear enlaces de uso compartido de p\u00e1ginas web.<\/p>\n

 <\/p>\n

El concepto<\/h2>\n

Mientras compartimos el enlace en una p\u00e1gina web, b\u00e1sicamente enviamos una solicitud GET (es decir, haciendo clic en un enlace) a una URL proporcionada por cada servicio en la red social.<\/p>\n

As\u00ed que primero crearemos un enlace en HTML y luego le a\u00f1adiremos par\u00e1metros. Los par\u00e1metros son datos adicionales que se env\u00edan por la url para ejecutar diversas acciones.<\/p>\n

 <\/p>\n

Por ejemplo, en un enlace como el siguiente, el par\u00e1metro viene despu\u00e9s del signo\u00a0?\u00a0y es\u00a0\u201cinscribir\u201d:<\/p>\n

<a href=\"https:\/\/www.espai.es\/seminarios-especiales?inscribir\">SEMINARIO WEB<\/a><\/code><\/p>\n

 <\/p>\n

Los par\u00e1metros pueden tener un nombre y un valor. En el caso siguiente ser\u00edan inscribir y dise\u00f1o:<\/p>\n

<a href=\"https:\/\/www.espai.es\/seminarios-especiales?inscribir=dise\u00f1o\">SEMINARIO WEB<\/a><\/code><\/p>\n

 <\/p>\n

Y si se requieren varios par\u00e1metros estos se separan con el signo\u00a0&:<\/p>\n

<a href=\"https:\/\/www.espai.es\/cursos\/cursos-marketing-digital-en-barcelona?inscribir=41&from=mobile\">SEMINARIO WEB<\/a><\/code><\/p>\n

 <\/p>\n

A notar que algunos s\u00edmbolos en las solicitudes GET conocidos como \u00abcaracteres reservados\u00bb, deben codificarse correctamente para no interferir con las funciones normales del navegador. Estos caracteres est\u00e1n sujetos a URL codificadas (Percent Encoding<\/a> ), por ejemplo los espacios no son admitidos en las url y dentro de un par\u00e1metro usaremos %20 como equivalente a espacio. \u00a0Y ahora, vamos a crear los enlaces para cada red social.<\/p>\n

 <\/p>\n

Compartir enlace en Facebook:<\/h2>\n

El m\u00e9todo para compartir p\u00e1ginas web en Facebook es la URL:<\/p>\n

<a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=[url]\"><\/a>\r\n<\/code><\/pre>\n
 <\/p>\n
Solo puedes compartir un enlace sin mensaje. Para \u00a0la web de Espai, el enlace ser\u00eda el siguiente:<\/p>\n
<a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/espai.es\">Comparte en Facebook<\/a><\/code><\/p>\n
 <\/p>\n
Compartir en Twitter<\/h2>\n
A diferencia de Facebook, donde solo se puede especificar la p\u00e1gina web compartida, Twitter permite agregar texto y cualquier n\u00famero de hashtags. Puedes ver toda la documentaci\u00f3n oficial en el interface para developper<\/a> de la propia red social.<\/p>\n
La estructura base del enlace ser\u00eda la siguiente:<\/p>\n
<a href=\"https:\/\/twitter.com\/intent\/tweet?text=[text]&url=[url]&hashtags=[hashtag]\"><\/a><\/code><\/p>\n
 <\/p>\n
Por ejemplo, quieres tuitear la siguiente informaci\u00f3n:<\/p>\n