But don’t forget! Most of them are ordinary links, which don’t require anything except a link tag. So how can you add the most common social share links to your page?
Facebook is probably one of the most popular social networks. Unfortunately, you can only share a URL, but you can’t prefill the text to comment. Therefore, the share link is rather straight forward:
Just remember, that
[SHARE URL] has to be a valid URL, or the link won’t work.
Next on the list is twitter. By specifying the
[SHARE TEXT] it is possible the prefill the tweet with any textual content you like:
https://twitter.com/home?status=[SHARE TEXT] (works as well)
To enable sharing via WhatsApp, one can use the following link. For WhatsApp it is possible to specify content, which will be prefilled. If the user has WhatsApp installed, this link will open the App and ask to select a contact to send the message to.
This share link only makes sense on mobile (maybe tablet as well) devices. So be sure to include appropriate checks, or your users might get confused.
E-Mail is the next one on the list. Old, but still used to share links and information. Just as you might have imagined, you can specify a receiver email adress, a subject and the content of the email:
mailto:[TO EMAIL]?subject=[SHARE TITLE]&body=[SHARE TEXT]
[TO EMAIL] part is completely optional. If it is not specified, the email agent will prepare the email with the given subject and body.
SMS share links are a bit special. Different behaviour on Android and iOS. You don’t actually have to set a [PHONE NUMBER]. If you leave it blank the user will be able to select a recipient. The message will be prefilled with the given text.
sms:[PHONE NUMBER]?body=[SHARE TEXT]
(This link will only work on Android though. See Update for further details)
To sum up, it is very easy to get started and integrate social share links into your website.
Keep in Mind: Don’t forget to URL encode the text content you want to share with these links.
Read up on this topic:
It appears, that iOS handles the SMS share links differently than Android. Android accepts a link format like
sms:[PHONE NO]?body=[TEXT CONTENT]. However, this will fail on iOS. Instead you have to use
sms:[PHONE NO];body=[TEXT CONTENT] for old iOS versions and
sms:[PHONE NO]&body=[TEXT CONTENT] for iOS 8 and above. Take note of the delimiter in front of the body parameter!
Check out How to pre-populate the sms body text via an html link via StackOverflow.