How to add social sharing buttons to Jekyll

Lets we study how to add social sharing buttons to Jekyll. You can see the sharing buttons at bottom of this content.

We can try to use Font Awesome to generate social icon button.

Click this link to get information about stacked icons.

Facebook Button

<a href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}&title={{ page.title | encode }}">
    <span class="fa-stack">
        <i class="fa fa-square fa-stack-2x" style="color: #3b5998;"></i>
        <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
    </span>
</a>

Twitter Button

<a href="http://twitter.com/share?url={{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}&title={{ page.title | encode }}&text={{ page.title | encode }}">
    <span class="fa-stack">
        <i class="fa fa-square fa-stack-2x" style="color: #0084b4;"></i>
        <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
    </span>
</a>

Google+ Button

<a href="https://plus.google.com/share?url={{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
    <span class="fa-stack">
        <i class="fa fa-square fa-stack-2x" style="color: #d34836;"></i>
        <i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
    </span>
</a>

You can also make other types of social buttons.

References

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments