Here is a 2-step method to add Twitter, Facebook, Pinterest and LinkedIn sharing links and icons to your Ghost posts, with a nice smooth hover animation.
(To add more sharing services, you'll need a SVG or image icon, the brand colour and the sharing URL. Use a service like SVG Repo to find SVG icons or search Google for logo images.)
1. Add the HTML
The most flexible way to add share icons is to create a re-usable theme "partial". You can then reference this code snippet in multiple places in your theme files.
To do this, make a new file in the /partials
folder within your theme called share-block.hbs
(or similar) and paste the following code:
<div class="share-block">
<span>Share</span>
<a href="https://twitter.com/intent/tweet?url={{url absolute='true'}}&text={{encode title}}" target="_blank" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M24 4.6c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.2-.2-7.8-2.2-10.2-5.2-.5.8-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5z" fill="#1da1f2"/></svg>
</a>
<a href="https://www.facebook.com/sharer.php?u={{url absolute='true'}}" target="_blank" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M24 12.072a12 12 0 10-13.875 11.854v-8.385H7.078v-3.469h3.047V9.428c0-3.007 1.792-4.669 4.532-4.669a18.611 18.611 0 012.687.234v2.954H15.83a1.734 1.734 0 00-1.947 1.49 1.71 1.71 0 00-.008.385v2.25H17.2l-.532 3.469h-2.8v8.385A12 12 0 0024 12.072z" fill="#4267B2"/></svg>
</a>
<a href="https://pinterest.com/pin/create/button/?url={{url absolute='true'}}&media=&description={{encode title}}" target="_blank" rel="noopener" data-pin-do="none">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12c0 5.1 3.2 9.4 7.6 11.2-.1-.9-.2-2.4 0-3.4.2-.9 1.4-6 1.4-6s-.3-.8-.3-1.8c0-1.7 1-2.9 2.2-2.9 1 0 1.5.8 1.5 1.7 0 1-.7 2.6-1 4-.3 1.2.6 2.2 1.8 2.2 2.1 0 3.8-2.2 3.8-5.5 0-2.9-2.1-4.9-5-4.9-3.4 0-5.4 2.6-5.4 5.2 0 1 .4 2.1.9 2.7.1.1.1.2.1.3-.1.4-.3 1.2-.3 1.4-.1.2-.2.3-.4.2-1.5-.7-2.4-2.9-2.4-4.6 0-3.8 2.8-7.3 7.9-7.3 4.2 0 7.4 3 7.4 6.9 0 4.1-2.6 7.5-6.2 7.5-1.2 0-2.4-.6-2.8-1.4 0 0-.6 2.3-.7 2.9-.3 1-1 2.3-1.5 3.1 1 .3 2.2.5 3.4.5 6.6 0 12-5.4 12-12S18.6 0 12 0z" fill="#E60023"/></svg>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url={{url absolute='true'}}&title={{encode title}}" target="_blank" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M23 0H1C.4 0 0 .4 0 1v22c0 .6.4 1 1 1h22c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1zM7.1 20.5H3.6V9h3.6v11.5zM5.3 7.4c-1.1 0-2.1-.9-2.1-2.1 0-1.1.9-2.1 2.1-2.1 1.1 0 2.1.9 2.1 2.1 0 1.2-.9 2.1-2.1 2.1zm15.2 13.1h-3.6v-5.6c0-1.3 0-3-1.8-3-1.9 0-2.1 1.4-2.1 2.9v5.7H9.4V9h3.4v1.6c.5-.9 1.6-1.8 3.4-1.8 3.6 0 4.3 2.4 4.3 5.5v6.2z" fill="#2867B2"/></svg>
</a>
</div>
You can then insert your share buttons anywhere in your site (multiple times per page if you want) by simply adding {{> share-block}}
.
Important! Make sure you add this within the {{#post}}...{{/post}}
block to make sure the button links work properly.
2. Add the CSS
The CSS for these buttons can either be pasted into your theme's HTML (in the <head>
section of default.hbs
), a CSS file or via the Code Injection setting with your Ghost admin.
<style>
.share-block {
margin-top: 8rem;
text-align: center;
}
.share-block span {
display: inline-block;
font-weight: bold;
margin-right: 1rem;
font-size: 2rem;
}
.share-block a {
display: inline-block;
transition: all 0.3s;
margin: 0 0.25rem;
}
.share-block a:hover {
transform: scale(1.1);
}
</style>
And there you have it!
Thanks for reading!
I am the founder of Codelet. I have five years experience publishing and developing for Ghost, on over 100 sites. Codelet publishes Ghost themes, blog posts and offers expert Ghost support.