Share buttons are important for those who really want new visitors on their website or blog and want to improve their SEO. Share button helps you to generate tons of traffic, it enables your website visitors and content viewers to easily share your website content with their social media friends and family. Placing share buttons to your content to reach new audiences who didn’t know about your website before and through this, you generate new visitors getting back an old visitor to your website.
You should share buttons to all content you create, each web page, each blog article, Newsletter contents, web top-page, web bottom page, etc. In this article, I will teach you step-by-step how to add a share button to your website in an easy without any stress even for beginners.
You can create your share buttons one by one, I mean creating them individually, you will create a button to share your contents on Facebook separate, Twitter share button also separate and other share buttons. And you can achieve all this at once with the help of codes and free plugins without passing through much stress. Below are the guides on how to create it.
How to create a Facebook Share Button
Facebook is the most popular social media worldwide. As of the third quarter of 2021, there were around 3.5 billion cumulative monthly users of the company’s products worldwide. With around 2.9 billion monthly active users. So it makes Facebook the most-used social media button on the web. You can easily generate a Facebook Share Button with the Facebook plugin.
Step-by-Step
- Visit https://developers.facebook.com/docs/plugins/share-button
- Pick the URL of a website or Facebook Page you want to share.
- Paste the URL to the Code Configurator and adjust the layout of your share button. Click the Get Code button to generate your share button code.
- Copy and paste the snippet into the HTML of the destination website.
- If you can code, you can edit the code snippet below and paste it into the HTML of the destination website.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<html> <head> <title>Your Website Title</title> <!-- You can use Open Graph tags to customize link previews. Learn more: https://developers.facebook.com/docs/sharing/webmasters --> <meta property="og:url" content="https://www.your-domain.com/your-page.html" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Your Website Title" /> <meta property="og:description" content="Your description" /> <meta property="og:image" content="https://www.your-domain.com/path/image.jpg" /> </head> <body> <!-- Load Facebook SDK for JavaScript --> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <!-- Your share button code --> <div class="fb-share-button" data-href="https://www.your-domain.com/your-page.html" data-layout="button_count"> </div> </body> </html> |
How to create a Twitter Share Button
Twitter is the second most popular social media worldwide after Facebook. It was reported that witter has approximately 330 million monthly active users based on its last reported data in the 1st quarter of 2019. As of 2020, Twitter’s daily active users were at 166 million, which represents a 24% growth from 2019. So, in the US alone, Twitter has 69.3 million active users as of January 2021. Meanwhile, this makes Twitter the second most-used social media button on the web.
Step-by-Step
- Visit https://publish.twitter.com/#
- Select “Twitter Buttons”.
- Choose “Share Button”.
- Copy and paste the snippet into the HTML of the destination website
Or you can copy the code snippet below and paste it into the HTML of the destination website.
1 |
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> |
How to create a Linkedin Share Button
As it is explained on the Linkedin website, LinkedIn is an online platform that connects the world’s professionals. A complete LinkedIn profile will summarize your professional experience to your connections, current and future employers, and recruiters. Through your profile, you can showcase your professional life, milestones, skills, and interests.
Adding LinkedIn’s Share Button enables visitors to easily share your content with their connections on LinkedIn, whether it be a blog post, a landing page, or another web page. This share button can make LinkedIn audience reach your content and this aids your SEO by driving traffic to your site.
This can be achieved by integrating Microsoft plugins. LinkedIn Plugins are a quick and easy way to drop LinkedIn functionality into your website. Use the Share Plugin to easily share content with your LinkedIn connections.
Step-by-Step
- Visit https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins/share-plugin
- Copy the HTML code
- Replace the data-url=”https://www.linkedin.com” with whichever URL you’d like visitors to share
- We have made it easy by bringing the code for you. Using the JavaScript snippet below will generate a LinkedIn Share button. The example below contains a data-URL reference to https://www.linkedin.com. Modify the data URL to include your favorite link, or leave it blank and let your users craft their own shares!
1 2 |
<script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script> <script type="IN/Share" data-url="https://www.linkedin.com"></script> |
To modify the data-URL to include your favorite link replace the data-url=”https://www.linkedin.com” with whichever URL you’d like visitors to share.
All the above processes can be achieved at once even with the addition of more share buttons like Whatsaap, Pinterest, Gmail, print button, and many more. With this method, you don’t need to add the buttons one by one, there are many plugins on the web that help achieve this but in this Tutorial we recommend ShareThis.
As it is stated on the Wikipedia website, ShareThis is a technology company that provides free engagement and growth tools for site owners. Their tools allow the sharing of content across 40+ social channels and are used by over three million publishers globally. We explain below, how to create all social share buttons step-by-step with ShareThis.
Step-by-step
- Visit https://sharethis.com/platform/share-buttons/
- There are four options of which type of share button you want, Inline Share Buttons that add share buttons near your headline or product for ideal visibility, Sticky Share Buttons that keep share buttons anchored so visitors can share while they scroll, Image Share Buttons that let your audience share your most powerful visual content, Video Share Buttons that empower your audience to share videos on your site with one click. Under each option, there are “Get started” buttons, click on your chosen option.
- Customize your button or click on “Next”
- Sign up
- Click on “Activate code”
- Copy the generated code and paste it below your <head> tag
- Copy and paste the provided snippet for the share button into the HTML of the destination website.
