One widespread function of content material websites (together with this one), is hyperlinks/buttons/and so on to share a bit of content material on social media. Sometimes that is Twitter, however many websites will embody methods to share hyperlinks on Fb, LinkedIn, and extra. A reader requested me a number of days in the past about how this might be executed in Eleventy and I assumed I would share a fast instance.
The very first thing to know is that for a lot of websites, they might love so that you can embed a JavaScript library in your web page to offer you an ‘enhanced’ expertise. I learn that as a bunch of extra crap/load/privacy-stealing stuff I do not want. That being mentioned, as a result of most docs lead people to the ‘widgets’, it is generally troublesome to seek out the easier vanilla HTML options.
Whereas researching this, I found an amazing GitHub repository, social-share-urls. This offers helper utilities in a number of languages to make it simpler to raft these URLs. Additionally they embody public area icons. However what’s actually cool is that in the event you simply wish to get proper to the URLs, they supply a gist:
Beautiful, proper? As you may see, each will at all times require a URL of the web page you wish to share and a few embody extra issues just like the web page title and extra. Let us take a look at an instance of how we might craft these URLs with a deal with Fb, Twitter, and LinkedIn. (Personally, I share my content material on Twitter and LinkedIn, and hold Fb to pics of my children and LEGOs.)
First off – we’d like a URL – and that is truly not so simple as it’s possible you’ll assume. Eleventy offers a web page.url worth, nevertheless it’s the relative URL, not the whole URL. If you would like a full URL, you’ll both want to make use of a little bit of code to smell it, an setting variable probably (Netlify offers one), or a hard-coded worth. Personally, I feel a easy hard-coded worth is the most effective answer and could be dealt with in a single line in your configuration file:
eleventyConfig.addGlobalData("rootURL", "https://www.raymondcamden.com");
Given this, think about we have a weblog written in Eleventy the place all of the posts use a submit format. I would add social sharing hyperlinks on the backside, and craft them like so:
<a href="https://www.fb.com/sharer.php?u={ url_encode }{ url_encode }">Fb</a> ~
<a href="https://twitter.com/intent/tweet?url={ url_encode }{{ web page.url}}&textual content={ url_encode}">Twitter</a> ~
<a href="https://www.linkedin.com/sharing/share-offsite/?url={ url_encode }{ url_encode }">LinkedIn</a>
Within the pattern above, I am making a “full” URL by first utilizing the rootURL worth after which web page.url. For each, notice that I move them by means of the url_encode filter to make them protected within the question string. (Though trendy browsers are inclined to deal with this for us, with it being really easy to make use of, we would as effectively, proper?) Discover that the Twitter hyperlink additionally contains the title worth.
All in all, not troublesome in any respect, however the code is a bit messy. We will make use of a Liquid tag to make it a bit nicer. Contemplate this model:
url_encode %
url_encode %
<p>
<a href="https://www.fb.com/sharer.php?u={{ pageUrl }}">Fb</a> ~
<a href="https://twitter.com/intent/tweet?url={{ pageUrl }}&textual content={{ stitle }}">Twitter</a> ~
<a href="https://www.linkedin.com/sharing/share-offsite/?url={{ pageUrl }}">LinkedIn</a> ~
<a href="https://reddit.com/submit?url={{pageUrl}}&title={{stitle}}">Reddit</a>
</p>
Within the code block above, I made use of assign to create two variables, pageUrl and stitle. I craft my full URL utilizing prepend and nonetheless URL encode the values. For the title, I simply encode it. (It might make sense right here to incorporate the title of the location as effectively.) I added Reddit on this instance simply because.
As at all times, let me know if this does not make sense! You’ll find the whole supply code right here: https://github.com/cfjedimaster/eleventy-demos/tree/grasp/sharelinks
Photograph by Elaine Casap on Unsplash
