Social Media Sharing

Relevant source files

The following files were used as context for generating this wiki page:

• js/share.js
• single_blog.html
• about.html
• contact.html
• 404.html

The Vandore Heritage website incorporates social media functionality in two distinct ways: static links to the company's social profiles and a dynamic content sharing feature. The static links are used for brand presence and direct users to the company's Facebook and Instagram pages. This is primarily seen on pages like "About Us" and "Contact Us".

The dynamic sharing feature allows users to share specific content, such as a blog post, on their personal social media profiles. This functionality is powered by a dedicated JavaScript module, js/share.js, which constructs shareable links for various platforms. This feature is implemented on content-specific pages like single_blog.html to encourage organic content distribution.

Architecture Overview

The social media integration is entirely client-side. It consists of static HTML links for profile redirection and a jQuery-based script for dynamic sharing.

The diagram below illustrates the two distinct social media features.

Static Social Media Links

Static links are hardcoded <a> tags pointing directly to Vandore Heritage's social media profiles. These are used to promote the company's own social channels. They are found on the "About Us" page for team members and on the "Contact Us" page.

Sources: about.html, contact.html

Implementation

The links are simple HTML anchor tags with target="_blank" to open in a new tab. They are styled with Font Awesome icons.

Example from about.html:

<div class="social-container" style="border-bottom-right-radius: 20px;">
    <a href="https://www.facebook.com/share/1AwoA2Vb1U/?mibextid=wwXIfr" class="social-item" target="_blank">
        <i class="fa-brands fa-xs fa-facebook-f"></i>
    </a>
    <a href="https://www.instagram.com/vandoreheritage" class="social-item" target="_blank">
        <i class="fa-brands fa-xs fa-instagram"></i>
    </a>
</div>

Sources: about.html:277-283

Linked Profiles

The following social media profiles are consistently linked across the site.

Platform	URL	Found In
Facebook	https://www.facebook.com/share/1AwoA2Vb1U/?mibextid=wwXIfr	about.html, contact.html
Instagram	https://www.instagram.com/vandoreheritage	about.html, contact.html

Sources: about.html:277-283, contact.html:220-226

Dynamic Content Sharing

This feature allows users to share the current page on their own social media. It is implemented on pages like single_blog.html and is powered by js/share.js.

Sources: js/share.js, single_blog.html:158-168, 203

HTML Structure

The feature is triggered by a dropdown button. Each link within the dropdown has a share-btn class and a data-platform attribute that specifies the social network.

<div class="dropdown">
    <button class="btn btn-accent-outline dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="fa-solid fa-share-nodes"></i>
        Share
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item share-btn" href="#" data-platform="facebook">Facebook</a></li>
        <li><a class="dropdown-item share-btn" href="#" data-platform="twitter">Twitter</a></li>
        <li><a class="dropdown-item share-btn" href="#" data-platform="linkedin">LinkedIn</a></li>
        <li><a class="dropdown-item share-btn" href="#" data-platform="email">Email</a></li>
    </ul>
</div>

Sources: single_blog.html:158-168

JavaScript Logic (js/share.js)

The script js/share.js contains the logic for handling the share functionality. It is loaded on pages that use this feature, such as single_blog.html and 404.html.

Sources: single_blog.html:203, 404.html:112

1. Event Listener: A jQuery click listener is attached to any element with the .share-btn class.
2. Data Extraction: When a button is clicked, the script retrieves the current page's URL (window.location.href) and title (document.title).
3. URL Construction: Based on the data-platform attribute of the clicked element, it constructs a specific sharing URL.
4. New Window: It opens the constructed URL in a new, small popup window using window.open.

The following sequence diagram illustrates this flow:

Supported Platforms & URL Formats

The script supports sharing to four platforms. The URLs are constructed using the page's title and URL.

Platform	data-platform	Base URL & Parameters
Facebook	facebook	http://www.facebook.com/sharer.php?u={pageUrl}
Twitter	twitter	http://twitter.com/share?text={pageTitle}&url={pageUrl}
LinkedIn	linkedin	http://www.linkedin.com/shareArticle?mini=true&url={pageUrl}&title={pageTitle}
Email	email	mailto:?subject={pageTitle}&body={pageUrl}

Sources: js/share.js:7-16

Summary

The project employs a straightforward, client-side approach to social media integration. It effectively separates brand promotion (static links to company profiles) from user-driven content amplification (dynamic page sharing). The static links are easy to maintain HTML, while the dynamic sharing is encapsulated in a reusable JavaScript module (js/share.js) that can be included on any page requiring share functionality.