Log something crazy, but intresting.
Add Social Sharing Buttons To HTML Site
Date:
Social sharing buttons on your site lets your reader share your content with their friends. It is good to have them, you don't want your user to copy and paste URLs from the browser. You want to make sharing possible with a simple button.
I have an HTML site and I have these social sharing buttons with no plugins, no third-party code or CDN images. Moreover, they are automated I don't have to edit the link every time I write a new post.
There are plenty of ways to get these HTML share buttons but I like it when I don't have to be dependent on others.
For a small site will a limited number of views and pages it's really easy to edit the sharing codes but the tricky part is to automate them so that you don't have to edit them every time.
Let's look at the two best options you have.
1# Social Sharing Buttons (DIY)
Step 1
Get good-quality images or icons for social sites. I got my social media icon from FlatIcon they are free. The size I chose is 32px but if you want the bigger one that is your preference.
Step 2 (optional)
I converted the PNG images to new generation WebP format, you can do it if you want. With this, they are lighter and take less space and bandwidth.
Step 3
Upload them to a directory on your server, mine are in a directory ../assets/images. You can place them anywhere just remember the path.
Step 4
Add the below code in your body tag <body>...</body> where you want the social sharing buttons to display.
<div class="share-block">
<table class="share-block-position">
<tr>
<td>
<p>Share this:</p>
</td>
<td>
<a class="twitter-share" target="blank" rel="noopener noreferrer">
<img
class="social-share"
src="../assets/images/share-on-twitter.webp"
alt="share-on-twitter" /></a>
<a class="facebook-share" target="blank" rel="noopener noreferrer">
<img
class="social-share"
src="../assets/images/share-on-facebook.webp"
alt="share-on-facebook" /></a>
<a class="linkedin-share" target="_blank" rel="noopener noreferrer">
<img
class="social-share"
src="../assets/images/share-on-linkedin.webp"
alt="share-on-linkedin" /></a>
<a class="reddit-share" target="blank" rel="noopener noreferrer">
<img
class="social-share"
src="../assets/images/share-on-reddit.webp"
alt="share-on-reddit" /></a>
<a class="pinterest-share" target="blank" rel="noopener noreferrer">
<img
class="social-share"
src="../assets/images/share-on-pinterest.webp"
alt="share-on-pinterest" /></a>
</td>
</tr>
</table>
</div>
Step 5
Just before where the body tag ends </body> place the below script
<script>
const link = encodeURI(window.location.href);
const twittershare = document.querySelector(".twitter-share");
twittershare.href = `https://twitter.com/intent/tweet?url=${link}`;
const facebookshare = document.querySelector(".facebook-share");
facebookshare.href = `https://www.facebook.com/share.php?u=${link}`;
const linkedinshare = document.querySelector(".linkedin-share");
linkedinshare.href = `https://www.linkedin.com/shareArticle?mini=true&url=${link}`;
const redditshare = document.querySelector(".reddit-share");
redditshare.href = `https://reddit.com/submit?url=${link}`;
const pinterestshare = document.querySelector(".pinterest-share");
pinterestshare.href = `https://pinterest.com/pin/create/button/?url=${link}`;
</script>Step 6
A bit of CSS will give the buttons a great look add the below style and you are welcome to edit it if you like.
.share-block {
margin-top: .01rem;
text-align: center;
}
.share-block p {
font-size: 1.25rem;
padding-bottom: 5%;
margin-bottom: .5%;
margin-top: .5%;
font-weight: 600;
}
.share-block a {
display: inline-block;
transition: all 0.3s;
margin: 0 0.25rem;
}
.share-block a:hover {
transform: scale(1.1);
}
.share-block-position {
margin-left: auto;
}
.social-share {
width: 32px;
height: 32px;
}
2# Using a Third-Party Code
There are sites such as ShareThis, AddThis and Elfsight which do this for you. You can easily edit the looks and embed the code in the header and you have these social sharing buttons on your site where ever you want.
The problem with this is that if they shut it down your sharing capability also goes down.
Let's assume you have hundreds of blog posts and the service which was free is now chargeable. What are you going to do, go back and code the buttons on every single page? It's a great easy service but it's a trap for the future.
So, start from day one and don't be dependent on any third-party code.
Elfsight on the other hand has plans the free plan is only for 200 views and I find it absurd to pay for something like this.
Why Should You Add Social Sharing Buttons?
It's easier for the user to share your content on their social media account it is also for you to share when required.
Social media has the ability to get more views and engagement on your site.
If you visit any of the website which publishes content you will find these social buttons a lot.
Now you can have them too on your HTML site without depending on any third code or sites.
Who Should Add These Buttons?
Everyone should have social sharing buttons on their site. The above code is for those who are running HTML sites and don't want to have third-party code on their site.
With more creativity in the CSS you can get more styles.
The above code will be similar to the sharing buttons on this site. I have not changed anything. Feel free to copy and edit as you need.
Conclusion
It is good to have social sharing ability on your site. Most of the blogging platforms will have plugins to add this feature but when it comes to HTML you have to code yourself. You can use third-party codes for that, but it will be wise if you can do it on your own.
Social engagement on your content is always good for a website. A lot of customization can be done by you on the buttons when you code your way. I only have five buttons but you can add as many you want.
|
Share this: |
|
|
|
|
|