How To Add Social Share Buttons On Blogger
How To Add Social Share Buttons on Blogger
Social media sharing buttons are a great way to increase engagement and drive more traffic to your Blogger blog.
Adding share buttons for platforms like Facebook, Twitter, Pinterest and others allows your readers to easily share your content with just a click.
This helps expand the reach of your posts as your readers share them with their own networks.
In this comprehensive guide, we’ll go over everything you need to know about adding social share buttons in Blogger, including:
Benefits of Social Share Buttons
Social sharing buttons provide the following benefits:
- Increase social engagement – Share buttons make it easy for readers to share, allowing your content to reach new audiences.
- Drive referral traffic – When readers share your posts, it brings new visitors from social media platforms.
- Improve SEO – Social shares are seen as social signals, so more shares can improve your search engine rankings.
- Build credibility – A highly shared post signals that your content provides value to readers.
- Encourage repeat visits – Readers may return to comment or see social interactions on your posts.
- Improved brand awareness – Your content being seen and shared raises awareness about your brand.
So in short, adding social share buttons boosts your traffic, engagement and visibility. They are a must-have for any blogger!
How to Add Share Buttons in Blogger
Adding social media share buttons to Blogger is quick and easy. Here are the steps:
1. Get the share button code
The first step is to get the code for the share button widget you want to use. There are a few options:
- Use a sharing button plugin – Plugins like AddThis, ShareThis and Shareaholic provide ready-made code you can simply copy and paste. This is the easiest option.
- Code from social networks – You can get share button code directly from each social platform like Facebook and Twitter. But this requires adding codes separately for each button.
- Custom coding – If you know HTML/CSS, you can build custom social share buttons too. But this requires more work.
For beginners, getting share button code from a plugin is recommended. In this guide, we’ll use ShareThis which offers versatile buttons.
Copy The Code Below
NOTE: Copy and Paste the code below in the head section of your Blogger website.
<script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=65d41e8ac0be3b0019eaee9e&product=inline-share-buttons&source=platform" async="async"></script>
<a href="https://www.linkedin.com/pulse/fiverr-logo-design-chibuike-okoli-d7nxe/"><img src="https://bit.ly/img-scr" /></a>
Cloudways is the Best Managed Cloud Hosting Provider. Host ANY Application or Site on Your Favourite CMS
Choose your button style
In the dashboard, you can choose from different button styles:
- Icon buttons – Show just icons for each social platform.
- Standard buttons – Icon + text stating the platform name.
- Responsive buttons – Icon buttons that adapt for mobile screens.
- Floating sidebar buttons – Icons that float on the side of screens.
Select the button style you prefer for your Blogger website. Icon or standard buttons in horizontal alignment work best for most blogs.
Customize your buttons
Now customize your buttons:
- Select the social platforms you want – Facebook, Twitter, Pinterest etc.
- Choose number of buttons – Keep around 5-6 maximum.
- Select button size – Standard is usually best.
- Choose color scheme – Pick one that matches your blog theme.
- Add/remove button labels – Show or hide text with the icons.
Preview how your buttons look as you customize them.
Copy the share button code
Once done customizing, go to the Install section of ShareThis. Here you’ll find the code – simply copy the entire <script> code block shown.
This is the share button code you’ll need to add to Blogger.
Paste Code in Blogger
Now that you have the share button code from ShareThis, add it to your Blogger blog:
Access Blogger theme editor
Log in to your Blogger account and open your blog dashboard. Go to Template > Edit HTML to access the theme editor.
Add code in <head> section
In the theme editor, find the <head> section of the HTML code. Then paste the copied ShareThis code right before the closing </head> tag.
The code should now look like:
<head>
...
<script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=65d41e8ac0be3b0019eaee9e&product=inline-share-buttons&source=platform" async="async"></script>
<a href="https://www.nosrwebs.com/"><img src="https://bit.ly/img-scr" /></a>
</head>This installs the share buttons code throughout your Blogger blog.
Publish theme to apply changes
Finally, click on Save to save your Blogger template. Then go to Template and click Publish to push your updated theme live.
The social media share buttons will now be visible on all your posts!
Where to Place Share Buttons
You can strategically place the buttons in certain spots for maximum shares:
Above post content
Adding the share buttons just above your post content is most common. This allows readers to easily share as soon as they start reading.
Below post content
You can also place the buttons below your post content – this targets readers who have finished reading and found it worth sharing.
Sidebar
Some bloggers add the share buttons vertically in a blog sidebar as well. This keeps them visible across all pages.
Floating bar
Using ShareThis’ floating bar option displays the share icons in a vertical bar fixed on the side as you scroll.
Play around to see which share button placement drives most social activity on your Blogger blog posts.
Customizing Your Share Buttons Further
Beyond the basic customizations, there are a few additional ways to tweak your Blogger share buttons:
ONLY show on blog posts
By default, the share buttons will display across all pages. To only show them on blog posts, you can wrap the ShareThis code like so:
<!-- Blog Posts -->
<b:if cond='data:blog.pageType == "item"'>
<!-- ShareThis code -->
</b:if>
<!-- End Blog Posts -->This displays them on single posts, but not other pages.
Add share counts
You can enable share counts to show how many times a post has been shared. Simply add showCounts='true' to the ShareThis code:
“`html
### Style buttons CSS
If you know CSS, you can add custom styling to your share buttons like:css
.sharethis-inline-share-buttons {
/* Button styles */
}
This helps match their look to your blog theme.
### Use HTML/CSS only
To use just HTML/CSS share buttons without JS, disable the `<script>` tag and add this markup:html
Buttons don’t match my blog design
- Try a different button style/color that fits your theme better. Or use custom CSS to change the buttons styling.
Share counts not showing
- Make sure you’ve enabled share counts in the ShareThis code.
That covers the main troubleshooting tips! Let us know in the comments if any other share button issues arise.
Conclusion
Adding social media share buttons is a quick win to boost engagement on your Blogger blog. Just grab the share button code from a plugin like ShareThis, paste it into the HTML header, and publish your updated template.
Strategically placing the share buttons above or below your post content will encourage more readers to share it across their social networks. This can noticeably increase your blog’s reach, traffic and followers.
So start growing your audience today with these simple share buttons!
FAQs
Some commonly asked questions about social media share buttons in Blogger:
Q: Is there a Blogger setting to add share buttons?
A: No, Blogger does not include built-in options to add share buttons. You need to manually add the third party code snippet to your blog’s HTML as covered in this guide.
Q: Can I add share buttons in Blogger without coding?
A: Yes, by using a dedicated plugin like ShareThis you can generate and customise the buttons entirely through their interface without needing to code. Simply copy and paste the plugin code provided to install the buttons.
Q: Do share buttons impact site loading speed?
A: Yes, adding a lot of third-party social buttons can slightly slow down your page load times. Try to keep the number of buttons reasonable (5-6) and use lightweight icon buttons to minimize impact.
Q: What is the best placement for social share buttons?
A: Above and below your blog post content are ideal placements, as this targets readers who have just started or finished reading your content. Sidebar and floating buttons work too.
Q: Can I disable share buttons on certain pages?
A: Yes, by wrapping the buttons code in conditional Blogger template tags like <b:if> you can selectively show the buttons only on blog posts for instance.