Creating social sharing links without third-party JavaScript

Posted on

If you want to include links on your site to share a page on Facebook, LinkedIn or Twitter, there is often no need to include the JavaScript SDKs for each of the social networks on your website.

Performance difference
Click to reveal the performance impact of loading the JavaScript SDKs for Facebook, LinkedIn, and Twitter.

You can use a specially crafted link – a URL with a query string – to show a share dialog for each of these social networks. Combine this with the target="_blank" attribute to open the link in a new window.

Note: For performance and security reasons, you should add the rel="noopener" attribute to links that use the target="_blank" attribute.

If you haven’t already, you should add Open Graph meta tags to the pages you intend to share. These tags allow you to control how your content appears on social networks.

Facebook

The Facebook crawler relies on Open Graph markup to determine how your website content is displayed. Use the Sharing Debugger to see the information that is used when your website content is shared on Facebook and Messenger.

Facebook provides a share dialog, but requires that you create a Facebook App ID and provide your App ID as part of the request.

  1. Create a Facebook developer account, if you have not already.
  2. Create a new Facebook App to get your App ID.

Use the URL and the parameters provided below to create a social sharing link for Facebook. Parameters should be properly URL-encoded.

URL
https://www.facebook.com/dialog/share
Parameters
Parameter Description Required
app_id Your app's unique identifier. See Creating an App ID. Yes
redirect_uri The URL to redirect to after a person clicks a button on the dialog. Required when using URL redirection. No*
display Determines how the dialog is rendered.
  • If you are using URL redirection, the display type should be page.
  • Otherwise, the display type should be popup.
Yes
href The link attached to this post. Include open graph meta tags in the page at this URL to customize the story that is shared. Yes
hashtag A hashtag specified by the developer to be added to the shared content. The hashtag should include the hash symbol (e.g. #facebook). No
quote A quote to be shared along with the link, either highlighted by the user or predefined by the developer, as in a pull quote on an article. This parameter is not available for Facebook URLs. No
Example
<a href="https://www.facebook.com/dialog/share?app_id=503487836749475&display=popup&href=https%3A%2F%2Fstevenwestmoreland.com%2F2018%2F07%2Fcreating-social-sharing-links-without-javascript.html" rel="noopener" target="_blank">Share on Facebook</a>

LinkedIn

The LinkedIn crawler also relies on Open Graph markup, but optionally allows you to provide specific title, summary and source parameters. Content crawled by LinkedIn is cached for a period of approximately 7 days. You can use the Post Inspector to see the information that is used when your website content is shared on LinkedIn.

Use the URL and the parameters provided below to create a social sharing link for LinkedIn.

URL
https://www.linkedin.com/shareArticle
Parameters
Parameter Description Max Length Required
url The url-encoded URL of the page that you wish to share. 1024 Yes
mini A required argument whose value must always be true. 4 Yes
title The url-encoded title value that you wish you use. 200 No
summary The url-encoded description that you wish you use. 256 No
source The url-encoded source of the content (e.g. your website or application name). 200 No
Example
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fstevenwestmoreland.com%2F2018%2F07%2Fcreating-social-sharing-links-without-javascript.html&title=Creating+social+sharing+links+without+third-party+JavaScript&summary=How+to+create+social+sharing+links+for+your+website+without+having+to+load+third-party+JavaScript+SDKs.&source=stevenwestmoreland.com" rel="noopener" target="_blank">Share on LinkedIn</a>

Twitter

Twitter provides a Tweet Web Intent to compose a tweet with optional hashtags and url parameters. You can use the Twitter card validator to see the information that is used for the when your website content is shared on Twitter.

Getting Started with Cards describes in greater detail how Twitter uses Open Graph markup.

Use the URL and the parameters provided below to create a social sharing link for Twitter.

URL
https://twitter.com/intent/tweet
Parameters
Parameter Description Required
text Pre-populated UTF-8 and URL-encoded Tweet text. The passed text will appear pre-selected for a Twitter user to delete or edit before posting. The length of your passed Tweet text should not exceed 280 characters when combined with any passed hashtags, via, or url parameters. Yes
url A fully-qualified URL with a HTTP or HTTPS scheme, URL-encoded. No
hashtags Allow easy discovery of Tweets by topic by including a comma-separated list of hashtag values without the preceding # character. No
via A Twitter username to associate with the Tweet, such as your site’s Twitter account. The provided username will be appended to the end of the Tweet with the text “via @username”. No
Example
<a href="https://twitter.com/intent/tweet?text=Creating+social+sharing+links+without+third-party+JavaScript&url=https%3A%2F%2Fstevenwestmoreland.com%2F2018%2F07%2Fcreating-social-sharing-links-without-javascript.html&via=swestmoreland" rel="noopener" target="_blank">Share on Twitter</a>