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=${link}`;
$w("#whatsappShare").link = `https://api.whatsapp.com/send?phone=&text=${link}&display=popup`;
$w("#googleShare").link = `https://plus.google.com/share?url=${link}&display=popup`;
$w("#linkedShare").link = `https://www.linkedin.com/shareArticle?mini=true&url=${link}&display=popup`;
$w("#redditShare").link = `http://www.reddit.com/submit?url=${link}&display=popup`;
$w("#bookmarkGoogle").link = `https://www.google.com/bookmarks/mark?op=edit&bkmk=${link}&title=${filename}&annotation=${filename}&labels=${filename}&display=popup`;
$w("#bloggerShare").link = `https://www.blogger.com/blog-this.g?u=${link}&n=${filename}&t=${filename}&display=popup`;
$w("#messengerShare").link = `https://www.facebook.com/dialog/send?link=${link}&app_id=985159018329177&redirect_uri=https%3A%2F%2Fwww.totallycodable.com&display=popup`;
$w("#kikShare").link = `http://share-api.kik.com/share.do?url=${link}&title=${filename}`;
});

export function pinterestShare_click(event) {
$w("#pinterestShare").target = "_blank";
}

export function twitterShare_click(event) {
$w("#twitterShare").target = "_blank";
}

export function facebookShare_click(event) {
$w("#facebookShare").target = "_blank";
}

export function tumblrShare_click(event) {
$w("#tumblrShare").target = "_blank";
}

export function mailShare_click(event) {
$w("#mailShare").target = "_blank";
}

export function whatsappShare_click(event) {
$w("#whatsappShare").target = "_blank";
}

export function googleShare_click(event) {
$w("#googleShare").target = "_blank";
}

export function linkedShare_click(event) {
$w("#linkedShare").target = "_blank";
}

export function redditShare_click(event) {
$w("#redditShare").target = "_blank";
}

export function bookmarkGoogle_click(event) {
$w("#bookmarkGoogle").target = "_blank";
}

export function bloggerShare_click(event) {
$w("#bloggerShare").target = "_blank";
}

export function messengerShare_click(event) {
$w("#messengerShare").target = "_blank";
}

export function kikShare_click(event) {
$w("#kikShare").target = "_blank";
}

export function downloadButton_click(event, $w) {
wixLocation.to(`https://static.wixstatic.com/media/${url}?dn=${filename}`);
}

Good to Know #2

The Code to share a page with no image file

This an example of a code that could be used on a regular 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 link;

$w.onReady(function () {

link = wixLocation.url;

$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=${link}`;
$w("#whatsappShare").link = `https://api.whatsapp.com/send?phone=&text=${link}&display=popup`;
$w("#googleShare").link = `https://plus.google.com/share?url=${link}&display=popup`;
$w("#linkedShare").link = `https://www.linkedin.com/shareArticle?mini=true&url=${link}&display=popup`;
$w("#redditShare").link = `http://www.reddit.com/submit?url=${link}&display=popup`;
$w("#bookmarkGoogle").link = `https://www.google.com/bookmarks/mark?op=edit&bkmk=${link}&display=popup`;
$w("#bloggerShare").link = `https://www.blogger.com/blog-this.g?u=${link}&display=popup`;
$w("#messengerShare").link = `https://www.facebook.com/dialog/send?link=${link}&app_id=985159018329177&redirect_uri=https%3A%2F%2Fwww.totallycodable.com&display=popup`;
$w("#kikShare").link = `http://share-api.kik.com/share.do?url=${link}`;
});

export function twitterShare_click(event) {
$w("#twitterShare").target = "_blank";
}

export function facebookShare_click(event) {
$w("#facebookShare").target = "_blank";
}

export function tumblrShare_click(event) {
$w("#tumblrShare").target = "_blank";
}

export function mailShare_click(event) {
$w("#mailShare").target = "_blank";
}

export function whatsappShare_click(event) {
$w("#whatsappShare").target = "_blank";
}

export function googleShare_click(event) {
$w("#googleShare").target = "_blank";
}

export function linkedShare_click(event) {
$w("#linkedShare").target = "_blank";
}

export function redditShare_click(event) {
$w("#redditShare").target = "_blank";
}

export function bookmarkGoogle_click(event) {
$w("#bookmarkGoogle").target = "_blank";
}

export function bloggerShare_click(event) {
$w("#bloggerShare").target = "_blank";
}

export function messengerShare_click(event) {
$w("#messengerShare").target = "_blank";
}

export function kikShare_click(event) {
$w("#kikShare").target = "_blank";
}

Author

by Code Queen

Services world wide

Stuck on a project? Hire Code Queen, LLC!

Schedule a phone call or video call directly online. In a different time zone? No problem! Code Queen currently has clients around the world.

Online Booking: Discovery Session

Contact Form: Send project details

6260