If you want to create your own "share this page" social media button or link for Facebook, and you don't want to use a heavy third-party Javascript plugin, all you need to do is generate a URL that looks like this:
https://facebook.com/sharer/sharer.php?u=#escaped-URLTo put one for each post, you'll need to replace #escaped-URL with the actual URL of the page that should be shared, which means you'll need a bit of Javascript or, preferably, PHP (or whatever your back-end language is).
Because you're putting a URL inside another URL, the URL you're putting has to be escaped. For example, if you wanted to share this URL:
https://www.google.com/search?q=bingYou would need to escape this so it turns into:
https%3A%2F%2Fwww.google.com%2Fsearch%3Fq%3DbingThen the share URL then becomes:
https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.google.com%2Fsearch%3Fq%3DbingBoth PHP and Javascript have functions to do this, they are urlencode and encodeURIComponent, respectively. For PHP, we could write something like this:
<?php
$page_url = "https://www.google.com/search?q=bing";
$facebook_share_url = "https://facebook.com/sharer/sharer.php?u=" . urlencode($page_url);
?>
<a href="<?= $facebook_share_url ?>">Share on facebook!</a>To get the current page URL, a quick and dirty way would be this:
$page_url = (empty($_SERVER['HTTPS']) ? 'http' : 'https') . '://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];Note that if there are query parameters like ?refresh=yes in the URL, they'll end up being shared too. You will want to use your page's canonical URL for this instead.
With Javascript, you could do this:
<a href="#share-on-facebook">Share on facebook!</a>
<script>
(function() {
var canonicalLink = document.querySelector("link[rel=canonical]");
var currentPageUrl = (canonicalLink || {}).href || window.location.href;
var facebookShareUrl = "https://facebook.com/sharer/sharer.php?u=" + encodeURIComponent(currentPageUrl);
var facebookShareLinks = document.querySelectorAll('a[href="#share-on-facebook"]');
for(var i = 0; i < facebookShareLinks.length; i++) {
facebookShareLinks[i].href = facebookShareUrl;
}
})();
</script>Although it can be easier to do it this way, until the script runs clicking on the link won't do anything. You could try to fix this by somehow figuring out if the button was clicked before the script loaded, or by simply not having the buttons in first place and creating them already working with Javascript, but in my opinion it's easier to have working links in the HTML generated by server before any scripts are run.
Other Social Media Share URLs
Other social media also have plain URLs you can use to share things on them. For reference, I made a list of some of them below.
X (formerly Twitter)
The URL to share a URL on Twitter is this:
https://twitter.com/intent/tweet/?url=It also supports a text parameter that lets you set a default tweet text.
https://twitter.com/intent/tweet/?text=&url=Naturally, this text will have to be percent encoded as well.
The URL to share a URL on Reddit is this:
https://reddit.com/submit/?url=Originally Reddit was a link aggregator, so it was all about sharing URLs. By default, trying to submit a URL that someone else already submitted makes Reddit show you the thread that already exists for that URL instead of creating a new one. Using a resubmit=true parameter avoids this behavior.
https://reddit.com/submit/?url=&resubmit=trueYou can also set a default title. It's a good idea to use the page title or article title for this.
https://reddit.com/submit/?url=&resubmit=true&title=Tumblr
The URL to share a URL on Tumblr is this:
https://www.tumblr.com/widgets/share/tool?posttype=link&canonicalUrl=Source: https://www.tumblr.com/docs/en/share_button
Tumblr supports a tags attribute that lets you set the default tags on a post. Tags can contain spaces on Tumblr and do not start with an octothorpe (#). Multiple tags have to be separated by commas.
https://www.tumblr.com/widgets/share/tool?posttype=link&canonicalUrl=&tags=Mastodon
The URL to share a URL on a Mastodon instance (we'll use the most popular instance, mastodon.social, as example) is this:
https://mastodon.social/share?text=As you can see, there's no URL parameter. You set a default text and the web interface shows a "post a new toot" widget with that text already inputted, so the user only needs to press a button to post it. You might to include the title of your page, the URL, and any tags, separated by spaces or new lines, just like a normal post in this text parameter, percent-escaped, of course.
If you have heard about Mastodon before but you have no experience with it, a heads up: Mastodon isn't a social media website, it's an application, like WordPress. Just as there are many WordPress websites out there, there are many Mastodon-powered websites out there. Although an user who creates an account in one Mastodon website can communicate with users from other Mastodon websites through the Fediverse, they can only see their feed and post from the website they created their account on. This means a "URL to share a URL on Mastodon" can't exist, because you would need to know which Mastodon website your visitor uses, and there's no easy, practical way of knowing that.
If they use Mastodon.social, the largest instance, that URL will work. If they use Mastodon.cloud, which is also very large, it will not work, as that's an entirely different website that just happens to look exactly the same. You would need a different share URL for that one. If they signed up on Mas.to, it will not work. If they signed up on Fosstodon.org, it will not work. You get the idea. You'll either have to make and maintain a hundred different links for every Mastodon instance, or you just support the largest one because it's simpler that way and stop there.
Leave a Reply