Social Share Buttons for Jekyll (With out plugin)

It is a good idea to have share buttons at your blog article. This allow people to easily share the content they have just read. More share is equal to more users looking at your article(s). Shares will drive traffic to your blog/website.

If you read a lot over the cyber world then you know how hard it is to share a fascinating article with your friends, if it doesn't have a share buttons, so it is indispensable to provide an option to share.
In this article we are discussing how to add the Social media share buttons to Jekyll based websites.

Required variables:

{{ site.url }}
{{ site.baseurl }}
{{ page.url }}
{{ page.title }}
{{ page.description }}

Create the plug and play share code:

You need to create a html page (social.html) inside _includes directory.
Copy Paste the following codes in the file (social.html).
Currently following code based on getbootstap framework, you can chang the css styles based on the theme.

<div id="social-share" >
    <small class="text-muted">Share @ </small>
        <a  href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ site.baseurl }}{{ page.url }}"
            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" >
            <span class="badge badge-primary">Facebook</span>
        </a>
        <a  href="https://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ site.baseurl }}{{ page.url }}&title={{ page.title }}&summary={{ page.description }}&source={{ page.title }}"
            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" >
            <span class="badge badge-secondary">LinkedIn</span>
        </a>
        <a  href="http://www.reddit.com/submit?url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
            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" >
            <span class="badge badge-danger">Reddit</span>
        </a>
        <a  href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
            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" >
            <span class="badge badge-info">Twitter</span>
        </a>
        <a  href="whatsapp://send?text={{ page.title }} ~ {{ site.url }}{{ site.baseurl }}{{ page.url }}" class="d-lg-none d-xl-none"
             onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
        title="Share on whatsApp" >
        <span class="badge badge-success">whatsApp</span>
    </a>
</div>

Social Share Buttons for Jekyll (With out plugin)

Required variables:

Create the plug and play share code:

Recent Posts