Social media example - Fluid Topics - Latest

Fluid Topics Designer Guide
Category
Reference Guides
Audience
public
Version
Latest

The following example shows a Modal component with icons leading to social media platforms:

A screen with the text 'Share this document with your network' at the top. Below the text, there are three large social media icons from left to right: LinkedIn, X (formerly Twitter), and Facebook.

Selecting an icon leads users to the selected website, where users can post a pre-filled message containing the URL of the current document.

Each icon is a Custom component.

Select the Attachments button to download the component (share_social_media_modal_export.zip archive).

The HTML content for LinkedIn is:

<a href="https://www.linkedin.com/sharing/share-offsite/?url=" target="_blank" class="network">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/LinkedIn_logo_initials.png">
</a>

The HTML content for Facebook is:

<a href="https://twitter.com/intent/tweet?url=" target="_blank" class="network">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/X_logo_2023.svg">
</a>

The HTML content for Twitter is:

<a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank" class="network">
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/2023_Facebook_icon.svg">
</a>

The CSS code for each of the three elements is:

img {
   width: 100%;
   height: 100%;
   max-width: 33vh;
}

The JavaScript code for each of the three elements is:

// Select the <a> element
let link = document.querySelector('.network');

// Get the value of the @href attribute of the <a> element
let currentHref = link.getAttribute('href');

// Get the readerUrl value of the map
let url_map = map.readerUrl;

// Get the domain name
let currentURL = window.location.origin;

// Append the elements to the @href attribute
let newHref = currentHref + currentURL + url_map;

// Set the modified @href value back to the <a> element
link.setAttribute('href', newHref);