Adding Social Share Buttons to a page hosted on Zyro.com
Social Share Buttons code
HOW TO
Gintautas Mežetis
8/21/20232 min read
Adding Social Share Buttons to a page hosted on Zyro.com
Finding the right way to add social share buttons to muy site page hosted on Zyro.com was a challenge. The goal was to enable readers to share the pages content on popular social media platforms like LinkedIn, Facebook, and Twitter without having to manually copy and paste the URL in to a social share code every time a new page or blog post was written.
The Solution
The solution was found by using JavaScript to dynamically get the current page's URL and concatenate it with the appropriate sharing URL for each platform. I further styled the buttons with Font Awesome icons and organized them in a table to align them beautifully.
Code to Embed
This code will create a table with two columns: the first one for the icons (centered), and the second one for the links (left-aligned). Feel free to further customize the appearance as needed. Copy and paste the following code into the "Add element" -> "Embed code" section of your Zyro.com blog or other page you want your readers to be able to share
Copy code bellow:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
.icon-cell {
text-align: center;
width: 30px;
}
.link-cell {
text-align: left;
}
table {
border-collapse: collapse;
}
td {
padding: 5px;
border: none;
}
</style>
</head>
<body>
<!-- Your existing content -->
<table>
<tr>
<td class="icon-cell"><i class="fab fa-linkedin"></i></td>
<td class="link-cell"><a id="linkedin-share" href="#" target="_blank">Share on LinkedIn</a></td>
</tr>
<tr>
<td class="icon-cell"><i class="fab fa-facebook-f"></i></td>
<td class="link-cell"><a id="facebook-share" href="#" target="_blank">Share on Facebook</a></td>
</tr>
<tr>
<td class="icon-cell"><i class="fab fa-twitter"></i></td>
<td class="link-cell"><a id="twitter-share" href="#" target="_blank">Share on Twitter</a></td>
</tr>
</table>
<!-- Script at the end of the body -->
<script>
window.onload = function() {
// Try to get the URL of the top-level window, not the iframe
var url = encodeURIComponent(window.top.location.href);
document.getElementById('linkedin-share').href = 'https://www.linkedin.com/shareArticle?mini=true&url=' + url;
document.getElementById('facebook-share').href = 'https://www.facebook.com/sharer/sharer.php?u=' + url;
document.getElementById('twitter-share').href = 'https://twitter.com/intent/tweet?url=' + url;
};
</script>
</body>