Simple Dynamic Social Media Share Links On the Same Page

July 31, 2018

Setting up meta tags for social media platforms for a single page is generally pretty easy. Look up the Open Graph API standards and platform specific standards (I.E. Twitter) then fill in the content for your page looking something like the following:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <?php
        $root = $_SERVER['HTTP_HOST'];
        ?>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <!-- Twitter Share -->
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:site" content="@Mysite">
        <meta name="twitter:creator" content="@mytwitterhandle">
        <meta name="twitter:title" content="Title">
        <meta name="twitter:image" content="http://<?php echo $root; ?>/img/share/default.jpg">
        <!-- Facebook/LinkedIn Share -->
        <meta property="og:url" content="http://<?php echo $root; ?>" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Title" />
        <meta property="og:description" content="Description" />
        <meta property="og:image" content="http://<?php echo $root; ?>/img/share/default.jpg" />
    </head>
    <body>
    <div>Static body content</div>
    </body>
</html>

However, when dealing with the task of having dynamic content based on the shared element on the site such as various slides in a gallery it can get a little tricky. There are some options out there that uses JavaScript/jQuery but they frequently require an app created through a social media platform (I.E Facebook) but there’s no guarantee it will work when shared on a different platform and it can be a time-consuming setup.  To get around this, we created a simple script in javascript that updates the shared URL’s post values with that slides specific content information which is used to control what meta tag content is set on page load on share type link click. Example:

/**
  * check share type | get slide information | determine share link
  */

function shareControl(thisObj, shareType) {
    var slide = thisObj.closest('section.slide');
    var slideNum = slide.data('slidenum');
    var slideName = slide.find('img:first').attr('alt');
    var slideId = slide.attr('id');
    var currentDomain = window.location.hostname;
    if (shareType == 'email') { //email share
       window.location = 'mailto:?subject="Title - '+ slideName +'"&body=View Slide at - '+ currentDomain +'/survey.php?id='+ slideId;
    } else if (shareType == 'facebook'){ //facebook share
        window.open('https://www.facebook.com/sharer/sharer.php?u='+ currentDomain +'/survey.php?title='+ title +'&id='+ slideId, '_blank');
    } else if (shareType == 'twitter'){ //twitter share
        window.open('https://twitter.com/home?status='+ currentDomain +'/survey.php?title='+ title +'&id='+ slideId, '_blank');
    } else { //linkedin share
        window.open('https://www.linkedin.com/shareArticle?mini=true&url='+ currentDomain +'/survey.php?title='+ title +'&id='+ slideId, '_blank');
    }
}

//share control links
$('.emailShare').on('click', function(){ //on email click
    shareControl($(this), 'email');
});
$('.facebookShare').on('click', function(){ //on facebook click
    shareControl($(this), 'facebook');
});
$('.twitterShare').on('click', function(){ //on twitter click
    shareControl( $(this), 'twitter');
});
$('.linkedinShare').on('click', function(){ //on linkedin click
    shareControl($(this), 'linkedin');
});

Next, we created a PHP script that sits in the head with the rest of the meta tags that grabs those post values from the URL and then sets the content based on the post values received.

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <?php
        $root = $_SERVER['HTTP_HOST'];
        //get page id | use defaul if none, or if exists update vars
        $pageId = $_GET['id'];
        $title = $_GET['title'];
        if($pageId == '' && $title == '') {
            $title = 'Default Title';
        }
        ?>
        <!-- Twitter Share -->
        <meta name="twitter:title" content="<?php echo $title; ?>">
        <meta name="twitter:image" content="http://<?php echo $root; ?>/img/share/<?php if($pageId != ''){ echo $pageId.'.jpg'; } else { echo 'default.jpg'; } ?>">
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:site" content="@Mysite">
        <meta name="twitter:creator" content="@mytwitterhandle">
        <meta name="twitter:description" content="Description">
        <!-- Facebook/LinkedIn Share -->
        <meta property="og:type" content="website" />
        <meta property="og:description" content="Description" />
        <meta property="og:title" content="<?php echo $title; ?>" />
        <meta property="og:image" content="http://<?php echo $root; ?>/img/share/<?php if($pageId != ''){ echo $pageId.'.jpg'; } else { echo 'default.jpg'; } ?>" />
        <meta property="og:url" content="http://<?php echo $root; ?>/link.php<?php if($pageId != ''){ echo '?id='.$pageId; } ?>" />
    </head>
    <body>
        <div>Dynamic body Content</div>
    </body>
</html>

There you have it, dynamic share links for different content on a single page. In our example, the description stays static but this could easily be changed as well. If you don’t want massive URL links you can easily generate them on the fly in the file by matching your id and using a switch or if statement to match page id, title, etc.

More information on the Open Graph API:

A great way to create your share links: