Basic Concept: Just a Link
When sharing web pages using links, you’re essentially submitting a GET request (i.e. clicking a link) to a URL provided by each social media service. Then, by appending a series of name/value pairs (query parameters like ?title=Title) to the end of this URL, you can specify the URL of the web page you want to share and, sometimes, additional information.
Now, certain symbols in GET requests known as “reserved characters”, need to be encoded properly so as not to interfere with normal browser functions. These characters are subject to “percent-encoding” – that is, they are represented in query parameters with a “%” followed by a two-digit hex code. These are the reserved characters and their percent-encoded equivalents.
Note: A space can be represented by “%20” or “+”.
Of course, there’s no need to memorize these hex codes. There are many resources that provide conversions (Bing has one built into the search engine) and, as you will soon see, JavaScript can also handle the heavy lifting in this regard. Let’s look at a few of the more popular social media services and learn how we can share web pages through them.
Per their Developer’s Guide, Facebook specifies the following URL to submit GET requests when sharing a web page:
While there are four query parameters available, only two are required: the URL of the web page that you want to share and an App ID, which developers can obtain by registering at Facebook. If you don’t have an App ID, the registration process is not onerous, but there’s no need to bother when an even simpler solution exists.
Facebook’s original method of sharing web pages, without the required App ID, is no longer mentioned in any of their documentation, but it’s still supported. In fact, with countless web sites using this method, I can’t imagine it would be deprecated anytime soon. This URL is:
The only parameter available is “u”, which is used to specify the URL of the web page you want to share. Here’s an example that shares the home page of CSS-Tricks on Facebook – go ahead, cut-and-paste into a browser to see the result.
As previously explained, the URL shared is necessarily percent-encoded. Also, note how “?” designates the start of the first query parameter. Subsequent query parameters are separated by “&” as will be seen shortly.
Twitter refers to sharing a web page via URL as a Tweet Web Intent – the URL to use is:
Unlike Facebook, where only the web page being shared can be specified, Twitter allows you to tack on some text and any number of hashtags. Users will have the opportunity to edit all of this before tweeting, but it gives them a head start in case they can’t be bothered. For example, let’s say you wanted to tweet the following information:
The URL for that, with the query parameters percent-encoded and line breaks added for clarity, is:
And that gives you:
You’ll notice that Twitter pre-selects the text, which allows for easy editing by the user. And, remember, the tweet needs to be under 140 characters, so best not supply any copy that’s too long. In the interest of simplicity, I omitted discussing three lesser-used parameters, which can be found described in detail at Twitter’s Developers Documentation. These additional parameters allow you to specify the username associated with the tweet, suggested related usernames, and an ID of a related tweet.
The URL to use when sharing on LinkedIn is:
In total, there are five parameters available as detailed by this chart taken from LinkedIn’s Developers documentation:
In addition to the URL of the web page that you want to share, another query parameter called “mini” is required. But, as you can see, its value never changes, so we can hardcode that into the URL. To demonstrate, let’s share the following on LinkedIn:
This gives the following URL – again, line breaks added for clarity:
While not mentioned explicitly in their documentation, if the “title” parameter is omitted, LinkedIn will grab this content from the Open Graph tag <meta property="og:title"> from the shared page. Similarly, if the “summary” parameter is omitted, the Open Graph tag <meta property="og:description"> is used. As for the “source” parameter, nothing in the documentation specifies how this value is used or displayed when sharing a web page – it looks as if it can be safely ignored.
Knowing all of this, if the web page being shared has the proper complement of Open Graph tags, simply specifying the URL will suffice as the “title” and “summary” parameters will be suitably populated.
Putting It All Together
Now that we know the syntax to use when sharing web pages on social media, how exactly can we implement this code? Perhaps the most common way is simply listing a group of sharing links styled appropriately with CSS:
The adding of target="_blank" in the anchor tag allows the sharing dialog to appear in a new window or tab, which works well on all devices, from desktop to mobile.
But hard-coding these links, with the percent-encoding of the query parameters, can be tedious and error-prone. For any web page dynamically served by a CMS, this would be the perfect opportunity to have this data crunching performed on the server-side and inserted where needed in the HTML.
// HTML CODE
<h1>Social Media Sharing: HTML Links Generator</h1>
<h2>Page Information to Share</h2>
<table>
<tr>
<td><label for="url">URL:</label></td>
<td><input type="text" id="url"></td>
</tr>
<tr>
<td><label for="tweet">Tweet:</label></td>
<td><input type="text" id="tweet" placeholder="Optional">(Twitter)</td>
</tr>
<tr>
<td><label for="tweet">Hashtags:</label></td>
<td><input type="text" id="hashtags" placeholder="Optional: Enter comma-separated hashtags">(Twitter)</td>
</tr>
<tr>
<td><label for="title">Title:</label></td>
<td><input type="text" id="title" placeholder="Optional: Only use to override page's Open Graph tag.">(LinkedIn)</td>
</tr>
<tr>
<td><label for="summary">Summary:</label></td>
<td><input type="text" id="summary" placeholder="Optional: Only use to override page's Open Graph tag.">(LinkedIn)</td>
</tr>
</table>
<h2>Generated Share Links</h2>
<textarea id="share-links"></textarea>
<button>Copy to Clipboard</button>
// CSS
body {
width: 95%;
max-width: 810px;
font-family: tahoma, sans-serif;
font-size: 14px;
line-height: 1.4;
padding: 0 0 20px 0;
margin: 0 auto 0 auto;
}
h1 {
font-size: 24px;
text-align: center;
margin: 20px 0 30px 0;
}
h2 {
font-size: 20px;
margin: 20px 0 30px 0;
}
table {
margin: 0 auto 30px auto;
}
label {
font-weight: bold;
}
input {
width: 400px;
padding: 2px;
margin: 0 10px 0 0;
}
td:first-child {
text-align: right;
padding: 0 5px 0 0;
}
textarea {
display: block;
width: 100%;
height: 80px;
font-family: monospace;
white-space: pre;
margin: 0 0 10px 0;
}
// JAVASCRIPT
$('table').on('input', function() {
var url = encodeURIComponent($('#url').val());
var tweet = encodeURIComponent($('#tweet').val());
var title = encodeURIComponent($('#title').val());
var summary = encodeURIComponent($('#summary').val());
var hashtags = $('#hashtags').val();
hashtags = hashtags.replace(/\s+/g, '');
hashtags = hashtags.replace(/#/g, '');
hashtags = encodeURIComponent(hashtags);
hashtags = hashtags.replace(/%2C/g, ',');
facebook = '<li><a href="https://www.facebook.com/sharer.php?u=' + url + '">Share on Facebook</a></li>';
twitter = '<li><a href="https://twitter.com/intent/tweet?url=' + url;
if (tweet != "") { twitter += '&text=' + tweet };
if (hashtags != "") { twitter += '&hashtags=' + hashtags };
twitter += '">Share on Twitter</a></li>';
linkedin = '<li><a href="https://www.linkedin.com/sharing/share-offsite/&url=' + url + '&title=' + title + '&summary=' + summary + '">Share on LinkedIn</a></li>';
linkedin = '<li><a href="https://www.linkedin.com/sharing/share-offsite/&url=' + url;
if (title != "") { linkedin += '&title=' + title };
if (summary != "") { linkedin += '&summary=' + summary };
linkedin += '">Share on LinkedIn</a></li>';
$('textarea').text(facebook + '\n' + twitter + '\n' + linkedin);
});
$('button').on('click', function() {
document.querySelector("#share-links").select();
document.execCommand('copy');
});
0 Comments