Interested in sharing your blog content on Facebook, Twitter and LinkedIn? Do multi-option social media sharing tools such as ShareThis seem like overkill? That's where share buttons can come into play. Share buttons are a simple and effective resource for increasing website views and boosting engagement. Facebook, Twitter and LinkedIn all provide options to share content. Share buttons can appear anywhere on a website, including product pages, blogs and checkout pages. However, in order to add these to your website, you need to know the code required to create them.
What are share buttons?
A share button is an option used to display content on social media. Consumers share their purchases with others online and potentially provide you with new prospects. Share buttons also help users save products and services they are interested in. Later, the target returns to their social media pages to access the product link and complete the sale.
Share buttons are beneficial for any type of online content. Blogs often include a share button at the top and bottom of an article to increase visibility. Although blogs normally have a share button, you can include a share button on any of your website's landing pages. [Read related article: How to Measure and Analyze Your Content Performance]
Share buttons are free to install and available for integration on any social media outlet. Twitter, Facebook, Instagram and other sites have share buttons that could be inserted into any of your online content. The share button is usually customizable, too, to help bring brand awareness once content is shared. For instance, hashtags should be added to make the shared content searchable.
To reap the most benefits, businesses must consider the ideal timing for share buttons. For instance, you may want a share button upon completion of a purchase, but you don't want to distract the user from finishing the checkout process. Share buttons can be minimized so as not to take the user's attention away from the product or service.
Types of share buttons
Social media share buttons fall into two categories: sticky and inline. Both options can be used on popular social media platforms, like Facebook, Twitter and LinkedIn.
| Sticky buttons | These buttons appear on the left-hand or right-hand side of the user's screen as they scroll through your blog or other webpages. They don't disappear as you scroll up or down in the article, which is why they're called "sticky." |
| Inline buttons | These buttons appear in a row on a single line in your blog or webpage copy. Once you scroll past them, they don't remain on the page. Of course, you can scroll back for them to reappear. |
How do you add a share button on a website?
Every social media site has different options for share buttons. That said, the below steps for adding a share button to your website are roughly the same for each social media platform.
- Visit each site and log in to your account to access all options.
- Consider customization when creating a share button for your website. For instance, Twitter allows you to add a mention or hashtag when any of your content is shared. Facebook provides the option for the user to add their own message when sharing your content on their profile pages.
- Along with share buttons, each social media site allows you access to buttons that perform specific actions. For example, Facebook allows you to not only share content but also offer a like button. The like button can be used as a link back to your company's Facebook page.
- Once you customize the share button, grab the required HTML code.
- Paste the HTML code into your website, anywhere you prefer.
- To see if your share buttons are having the desired impact, you should be A/B testing them. This is recommended as a way to confirm the best placement for share buttons on your website. With A/B testing, you mock up two different sets of websites. You can compare sizes for the share buttons as well as ideal spots on the page. Through testing, you can see which version is more likely to lead to conversions.
FYI: A/B testing shows you how two different share button placements on your website will look and indicate which placement is more likely to result in the desired customer action.
- Check links often once they go live to make sure that they are operational. Also, remove any type of counters that appear with the social media buttons. A low counter may discourage users from finalizing sales.
What is the HTML code for each social media platform?
To add custom share buttons automatically to each post in a WordPress blog, add the following code to the single PHP file, which renders the individual post. (You must be using WordPress.org, the self-hosted version of WordPress, to customize PHP files.)
Facebook share button code
function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><a href="http://www.facebook.com/share.php?u=<url>" onclick="return fbs_click()" target="_blank"><img src="ADD_IMAGE_URL_HERE" alt="Share on Facebook"
Twitter share button code
<a href="http://twitter.com/home?status=Currentlyreading <?php the_permalink(); ?>" title="Click to share this post on Twitter""><img src="ADD_IMAGE_URL_HERE" alt="Share on Twitter"></a>
LinkedIn share button code
<a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&source=ADD_YOUR_BLOG_URL_HERE"><img src="ADD_IMAGE_URL_HERE"></a>