There are a lots of ways for implementing social sharing options for various cms. Especially for shopify, many themes have hard coded the social share option in the code itself and if not, there are lots of apps available on shopify app store for getting the functionality added to your shopify store.
We had a client who wanted to have just a share button which would trigger a general share option that we see in native functionality of Android and iOS apps. When we click on the share option, the list of apps are available and the user can select which app the data he wants to share on.
Obviously with growing number of social media apps, it is practically not possible to integrate sharing option for all the apps. Most of the scripts and apps for shopify give option to provide sharing for famous social media platforms. However this may turn to limit the sharing option.
We created a general share option using the WebShare API so that the user can get an option to share the page/product link in whichever app they want to.
General code was obtained from the codepen (https://codepen.io/ayoisaiah/pen/YbNazJ) and modified to fit the shopify structure.
Now lets dive into the code.
1. First of all, we need to add a Custom Liquid block in the shopify customizer on page/product where you want to display the sharing option.
2. There are 3 parts of the code. (a) html (b) JavaScript (c) CSS. Now copy the below code and it will add all the 3 to your website
<div class="share-dialog">
<header>
<h3 class="dialog-title">Share</h3>
<button class="close-button"><svg><use href="#close"></use></svg></button>
</header>
<div class="targets">
<a class="button">
<svg>
<use href="#facebook"></use>
</svg>
<span>Facebook</span>
</a>
<a class="button">
<svg>
<use href="#twitter"></use>
</svg>
<span>Twitter</span>
</a>
<a class="button">
<svg>
<use href="#linkedin"></use>
</svg>
<span>LinkedIn</span>
</a>
<a class="button">
<svg>
<use href="#email"></use>
</svg>
<span>Email</span>
</a>
</div>
<div class="link">
<div class="pen-url">https://codepen.io/ayoisaiah/pen/YbNazJ</div>
<button class="copy-link">Copy Link</button>
</div>
</div>
<button class="share-button" type="button" title="Share this article">
<svg>
<use href="#share-icon"></use>
</svg>
<span>Share</span>
</button>
<svg class="hidden">
<defs>
<symbol id="share-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="15"></line></symbol>
<symbol id="facebook" viewBox="0 0 24 24" fill="#3b5998" stroke="#3b5998" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-facebook"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></symbol>
<symbol id="twitter" viewBox="0 0 24 24" fill="#1da1f2" stroke="#1da1f2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></symbol>
<symbol id="email" viewBox="0 0 24 24" fill="#777" stroke="#fafafa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></symbol>
<symbol id="linkedin" viewBox="0 0 24 24" fill="#0077B5" stroke="#0077B5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></symbol>
<symbol id="close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="9" x2="15" y2="15"></line><line x1="15" y1="9" x2="9" y2="15"></line></symbol>
</defs>
</svg>
<script>
const shareButton = document.querySelector('.share-button');
const shareDialog = document.querySelector('.share-dialog');
const closeButton = document.querySelector('.close-button');
shareButton.addEventListener('click', event => {
if (navigator.share) {
navigator.share({
title: '{{ product.title}}',
url: '{{ product.url }}'
}).then(() => {
console.log('Thanks for sharing!');
})
.catch(console.error);
} else {
shareDialog.classList.add('is-open');
}
});
closeButton.addEventListener('click', event => {
shareDialog.classList.remove('is-open');
});
</script>
<style>
.hidden {
display: none;
}
svg {
width: 20px;
height: 20px;
margin-right: 7px;
}
button, .button {
display: inline-flex;
align-items: center;
justify-content: center;
height: auto;
padding-top: 8px;
padding-bottom: 8px;
color: #777;
text-align: center;
font-size: 14px;
font-weight: 500;
line-height: 1.1;
letter-spacing: 2px;
text-transform: capitalize;
text-decoration: none;
white-space: nowrap;
border-radius: 4px;
border: 1px solid #E8C7CF;
cursor: pointer;
}
button:hover, .button:hover {
border-color: #E8C7CF;
}
.share-button, .copy-link {
padding-left: 30px;
margin-top: 30px;
padding-right: 30px;
}
.share-button, .share-dialog {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.share-dialog {
display: none;
width: 95%;
max-width: 500px;
box-shadow: 0 8px 16px rgba(0,0,0,.15);
z-index: -1;
border: 1px solid #ddd;
padding: 20px;
border-radius: 4px;
background-color: #fff;
}
.share-dialog.is-open {
display: block;
z-index: 2;
}
header {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.targets {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
margin-bottom: 20px;
}
.close-button {
background-color: transparent;
border: none;
padding: 0;
}
.close-button svg {
margin-right: 0;
}
.link {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
border-radius: 4px;
background-color: #eee;
}
.pen-url {
margin-right: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
Please note that this code is for adding share option on the product page and hence we have used the parameters product.title and product.url. You can change it the page if you like to display this button on the page.
0 Comments