Reglas para compartir enlaces en redes sociales

Compartir enlaces en redes sociales es fundamental para aumentar la visibilidad de contenidos, productos o servicios. Sin embargo, cada plataforma tiene directrices específicas para garantizar que el contenido se comparta de forma eficaz y se muestre correctamente. Seguir las mejores prácticas para compartir en redes sociales ayuda a mejorar la experiencia del usuario, aumentar el alcance y evitar problemas técnicos.

La configuración adecuada de las metaetiquetas, como las de Open Graph (OG), y el uso de enlaces optimizados para plataformas como Facebook, LinkedIn y WhatsApp garantizan que el contenido se presente de forma atractiva y coherente. Además, comprender las limitaciones de los navegadores integrados en aplicaciones y aplicar soluciones, como redirigir a los navegadores predeterminados, es esencial para ofrecer una experiencia completa al usuario.

Configuración para las principales redes sociales

1. Facebook

Para garantizar que Facebook muestre correctamente la información al compartir un enlace, es esencial configurar las metaetiquetas Open Graph (OG) en la página compartida. Estas etiquetas definen cómo se presentará el contenido en el feed del usuario.

Ejemplo de configuración para el dominio genérico https://seusite.com.br:

<meta property="og:url" content="https://seusite.com.br/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Título do Site" />
<meta property="og:description" content="Descrição breve e atrativa para o compartilhamento." />
<meta property="og:image" content="https://seusite.com.br/imagem-compartilhamento.jpg" />

2. LinkedIn

LinkedIn utiliza un enlace para compartir con parámetros que definen el contenido. Para https://seusite.com.br, el enlace se puede configurar así:

https://www.linkedin.com/shareArticle?mini=true&url=https://seusite.com.br/&title=Título%20do%20Artigo&summary=Descrição%20atrativa%20para%20o%20LinkedIn&source=LinkedIn

• title: Define el título del artículo.
• summary: Añade una breve descripción.
• url: Especifica el enlace de la página.
• source: (Opcional) Nombre de la plataforma o del sitio.

3. WhatsApp

En WhatsApp, se comparte mediante un enlace que añade un mensaje personalizado junto a la URL.

Ejemplo de enlace para compartir https://seusite.com.br:

https://api.whatsapp.com/send?text=Confira%20este%20site:%20https://seusite.com.br/

4. Instagram

Instagram no admite enlaces en los que se pueda hacer clic directamente en las publicaciones del feed. Las mejores prácticas para compartir un enlace son:

• Incluir el enlace en la bio.
• Compartir el enlace en las Stories con un sticker de «enlace».
• Descargar manualmente la imagen del contenido y compartirla con el texto del enlace.

Información importante sobre las URL para compartir

1. Definición de la URL para compartir:
   • Utiliza una URL coherente, como https://seusite.com.br.
   • Configura correctamente las etiquetas Open Graph para garantizar que se vea bien en todas las plataformas.
2. Imagen precargada:
   • En las redes sociales, la imagen especificada en og:image debe cargarse antes de que el usuario publique. De lo contrario, puede que no aparezca al compartir.

Motivos de la reducción de las opciones de personalización de los textos para compartir

Las redes sociales han limitado la personalización de los mensajes automáticos por varios motivos:

1. Prevención del spam y los abusos:
   • Los mensajes personalizados aumentaban el riesgo de spam y de prácticas engañosas.
   • Al limitar las opciones, las plataformas controlan mejor el contenido que circula.
2. Autenticidad y control del usuario:
   • Fomentan que cada usuario escriba sus propios comentarios, para que las interacciones sean más genuinas.
3. Coherencia visual y de contenido:
   • Las redes sociales utilizan la información de las metaetiquetas (como Open Graph) para garantizar que el contenido se muestre de forma uniforme.
4. Privacidad y transparencia:
   • Solo los propietarios del sitio configuran el contenido que se muestra, lo que evita manipulaciones por parte de terceros.

Acerca de los navegadores integrados en aplicaciones

Cuando se accede a un enlace dentro de aplicaciones como Instagram o Facebook, se abre en un navegador integrado (In-App Browser). Estos navegadores suelen bloquear funciones sensibles, como:

• Micrófono
• Cámara
• Geolocalización

Problema

Esto puede limitar la funcionalidad de la página y perjudicar la experiencia del usuario. La solución es redirigir al usuario al navegador principal (Chrome, Safari, etc.).

Código para detectar y redirigir desde navegadores integrados

A continuación se muestra un código que detecta los navegadores integrados y redirige a los usuarios a un navegador principal. El dominio utilizado se ha adaptado a https://seusite.com.br.

Código completo

function isInAppBrowser() {
    const userAgent = navigator.userAgent || navigator.vendor || window.opera;

    // Detecta navegadores embutidos (Instagram, Facebook, Messenger, etc.)
    const inAppBrowserRegex = /instagram|fbav|facebook|messenger/i;
    return inAppBrowserRegex.test(userAgent);
}

function getOperatingSystem() {
    const userAgent = navigator.userAgent || navigator.vendor || window.opera;

    if (/iPhone|iPad|iPod/i.test(userAgent)) {
        return "iOS";
    } else if (/android/i.test(userAgent)) {
        return "Android";
    }
    return "Other";
}

function getOpenBrowserLink(url) {
    const os = getOperatingSystem();

    if (os === "iOS") {
        return url; // Link padrão para abrir no Safari
    } else if (os === "Android") {
        // Link intent para abrir no Chrome no Android
        return `intent://${url.replace(/^https?:\/\//, '')}#Intent;scheme=https;package=com.android.chrome;end;`;
    }
    return url; // Link padrão para outros sistemas
}

function showModal(url) {
    const modal = document.createElement("div");
    modal.style.position = "fixed";
    modal.style.top = "0";
    modal.style.left = "0";
    modal.style.width = "100%";
    modal.style.height = "100%";
    modal.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
    modal.style.zIndex = "9999";
    modal.style.display = "flex";
    modal.style.alignItems = "center";
    modal.style.justifyContent = "center";

    const modalContent = document.createElement("div");
    modalContent.style.backgroundColor = "#fff";
    modalContent.style.padding = "20px";
    modalContent.style.borderRadius = "8px";
    modalContent.style.textAlign = "center";
    modalContent.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.2)";
    modalContent.style.width = "90%";
    modalContent.style.maxWidth = "400px";

    const message = document.createElement("p");
    message.innerText = "Para acessar todos os recursos desta página, abra o link no navegador padrão do seu dispositivo.";
    message.style.marginBottom = "20px";

    const linkElement = document.createElement("a");
    linkElement.href = url;
    linkElement.innerText = "Abrir no Navegador";
    linkElement.style.display = "inline-block";
    linkElement.style.padding = "10px 20px";
    linkElement.style.backgroundColor = "#007bff";
    linkElement.style.color = "#fff";
    linkElement.style.textDecoration = "none";
    linkElement.style.borderRadius = "5px";
    linkElement.style.marginTop = "10px";

    const closeButton = document.createElement("button");
    closeButton.innerText = "Fechar";
    closeButton.style.display = "inline-block";
    closeButton.style.marginLeft = "20px";
    closeButton.style.padding = "10px 20px";
    closeButton.style.backgroundColor = "#ccc";
    closeButton.style.color = "#000";
    closeButton.style.border = "none";
    closeButton.style.borderRadius = "5px";
    closeButton.style.cursor = "pointer";

    closeButton.onclick = () => {
        modal.style.display = "none";
    };

    modalContent.appendChild(message);
    modalContent.appendChild(linkElement);
    modalContent.appendChild(closeButton);
    modal.appendChild(modalContent);
    document.body.appendChild(modal);
}

document.addEventListener("DOMContentLoaded", () => {
    const originalUrl = "https://seusite.com.br"; // Substitua pelo URL do seu site

    if (isInAppBrowser()) {
        const openBrowserLink = getOpenBrowserLink(originalUrl);
        showModal(openBrowserLink);
    }
});

Explicación del código

1. Detecta los navegadores integrados mediante userAgent.
2. Identifica el sistema operativo para adaptar el enlace de redirección.
3. Muestra un modal con instrucciones y un botón para abrir el navegador predeterminado.
4. El botón dirige al usuario a Chrome en Android o a Safari en iOS.

Este enfoque mejora la experiencia del usuario y garantiza el funcionamiento completo de la aplicación.