In the digital age, share buttons have become ubiquitous across the web. They allow users to easily share content from a website to their social networks. For website owners, integrating share buttons can help increase traffic and exposure. While most share buttons are readily available through third-party services, sometimes you may want to create your own customized share button in HTML.
What is a share button?
A share button is an interactive element on a webpage that allows visitors to share the content with their friends and followers on social media platforms like Facebook, Twitter, LinkedIn, WhatsApp, etc.
When a user clicks on a share button, a dialog box pops up with options to share the page on their desired platform. The most common places to put share buttons on a page are above or below the main content and in the sidebar.
Why add a share button to your site?
Here are some of the benefits of having share buttons on your website:
- Increased referral traffic – Share buttons make it easy for readers to share your content, potentially driving more visitors to your site.
- Improved SEO – More shares can improve your search engine rankings by increasing engagement metrics.
- Brand awareness – Share buttons help expose your brand to new audiences organically.
- Lead generation – People who share your content may end up converting into leads later.
- Social proof – Higher share counts lend credibility and increase trust in your content.
Types of share buttons
There are a few common types of share buttons:
Text-based share links
These are clickable text links that open the sharing interface when clicked. For example:
Share on Facebook
Tweet this
Icon share buttons
Icon share buttons use social media logos and icons that users easily recognize. They take up less space than text links.
Floating share bars
Floating share bars stick to the screen as the user scrolls down the page. This keeps the share buttons accessible at all times.
Custom share buttons with icons
For more branding control, you can make custom share buttons with CSS and add social media icons as background images.
How to add share buttons in HTML
Here are two simple ways to add share buttons using HTML code:
1. Text link share buttons
This is the easiest way to add share buttons using anchor tag links:
“`html
Share on Facebook
When clicked, the share button links will open a sharing dialog on the respective social network sites.
2. Icon share buttons
For icon share buttons, you need to add the social media icons along with the anchor tag links:
Replace the img src with the path to your icon images. Make sure the icons are clear and visible at small sizes.
How to customize and style share buttons
To make your share buttons align with your brand, you can customize them with CSS:
“`css
.share-btn {
padding: 8px 14px;
border-radius: 4px;
color: #fff;
text-decoration: none;
font-size: 18px;
}
.facebook-btn {
background: #3b5998;
}
.twitter-btn {
background: #1da1f2;
}
.linkedin-btn {
background: #0077b5;
}
“`
Then add the class names to the share button links:
“`html
Facebook
LinkedIn
“`
You can make fancier animated share buttons with CSS hover effects, custom graphics, and JavaScript interactivity as needed.
Positioning share buttons on your page
Where you place share buttons on your page impacts how often they are used. Here are some tips on share button placement:
- Above the main content – This placement catches people’s attention early before they start reading.
- Floating sidebar – A vertical share bar tucked away in the sidebar keeps it accessible but unobtrusive.
- Below article – Placing share buttons at the end of articles makes it easy for readers who finished to share right away.
- Popup overlay – Show share buttons on a popup overlay when the page loads to boost initial shares.
Try A/B testing different placements to determine what gets you the highest social sharing rate.
Social media buttons code examples
To make it easier, here are some code examples for popular social media share buttons:
Facebook share button code
“`html
Share on Facebook
Twitter share button code
“`html
Share on Twitter
LinkedIn share button code
“`html
Share on LinkedIn
Pinterest share button code
“`html
Pin it
Reddit share button code
“`html
Share on Reddit
WhatsApp share button code
“`html
Share on WhatsApp
This allows your website visitors to easily share content on their preferred platform.
How to add share counts to your buttons
Displaying share counts helps influence more shares by showing social proof. Here are a few ways to add share counts:
1. Get API share counts
You can use social network APIs like Facebook Graph API to get real-time share counts for your URLs. This requires a bit more advanced coding.
2. Static fake share counts
For simple static share buttons, you can manually add fake share counts like “Share (145)”. This gives the impression that the content has been shared a lot.
3. Dynamic share counters
Use third-party share counter scripts like AddThis or ShareThis to dynamically display accurate counters. This is easier to implement than APIs.
“`html
“`
Check their docs for setup and usage.
Let users preview before sharing
To improve sharing engagement, allow users to preview how their shares will look on social media with Open Graph meta tags:
“`html
“`
This customizes how the page link preview appears when shared.
You can also use the Facebook Sharing Debugger and Twitter Card Validator to test your share previews.
Track social sharing with analytics
To see which social platforms drive the most referral traffic from shares, integrate social media analytics tools like:
– Facebook Pixel
– Twitter Tracking Pixel
– LinkedIn Insights Tag
These help attribute site visitors and conversions to social shares.
You can also use Google Analytics to view traffic sources and engagement metrics for your share buttons.
Conclusion
Adding share buttons can be a quick win to increase shares, referral traffic, brand reach, and engagement for your website content.
With basic HTML and links, you can easily implement simple text and icon share buttons. For greater customization, utilize CSS, JavaScript, social APIs, widgets, and analytics integrations.
Experiment with different placements, buttons styles, social platforms, and tracking to optimize your share button performance. Pay attention to which networks drive the most results and double down on those areas.