How to add social sharing buttons on your Jekyll Blog using GitHub pages
November 28, 2017 ·
6 mins read
Having a social share button with social media icons on your blog provides a lot of freedom to the content creators. With social share buttons or social media icons, you are asking your readers to share your content with there links on the social platforms. Social share buttons provide free and useful traffic to your website and allow you to worry less about things like whether the user will like your content or not. If your users like your content, it will definitely be shared a lot. At the same time, social media icons provide a creative way of increasing clicks to the social share buttons.
1. Free advertising for your Jekyll blog using social share buttons
2. Get automatic natural links for your Jekyll blogs with social share buttons
3. Help you to find what works for your blog
4. How will it look like.
5. How to get this working
Today we have added a default social sharing buttons to all the blog posts. Our default social sharing buttons are catchy and at the same time, they are simple as well. People who will read your content will be prompted to share your content with his/her social channels.
Today, I am going to share the importance of social share buttons in the success of a Jekyll blog or a simple blog in general.
2. Get automatic natural links for your Jekyll blogs with social share buttons
3. Help you to find what works for your blog
4. How will it look like.
5. How to get this working
Free advertising for your Jekyll blog using social share buttons
Social share buttons are important as it is tough for a person to copy the link and paste it into their social media channel and share it with there friends. Instead of that, we can provide a platform to them in which they can share the content with just one click. With this, you can direct and get free traffic to your posts. Social media is still a strong contender in terms of generating traffic especially when you are not generating enough search engine traffic. At the same time, you don’t have to pay anything for social media channels. It’s free traffic and I know everyone loves anything which is free.Get automatic natural links for your Jekyll blogs with social share buttons
With each person sharing your content with there social media, you get the opportunity to increase natural links to your blogs. As you keep increasing the number of natural links to your blog, more people will be derived from your content using social media. These natural links can act in deriving your Search engine status. This is because the search engine gives a lot of credit to the content which is highly shared on social media.Better User experience with social share buttons
Social share buttons act as good user experience for your reader. When the user finds such an interesting thing on your blog, they will be compelled to click on it. Once they click on it, they will directly be helping you to build your status online for search engines and for other visitors.Help you to find what works for your blog
With the social share buttons, you can really find out what works for your blog and what doesn’t. The total number of shares will tell you everything. Whether people liked the new experiment that you did with your blog. Every question of the content creator can be answered with these social share click count. With that being said let’s put these new social share buttons to experiment and see how it works for you. Now that you know the advantages of having social share buttons on your blog, let’s see how we can create it on our Jekyll website.How will it look like.
How to get this working
You can copy the following code to_includes/share-bar.html file.
Now you can include this wherever you want to show the share button widget. Use the following code for this.
<div id="share-bar">
<h4 class="share-heading">Liked it? Sing it Loud and Proud:</h4>
<div class="share-buttons">
<a class="horizontal-share-buttons" href="https://www.facebook.com/sharer/sharer.php?u=https://ranvir.xyz/blog/why-and-how-to-add-social-sharing-buttons-on-your-jekyll-blog-using-github-pages/"
onclick="gtag('event', 'Facebook', {'event_category':'Post Shared','event_label':'Facebook'}); window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Facebook" >
<span class="icon-facebook2">Facebook</span>
</a>
<a class="horizontal-share-buttons" href="https://twitter.com/intent/tweet?text=How to add social sharing buttons on your Jekyll Blog using GitHub pages&url=https://ranvir.xyz/blog/why-and-how-to-add-social-sharing-buttons-on-your-jekyll-blog-using-github-pages/"
onclick="gtag('event', 'Twitter', {'event_category':'Post Shared','event_label':'Twitter'}); window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Twitter" >
<span class="icon-twitter">Twitter</span>
</a>
<a class="horizontal-share-buttons" href="http://www.reddit.com/submit?url=https://ranvir.xyz/blog/why-and-how-to-add-social-sharing-buttons-on-your-jekyll-blog-using-github-pages/"
onclick="gtag('event', 'Reddit', {'event_category':'Post Shared','event_label':'Reddit'}); window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Reddit" >
<span class="icon-reddit">Reddit</span>
</a>
<a class="horizontal-share-buttons" href="https://news.ycombinator.com/submitlink?u=https://ranvir.xyz/blog/why-and-how-to-add-social-sharing-buttons-on-your-jekyll-blog-using-github-pages/&t=How to add social sharing buttons on your Jekyll Blog using GitHub pages"
onclick="gtag('event', 'Hacker News', {'event_category':'Post Shared','event_label':'Hacker News'}); window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Submit to Hacker News">
<span class="icon-hackernews">Hackernews</span>
</a>
<a class="horizontal-share-buttons" href="https://www.linkedin.com/shareArticle?mini=true&url=https://ranvir.xyz/blog/why-and-how-to-add-social-sharing-buttons-on-your-jekyll-blog-using-github-pages/&title=How to add social sharing buttons on your Jekyll Blog using GitHub pages&summary=&source=Ranvir's Blog"
onclick="gtag('event', 'LinkedIn', {'event_category':'Post Shared','event_label':'LinkedIn'}); window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on LinkedIn" >
<span class="icon-linkedin">LinkedIn</span>
</a>
<!-- <a href="http://pinterest.com/pin/create/button/?url=https://ranvir.xyz/blog/why-and-how-to-add-social-sharing-buttons-on-your-jekyll-blog-using-github-pages/"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Pinterest" >
<i class="fa fa-pinterest-p share-button"> pinterest</i>
</a> -->
<!-- <a href="http://www.tumblr.com/share/link?url=https://ranvir.xyz/blog/why-and-how-to-add-social-sharing-buttons-on-your-jekyll-blog-using-github-pages/"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Tumblr" >
<i class="fa fa-tumblr share-button"> tumblr</i>
</a> -->
<a class="horizontal-share-buttons" href="mailto:?subject=How to add social sharing buttons on your Jekyll Blog using GitHub pages&body=Check out this site https://ranvir.xyz/blog/why-and-how-to-add-social-sharing-buttons-on-your-jekyll-blog-using-github-pages/"
onclick="gtag('event', 'Emain', {'event_category':'Post Shared','event_label':'Email'}); window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share via Email" >
Email
</a>
</div>
</div>
<style type="text/css">
/* Share Bar */
#share-bar {
font-size: 20px;
border: 3px solid #7de77b;
border-radius: 0.3em;
padding: 0.3em;
background: rgba(125,231,123,.21)
}
.share-heading {
margin-top: 0px;
}
/* Title */
#share-bar h4 {
margin-bottom: 10px;
font-weight: 500;
}
/* All buttons */
.share-buttons {
}
.horizontal-share-buttons {
border: 1px solid #928b8b;
border-radius: 0.2em;
padding: 0.2em;
margin-right: 0.2em;
line-height: 2em;
}
/* Each button */
.share-button {
margin: 0px;
margin-bottom: 10px;
margin-right: 3px;
border: 1px solid #D3D6D2;
padding: 5px 10px 5px 10px;
}
.share-button:hover {
opacity: 1;
color: #ffffff;
}
/* Facebook button */
.icon-facebook2 {
color: #3b5998;
}
.icon-facebook2:hover {
background-color: #3b5998;
color: white;
}
/* Twitter button */
.icon-twitter {
color: #55acee;
}
.icon-twitter:hover {
background-color: #55acee;
color: white;
}
/* Reddit button */
.icon-reddit {
color: #ff4500;
}
.icon-reddit:hover {
background-color: #ff4500;
color: white;
}
/* Hackernews button */
.icon-hackernews {
color: #ff4500;
}
.icon-hackernews:hover {
background-color: #ff4500;
color: white;
}
/* LinkedIn button */
.icon-linkedin {
color: #007bb5;
}
.icon-linkedin:hover {
background-color: #007bb5;
color: white;
}
</style>
_layout/post.html.
I hope that you liked the post. Please share this post with your friends and share it on social media. Also, please try to use the share bar for this purpose and let us know how it works.
Please share your Feedback:
Did you enjoy reading or think it can be improved? Don’t forget to leave your thoughts in the comments section below! If you liked this article, please share it with your friends, and read a few more!