Social Sharing Buttons with zero JavaScript to Twitter, Reddit, LinkedIn, and Facebook

Sharing content on social networks is an important feature on many websites. This is a very common feature that is not hard to implement, but often is outsourced to JavaScript libraries, proprietary vendor components, or sharing buttons directly from the social platforms.

There are many ways to install social sharing features on your website without development, but it always comes down to adding more JavaScript, CSS, and images to your website ultimately slowing it down. If you use the snippets directly from the social platforms, you’re also allowing those social networks to collect data on your visitors.
Instead of slowing down your site and feeding advertisement profiles, we can achieve the same functionality with HTML only.

Social Sharing Basics #

Before even implementing Social Sharing buttons, we need to make sure our web pages look great on social media when someone copies and pastes the link directly. For our web pages to have a rich media presence on social media, we have to add meta-data describing the contents of the page with titles, summaries, images, etc.

For Twitter, use the following meta-tags:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">
<meta name="twitter:image:alt" content="alternative text for accessibility">

This snippet comes from Twitter’s documentation. We can test URL’s using Twitter’s Card Validator.

For Facebook, these are the most important meta tags to use:

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />
<meta property="og:image:alt"          content="alternative description of the image" />

This snippet comes from Facebook’s documentation.
LinkedIn, Reddit, and more platforms conveniently use the same Open-Graph Protocol meta-tags as Facebook. Here are some tools to validate what your page will look like when shared:

• Facebook’s Sharing Debugger for Facebook posts
• OEmbed Validator for Reddit posts
• LinkedIn’s Post inspector for LinkedIn posts

Once we've setup these meta-tags, this is what it would look like when sharing:

Social Sharing Buttons #

Instead of using JavaScript plugins we can use the anchor HTML element and point it to specific sharing URL’s provided by the social platform. Each one of the sharing URL’s accept a Query String Parameter to pass in your own page URL. Here’s an example of the full HTML:

<a href="https://twitter.com/intent/tweet?url=https%3a%2f%2fwww.swimburger.net%2fblog%2fazure%2fcreating-a-discord-bot-using-net-core-and-azure-app-services%3futm_source%3dtwitter%26utm_medium%3dsocial&via=RealSwimburger"
    target="_blank">
    Share to Twitter
</a>
<a href="https://www.reddit.com/submit?url=https%3a%2f%2fwww.swimburger.net%2fblog%2fazure%2fcreating-a-discord-bot-using-net-core-and-azure-app-services%3futm_source%3dreddit%26utm_medium%3dsocial&title=Creating+a+Discord+Bot+using+.NET+Core+and+Azure+App+Services"
    target="_blank">
    Share to Reddit
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3a%2f%2fwww.swimburger.net%2fblog%2fazure%2fcreating-a-discord-bot-using-net-core-and-azure-app-services%3futm_source%3dlinkedin%26utm_medium%3dsocial"
    target="_blank">
    Share to LinkedIn
</a>
<a href="https://www.facebook.com/sharer.php?u=https%3a%2f%2fwww.swimburger.net%2fblog%2fazure%2fcreating-a-discord-bot-using-net-core-and-azure-app-services%3futm_source%3dfacebook%26utm_medium%3dsocial"
    target="_blank">
    Share to Facebook
</a>

Here’s the list of URL’s and some useful links for more information:

Twitter #

https://twitter.com/intent/tweet?url=https://www.swimburger.net/blog/azure/creating-a-discord-bot-using-net-core-and-azure-app-services&via=RealSwimburger

Read twitter's Documentation for extra parameters.

Reddit #

http://www.reddit.com/submit?url=http://example.com/yet/another/test&title=Hello,%20Reddit!

Source: Reddit Share Wiki

LinkedIn #

https://www.linkedin.com/shareArticle?mini=true&url=https://www.swimburger.net/blog/azure/creating-a-discord-bot-using-net-core-and-azure-app-services&title=LinkedIn%20Developer%20Network&summary=My%20favorite%20developer%20program

Facebook #

https://www.facebook.com/sharer.php?href=https://www.swimburger.net/blog/azure/creating-a-discord-bot-using-net-core-and-azure-app-services&display=popup

For more options check Facebook’s Share Documentation

Conclusion #

Social platforms will try to convince us to use their own sharing buttons and JavaScript. Instead we can provide sharing functionality with HTML without compromising speed or privacy. These links look pretty bland by default, but using CSS and images we can provide some very attractive sharing buttons!