How to add social sharing buttons on your Jekyll Blog using GitHub pages

November 28, 2017 · 7 mins read
Categories: jekyll   | githubpages   | seo |

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.

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.

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.

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.

Social sharing buttons on Jekyll blog

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.

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div id="share-bar">

    <h4>Share this:</h4>

    <div class="share-buttons">
        <a  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="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
            title="Share on Facebook" >
            <i class="fa fa-facebook-official share-button"> facebook</i>
        </a>

        <a  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="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
            title="Share on Twitter" >
            <i class="fa fa-twitter share-button"> twitter</i>
        </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  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="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
            title="Share on Reddit" >
            <i class="fa fa-reddit-alien share-button"> reddit</i>
        </a>

        <a  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="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
            title="Share on LinkedIn" >
            <i class="fa fa-linkedin share-button"> linkedin</i>
        </a>

        <a  href="mailto:?subject=How to add social sharing buttons on your Jekyll Blog using GitHub pages&amp;body=Check out this site https://ranvir.xyz/blog/why-and-how-to-add-social-sharing-buttons-on-your-jekyll-blog-using-github-pages/"
            title="Share via Email" >
            <i class="fa fa-envelope share-button"> email</i>
        </a>

        <a  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/&amp;t=How to add social sharing buttons on your Jekyll Blog using GitHub pages"
            title="Submit to Hacker News">
            <i class="fa fa-hacker-news share-button"> hackernews</i>
        </a>
    </div>

</div>
<style type="text/css">
/* Share Bar */
#share-bar {
    font-size: 20px;
}

/* Title */
#share-bar h4 {
    margin-bottom: 10px;
    font-weight: 500;
}

/* All buttons */
.share-buttons {
}

/* 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 */
.fa-facebook-official {
    color: #3b5998;
}
.fa-facebook-official:hover {
    background-color: #3b5998;
}

/* Twitter button */
.fa-twitter {
    color: #55acee;
}
.fa-twitter:hover {
    background-color: #55acee;
}

/* Google-PLus button */
.fa-google-plus {
    color: #dd4b39;
}
.fa-google-plus:hover {
    background-color: #dd4b39;
}

/* Pinterest button */
.fa-pinterest-p {
    color: #cb2027;
}
.fa-pinterest-p:hover {
    background-color: #cb2027;
}

/* Tumblr button */
.fa-tumblr {
    color: #32506d;
}
.fa-tumblr:hover {
    background-color: #32506d;
}

/* Reddit button */
.fa-reddit-alien {
    color: #ff4500;
}
.fa-reddit-alien:hover {
    background-color: #ff4500;
}

/* Reddit button */
.fa-hacker-news {
    color: #ff4500;
}
.fa-hacker-news:hover {
    background-color: #ff4500;
}

/* LinkedIn button */
.fa-linkedin {
    color: #007bb5;
}
.fa-linkedin:hover {
    background-color: #007bb5;
}

/* Email button */
.fa-envelope {
    color: #444444;
}
.fa-envelope:hover {
    background-color: #444444;
}

</style>


We have added this code just above the beginning of the content in _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!

We don't share your details with others