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.
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.
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.
- Create a Facebook developer account, if you have not already.
- 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/shareParameters
| 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.
|
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=XXXXXXXXXXXXXXX&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>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/shareArticleParameters
| 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.&source=stevenwestmoreland.com" rel="noopener" target="_blank">Share on LinkedIn</a>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/tweetParameters
| 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>