Social media sharing buttons in SharePoint 2019

Question

Hi everyone,

I’m working on a SharePoint 2019 internet site, and I’ve been asked to add social media sharing buttons (e.g., LinkedIn, Twitter, Facebook) to certain pages like news articles and event announcements.

Has anyone done this before? I’m looking for guidance on:

1. Is this possible out-of-the-box, or do I need custom development?

2. What’s the best way to limit these buttons to specific pages?

Thanks in Advance

Answer 1

Adding Social Media Sharing buttons in SharePoint 2019

Unfortunately, There is no OOTB social media sharing buttons in SharePoint. However, you can add social media sharing buttons using JavaScript as the following:

• OpenSharePoint Designer.
• Open your site.
• Edit your page Layout in Advanced Mode.
• In PlaceHolderMain, Add the following:

1. Add the Line Awesome CSS for icons

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/line-awesome/1.3.0/line-awesome/css/line-awesome.min.css">

2. Add Social Media Buttons

Use HTML buttons with Line Awesome icons in your Page Layout.

<div>
    <button onclick="shareOnSocial('facebook')">
        <i class="lab la-facebook"></i> Share on Facebook
    </button>
    <button onclick="shareOnSocial('twitter')">
        <i class="lab la-twitter"></i> Share on Twitter
    </button>
    <button onclick="shareOnSocial('linkedin')">
        <i class="lab la-linkedin"></i> Share on LinkedIn
    </button>
</div>

3. Add JavaScript for Sharing

This script dynamically gets the current page URL and opens the sharing link.

<script >
    function shareOnSocial(platform) {
        let url = encodeURIComponent(window.location.href);
        let shareUrl = '';

        switch (platform) {
            case 'facebook':
                shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
                break;
            case 'twitter':
                shareUrl = `https://twitter.com/intent/tweet?url=${url}&text=Check this out!`;
                break;
            case 'linkedin':
                shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${url}`;
                break;
        }

        window.open(shareUrl, '_blank');
    }
</script>

4. Style the Buttons

<style>
    button {
        background: #007bff;
        color: white;
        border: none;
        padding: 10px 15px;
        margin: 5px;
        font-size: 16px;
        cursor: pointer;
        border-radius: 5px;
    }
    
    button i {
        margin-right: 5px;
    }

    button:hover {
        background: #0056b3;
    }
</style>

Note: To limit these buttons to a specific page, you can add the above code to the Page Layout