business.com receives compensation from some of the companies listed on this page. Advertising Disclosure

Home

How to Create Custom Share Buttons for Facebook, Twitter and LinkedIn

business.com editorial staff
business.com editorial staff
business.com Member
Updated Jun 03, 2020

Help consumers share your blog content on leading social media sites by creating custom share buttons. Business.com shows you how.

  • Share buttons are a simple and effective resource for increasing website views. 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.
  • Perform A/B testing as a way to confirm that share buttons are effectively leading to conversions. You may need to alter placement and size until you find the right version.

Interested in sharing your blog content on Facebook, Twitter and LinkedIn? Do multioption social media sharing tools such as ShareThis seem like overkill?

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.). 

What are share buttons?

A share button is an option used to display content on social media. With a share button, 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 also 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.

Share buttons are free to install and available for integration on any type of 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 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 as a way to not take away the user's attention from the product or service.  

How do you add a share button on a website?

Every social media site has different options for share buttons. Visit each site and log into your account to all options. Once you customize the share button, grab the HTML code needed. The HTML code is pasted into your website and placed anywhere on the site you prefer.

Along with share buttons, each social media site allows you access to buttons that perform specific actions. For instance, Facebook allows you to not only share content but also a like button. The like button can be used as a link back to your company's Facebook page.

Customization should be considered when creating a share button 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.  

A/B testing 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 confirm which version is more likely to lead to conversions. Check links often once they go live to make sure that they are operational. You also want to remove any type of counters that appear with the social media buttons. A low counter may discourage users from finalizing sales.

Facebook share button code

Here is the Facebook share code:

<script>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" /></a>

Twitter share button code

Here is the Twitter share 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

Here is the LinkedIn share 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>

Good luck! We'd love to see how you've implemented this on your own blog.

Image Credit: welcomia/Shutterstock
business.com editorial staff
business.com editorial staff
business.com Member
The purpose of our community is to connect small business owners with experienced industry experts who can address their questions, offer direction, and share best practices.