Create custom share buttons for different social media platforms


Note


The tutorial video and code were created in 2017 and they still work. We are updating our tutorial pages so you may see different variations of the code that were not seen in the original video(s).


Video Description

Tutorial Details


We will be using the Share API codes via URL pattern for several social media platforms, such as: Facebook Messenger, Facebook, Google Bookmark, Google Plus, Blogger, Kik, Pinterest, LinkedIn, Twitter, Tumblr, Email, WhatsApp and Reddit.


Many people have wanted to create a custom share button on their website to share product pages or other regular pages on from their site without having to worry about paying an app to do this for them. The best way to integrate this technique is to pin some share buttons on the screen and have the code trigger the share link each time the page loads so that the website visitor can press the appropriate social media icon and share that generated URL.


 

Good to Know #1

The Code to share a page with an image file


The tutorial video used this code on a dynamic page.



/*

To share on Facebook Messenger you need a Facebook App ID (app_id=). You have to create one using this link via Facebook https://developers.facebook.com/quickstarts/.  

The Facebook Messenger share API requires a redirect URL and it looks like this in the code below:  uri=https%3A%2F%2Fwww.totallycodable.com

To share via Email Wix says the only pieces of information supported at the moment are the TO email and the Subject. So I have updated the code below to show the URL in the Subject line.


*/

import wixLocation from 'wix-location';
import wixCRM from 'wix-crm';

let picture;
let url;
let filename;
let link;

$w.onReady(function () {
    link = wixLocation.url;
 let item = $w('#dynamicDataset').getCurrentItem();
    picture = item.image;
    url = picture.split("/")[3];
    filename = item.title;

    $w("#pinterestShare").link = `https://www.pinterest.com/pin/create/button/?url=${link}&media=https%3A%2F%2Fstatic.wixstatic.com/media/${url}?&description=${filename}&display=popup`;
    $w("#twitterShare").link = `https://twitter.com/share?url=${link}&display=popup`;
    $w("#facebookShare").link = `https://www.facebook.com/sharer/sharer.php?u=${link}&display=popup`;
    $w("#tumblrShare").link = `http://www.tumblr.com/share/link?url=${link}&display=popup`;
    $w("#mailShare").link = `mailto:?subject=${