Table of Contents

How to add social media share buttons

You may want to add share buttons for social media sites to your blog, so your visitors can easily share your content to their followers.

The following solution for that was originally provided by Panther on the support forum. Thanks a lot!

1.: Upload images

At first, upload images for each share button you'd like to add. In our case, let's assume you create an sharebuttons folder in your FlatPress root. (Of course, you could store those images anywhere else within your FP instance).

2.: Add share buttons code to your theme

Open fp-interface/themes/your_theme/entry-default.tpl in the editor of your choice and add the following to where you want your share buttons to be shown. (Change this code to your needs: Remove the buttons you don't need, or add more. Instead of the width and height attributes, you could also use CSS classes.) 

<div id="sharebuttons">
<a href="http://www.facebook.com/sharer.php?u={$id|link:post_link}&title={$subject|tag:the_title}" target="_blank">
<img src="/sharebuttons/facebook.png" border="0" alt="Facebook" width="40" height="40">
</a>
<a href="https://twitter.com/intent/tweet?text={$subject|tag:the_title}&url={$id|link:post_link}" target="_blank">
<img src="/sharebuttons/twitter.png" border="0" alt="Twitter" width="40" height="40" >
</a>
<a href="whatsapp://send?text={$subject|tag:the_title} {$id|link:post_link}" data-action="share/whatsapp/share" target="_blank">
<img src="/sharebuttons/whatsapp.png" border="0" alt="Whatsapp" width="40" height="40">
</a>
<a href="fb-messenger://share/?link={$id|link:post_link}&app_id=your-app-id-here" target="_blank">
<img src="/sharebuttons/messenger.png" border="0" alt="Messenger" width="40" height="40">
</a>
<a href="https://t.me/share/url?url={$id|link:post_link}&text={$subject|tag:the_title}" target="_blank">
<img src="/sharebuttons/telegram.png" border="0" alt="Telegram" width="40" height="40">
</a>
<a href="http://pinterest.com/pin/create/link/?url={$id|link:post_link}&description={$subject|tag:the_title}" count-layout="horizontal" target="_blank">
<img src="/sharebuttons/pinterest.png" border="0" alt="Pinterest" width="40" height="40">
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url={$id|link:post_link}&title={$subject|tag:the_title}" target="_blank">
<img src="/sharebuttons/linkedin.png" border="0" alt="Linkedin" width="40" height="40">
</a>
<a href="http://www.tumblr.com/share/link?url={$id|link:post_link}" target="_blank">
<img src="/sharebuttons/tumblr.png" border="0" alt="Tumblr" width="40" height="40">
</a>
<a href="https://reddit.com/submit?url={$id|link:post_link}&title={$subject|tag:the_title}" target="_blank">
<img src="/sharebuttons/reddit.png" border="0" alt="Reddit" width="40" height="40">
</a>
<a href="mailto:?subject={$subject|tag:the_title}&amp;body={$id|link:post_link}" title="{$subject|tag:the_title}">
<img src="/sharebuttons/email.png" border="0" alt="Email" width="40" height="40">
</a>
</div>

Alternative without images

Tongara altered Panther's approach by using FontAwesome icons instead of images for the buttons. See this solution on the forum.

Add “Share this:” to template with Awesome font View this source and copy with .css link to entry-default.tpl

Adding the "sharebuttons" code to Static pages

Tongara also posted a fix/update later on that would enable users to use the sharebuttons code on Static Pages. This was a very simple fix which works by placing the exact same code onto a static page template file (wherever the blog owner desires the share buttons to be displayed), and then finding any instance of 

$id|link:post_link

And simply changing them to 

$id|link:page_link