How to implement social sharing buttons
Unnoticed, they watch us nearly from every website we visit: social sharing buttons. Twitter, Facebook, LinkedIn — you name it. This story tells you how to implement them on your site as links (no scripts whatsoever). What are your benefits? Better control over your source code and compliance (do you really know what the button script is doing behind the scenes?), less complexity and loading overhead, custom styled buttons, support even with disabled script. Convinced? Then keep reading.
[TL;DR: Use embedded links to share your content, include Open Graph tags, size your images properly, use previewers/debuggers]
Click 1. Get the links.
<a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://YOUR-SITE-HERE.com">Facebook</a>Source is mentioned here. Tough Facebook announced that the sharer does no longer support detailed parameters, "e=somequote still works. With it you can either pass some highlighted text dynamically or preset it to some value. Please note that the user cannot edit it, hence I think it is not really user-friendly.
Another parameter option that you have is &display=page or &display=popup (default) which allow you to manage the way your share dialog is displayed. However, to my opinion, the name is somehow misleading: with display=page your user will see a popup whereas display=popup displays it fullscreen. Check yourself out:
Be aware that these tweak options are not meant by Facebook to be used with the sharer — so do not rely on them too much. Styling of title, image and description, on the other hand, should be OK. Go to “Click 2. Open Graph” section to learn more about it.
<a class=”twitter-share-button” target=”_blank” href=”https://twitter.com/intent/tweet?url=https://YOUR-SITE-HERE.com">Twitter</a>Twitter offers a share link option in its documentation, but indicates that JavaScript should be loaded additionally. However, the snippet is used just to style the button. The link keeps its functionality even without it.
You can customize your tweet with &text, &hashtags and &via parameters. Pass your hashtags as coma-separated values. Text always comes first, followed by URL, hashtags and via info — no matter how you order your query. If you want to tweak it or add some pictures, check out this article.
<a href=”https://www.linkedin.com/shareArticle?mini=true&url=https://YOUR-SITE-HERE.com" target=”_blank”>LinkedIn</a>It used to be possible to pass title, summary and source as customized parameters, but it seems to be no longer supported. Instead, the information from the Open Graph tags is being displayed in the share preview.
All in all, LinkedIn seems to hide (or no longer actively support) this option.
<a target=”_blank” href=”https://www.xing.com/spi/shares/new?url=https://YOUR-SITE-HERE.com">Xing</a>Xing offers a follow_url parameter. This is a URL of a XING news page (should start with “https://www.xing.com/news/…”) for the Follow button shown on the success page. Unfortunately, no text can be appended to the URL.
Click 2. Open Graph
Wandering, how to change the title or description, if there is no query parameter in the links above? This can be done by the use of the Open Graph tags.
<meta property="og:url"
content="http://www.nytimes.com/2015/02/19..." />
<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 ..." />
<meta property="og:image"
content="http://static01.nyt.com/images/...jpg" />They belong into your <head> tag and are used by all social button providers. However, Facebook additionally requires “fb:app_id” tag if you want to use Facebook Insights and view analytics for traffic to your site from Facebook. Xing offers one more tag: <meta property=”og:site_name” content=”XING Developer”>. Twitter uses platform-specific cards which can be augmented by OG tags:
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />- Facebook guidelines for OG tags
- Twitter guidelines for OG tags and Twitter cards
- LinkedIn guidelines for OG tags
- Xing guidelines for OG tags
Click 3. Pics, pics, pics!
Once you’ve settled the text, it’s time to take care of your images. Even if you’ve provided the correct path to the picture that you want to be used, there are still a couple of aspects that you should consider. Thus, Facebook has dedicated the whole page to their requirements. They concern minimum dimensions, max size, file extension and optimal ration. For example, LinkedIn has the following criteria to consider: max file size: 5 MB, minimum image dimensions: 1200 (w) x 627 (h) pixels, recommended ratio: 1.91:1. If you don’t want beheaded people in your share pictures, you’d better resize accordingly.
- Facebook guidelines for images
- Twitter guidelines for images
- LinkedIn guidelines for images
- (No official guidelines found for Xing)
Click 4. Preview & Debug
You’ve followed all the steps and it still does not work as desired? To start with the obvious — your localhost link will not be shared. The share-preview of your password-protected development server will be not displayed correctly neither. There is a workaround described here, but to me it sounds too complicated.
Another reason might be the incorrect html structure or even missing <head> tag — that is where the social platforms are searching for OG tags.
Here are some troubleshooting ideas from Xing:
- If the website doesn’t return a status of 200 (after the maximum number of redirects is reached)
- If the URL to be shared is not properly encoded.
- The website reaches the maximum number of redirects (20).
- The website takes more than the 15 seconds timeout to deliver the content.
- The website content is bigger than the maximum reading size (20Mb).
The Sharing Debugger from Facebook is of great help, too. It allows you to see the information that is used when your website content is shared on Facebook, Messenger and other places. With this, you can understand what is missing. Additionally, check out OG tag Debugger. Since OG tags are used by all platforms, it will also help you with Twitter, LinkedIn and Xing.
Finally, do not panic — you are not alone. Check out this Stack Overflow thread with useful tips.
Well, that’s it. No script, just HTML. I have a feeling that this option is slowly disappearing from developer documentation. So, let’s keep and share this “secret knowledge” as long as it is working.
Interested in further nice features for your personal website? Check out another article from the “Vanity fair” series:
[Disclaimer: you think the author misses the point or provides incorrect information? Blame the author AND provide missing / relevant / correct information in your comments — help other readers (and the author) to get it straight! a.k.a. #learningbysharing]
