Rules for Sharing Links on Social Media

Sharing links on social media is essential for increasing the visibility of content, products, or services. However, each platform has specific guidelines to ensure links are shared effectively and content is displayed correctly. Following best practices for sharing on social media helps improve the user experience, increase reach, and avoid technical issues.

Properly configuring meta tags, such as Open Graph (OG) tags, and using optimized links for platforms like Facebook, LinkedIn, and WhatsApp ensures that content is presented in an attractive and consistent way. In addition, understanding the limitations of in-app browsers and applying solutions, such as redirecting users to their default browsers, is essential to provide a complete user experience.

Setup for the Main Social Media Platforms

1. Facebook

To ensure Facebook displays information correctly when a link is shared, it is essential to configure Open Graph (OG) meta tags on the shared page. These tags determine how the content appears in users' feeds.

Example setup for the generic domain https://seusite.com.br:

<meta property="og:url" content="https://seusite.com.br/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Site Title" />
<meta property="og:description" content="A brief, engaging description for sharing." />
<meta property="og:image" content="https://seusite.com.br/imagem-compartilhamento.jpg" />

2. LinkedIn

LinkedIn uses a sharing link with parameters that define the content. For https://seusite.com.br, the link can be set up as follows:

https://www.linkedin.com/shareArticle?mini=true&url=https://seusite.com.br/&title=Article%20Title&summary=Engaging%20description%20for%20LinkedIn&source=LinkedIn

• title: Sets the article title.
• summary: Adds a brief description.
• url: Specifies the page link.
• source: (Optional) Name of the platform or website.

3. WhatsApp

On WhatsApp, sharing is done using a link that adds a custom message alongside the URL.

Example sharing link for https://seusite.com.br:

https://api.whatsapp.com/send?text=Check%20out%20this%20site:%20https://seusite.com.br/

4. Instagram

Instagram does not support clickable links directly in feed posts. Best practices for sharing a link include:

• Adding the link to your bio.
• Sharing the link in Stories with a "link" sticker.
• Manually downloading the content image and sharing it with the link text.

Important About Sharing URLs

1. Choosing the Share URL:
   • Use a consistent URL, such as https://seusite.com.br.
   • Configure Open Graph tags correctly to ensure links display properly on all platforms.
2. Preloaded Image:
   • On social media, the image specified in og:image must be loaded before the user posts. Otherwise, it may not appear in the shared link.

Why Social Media Platforms Have Reduced Customization of Sharing Text

Social media platforms have limited the customization of automatic messages for several reasons:

1. Preventing Spam and Abuse:
   • Customized messages increased the risk of spam and deceptive practices.
   • By limiting the available options, platforms have more control over the content being shared.
2. Authenticity and User Control:
   • They encourage users to write their own comments, making interactions more genuine.
3. Visual and Content Consistency:
   • Social media platforms use information from meta tags, such as Open Graph, to ensure content is displayed consistently.
4. Privacy and Transparency:
   • Only website owners configure the content that appears, preventing manipulation by third parties.

About In-App Browsers

When a link is accessed within apps like Instagram or Facebook, it opens in an in-app browser. These browsers often block sensitive features, such as:

• Microphone
• Camera
• Geolocation

The Problem

This can limit page functionality and harm the user experience. The solution is to redirect users to their main browser (Chrome, Safari, etc.).

Code to Detect and Redirect In-App Browsers

Below is code that detects in-app browsers and redirects users to a main browser. The domain used has been set to https://seusite.com.br.

Full Code

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

    // Detects in-app browsers (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; // Default link to open in Safari
    } else if (os === "Android") {
        // Intent link to open in Chrome on Android
        return `intent://${url.replace(/^https?:\/\//, '')}#Intent;scheme=https;package=com.android.chrome;end;`;
    }
    return url; // Default link for other systems
}

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 = "To access all the features on this page, open the link in your device's default browser.";
    message.style.marginBottom = "20px";

    const linkElement = document.createElement("a");
    linkElement.href = url;
    linkElement.innerText = "Open in Browser";
    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 = "Close";
    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"; // Replace with your website's URL

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

Code Explanation

1. Detects in-app browsers using userAgent.
2. Identifies the operating system to adjust the redirect link.
3. Displays a modal with instructions and a button to open the default browser.
4. The button directs users to Chrome on Android or Safari on iOS.

This approach improves the user experience and ensures the application works fully.