Tutorial·Nov 22, 2024

How to Add Social Share Buttons to Your Website (Complete Guide 2024)

Step-by-step tutorial on adding social share buttons to any website. Learn best practices, code examples, and how to maximize social sharing for viral growth.

TokWork Team

Social share buttons are essential for any website looking to grow organically. They make it easy for visitors to share your content across social networks, potentially reaching thousands of new people with a single click.

Key Benefits:

📈 Increase website traffic by 30-50%
🚀 Boost content visibility and reach
💰 Improve SEO through social signals
🎯 Build brand awareness
🤝 Engage your audience

In this comprehensive guide, you'll learn how to add social share buttons to your website, regardless of your platform or technical skill level.

Social Share Buttons

Method 1: Using TokWork (Recommended - 5 Minutes)

TokWork is the easiest and most powerful way to add social share buttons. Unlike traditional solutions, it includes influencer rewards to maximize sharing.

Go to TokWork.com
Click "Get Started Free"
Enter your email and create an account
Verify your email

Step 2: Add Your Website

Click "Add Website" in your dashboard
Enter your website URL (e.g., https://yoursite.com)
Enter your website name
Add a brief description
Click "Create"

Step 3: Install the Script

Copy the installation code from your dashboard:

<!-- Add this before closing </body> tag -->
<script 
  src="https://js.tokwork.com/loader.js" 
  data-website-id="your-unique-id"
  data-website-domain="yoursite.com"
  async
></script>

Installation by Platform:

Open your website's HTML file
Find the closing </body> tag
Paste the script just before it
Save and upload to your server

<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
</head>
<body>
  <!-- Your content -->
  
  <!-- TokWork Script -->
  <script 
    src="https://js.tokwork.com/loader.js" 
    data-website-id="your-unique-id"
    async
  ></script>
</body>
</html>

Option A: Using a Plugin

Install "Insert Headers and Footers" plugin
Go to Settings → Insert Headers and Footers
Paste the script in "Scripts in Footer"
Save

Option B: Edit theme files

Go to Appearance → Theme Editor
Open footer.php
Paste script before <?php wp_footer(); ?>
Update file

<!-- TokWork Script -->
<script 
  src="https://js.tokwork.com/loader.js" 
  data-website-id="your-unique-id"
  async
></script>

<?php wp_footer(); ?>
</body>
</html>

Go to Online Store → Themes
Click "Actions" → "Edit code"
Open theme.liquid
Paste script before </body>
Save

<!-- TokWork Script -->
<script 
  src="https://js.tokwork.com/loader.js" 
  data-website-id="your-unique-id"
  async
></script>

</body>
</html>

For Next.js, add to _document.js or _app.js:

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://js.tokwork.com/loader.js"
        data-website-id="your-unique-id"
        strategy="lazyOnload"
      />
    </>
  )
}

For React, add to index.html:

<body>
  <div id="root"></div>
  <script 
    src="https://js.tokwork.com/loader.js" 
    data-website-id="your-unique-id"
    async
  ></script>
</body>

Step 4: Test Your Installation

Visit your website
You should see the share widget appear
Click a share button to test
Check your TokWork dashboard for analytics

Troubleshooting:

Clear your browser cache if you don't see the widget
Check browser console for errors
Verify your website ID is correct
Contact support if issues persist

Method 2: Custom HTML/CSS (Advanced)

If you want full control and don't need analytics, you can create custom share buttons with HTML.

<!-- Twitter Share Button -->
<a 
  href="https://twitter.com/intent/tweet?text=Check%20this%20out!&url=https://yoursite.com"
  target="_blank"
  rel="noopener noreferrer"
  class="share-button twitter"
>
  Share on Twitter
</a>

<!-- Facebook Share Button -->
<a 
  href="https://www.facebook.com/sharer/sharer.php?u=https://yoursite.com"
  target="_blank"
  rel="noopener noreferrer"
  class="share-button facebook"
>
  Share on Facebook
</a>

<!-- LinkedIn Share Button -->
<a 
  href="https://www.linkedin.com/sharing/share-offsite/?url=https://yoursite.com"
  target="_blank"
  rel="noopener noreferrer"
  class="share-button linkedin"
>
  Share on LinkedIn
</a>

.share-button {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: opacity 0.3s;
}

.share-button:hover {
  opacity: 0.8;
}

.share-button.twitter {
  background-color: #1DA1F2;
}

.share-button.facebook {
  background-color: #1877F2;
}

.share-button.linkedin {
  background-color: #0A66C2;
}

JavaScript for Dynamic Content

// Get current page info
const pageUrl = encodeURIComponent(window.location.href);
const pageTitle = encodeURIComponent(document.title);

// Update share links
document.querySelectorAll('.share-button').forEach(button => {
  const platform = button.classList[1]; // twitter, facebook, etc.
  
  if (platform === 'twitter') {
    button.href = `https://twitter.com/intent/tweet?text=${pageTitle}&url=${pageUrl}`;
  } else if (platform === 'facebook') {
    button.href = `https://www.facebook.com/sharer/sharer.php?u=${pageUrl}`;
  } else if (platform === 'linkedin') {
    button.href = `https://www.linkedin.com/sharing/share-offsite/?url=${pageUrl}`;
  }
});

Cons of Custom Buttons:

❌ No analytics
❌ No influencer rewards
❌ More maintenance
❌ No A/B testing
❌ Manual updates needed

1. Button Placement

Optimal Positions:

✅ Top of content: Catch readers before they scroll
✅ Bottom of content: Capture engaged readers
✅ Floating sidebar: Always visible while scrolling
✅ Inline: Within long-form content

Avoid:

❌ Blocking content
❌ Too many buttons (stick to 3-5 platforms)
❌ Intrusive pop-ups

2. Button Design

Do:

✅ Use recognizable platform colors
✅ Include platform icons
✅ Make buttons large enough to click (44x44px minimum)
✅ Ensure mobile-friendly sizing
✅ Add hover effects

Don't:

❌ Use generic "Share" buttons
❌ Make buttons too small
❌ Use confusing icons
❌ Overload with too many options

3. Content Optimization

Pre-fill Share Text:

<!-- Good: Specific, engaging text -->
<a href="https://twitter.com/intent/tweet?text=I%20just%20discovered%20this%20amazing%20tool%20for%20social%20sharing!&url=https://yoursite.com">
  Share
</a>

<!-- Bad: Generic text -->
<a href="https://twitter.com/intent/tweet?url=https://yoursite.com">
  Share
</a>

Include Images:

Add Open Graph tags for better previews
Use high-quality images (1200x630px)
Test how your content looks when shared

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Engaging description" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com" />

4. Mobile Optimization

Mobile-Specific Considerations:

Use native share API when available
Ensure buttons are touch-friendly
Test on various screen sizes
Consider floating action button

// Use native share API on mobile
if (navigator.share) {
  button.addEventListener('click', async () => {
    try {
      await navigator.share({
        title: document.title,
        url: window.location.href
      });
    } catch (err) {
      console.log('Share failed:', err);
    }
  });
}

Advanced Features with TokWork

1. Influencer Rewards

Set up automatic rewards for influencers who share your content:

// Configure in TokWork dashboard
{
  "rewards": {
    "perView": 0.01,      // $0.01 per view
    "perLike": 0.05,      // $0.05 per like
    "perShare": 0.10,     // $0.10 per share
    "perClick": 0.02      // $0.02 per click
  },
  "minimumPayout": 10.00  // Minimum $10 for payout
}

2. AI Content Generation

TokWork automatically generates personalized content for each influencer:

Platform-specific formatting
Optimized hashtags
Engaging copy
Multi-language support

3. Analytics & Tracking

Track everything in your dashboard:

Share counts by platform
Click-through rates
Conversion tracking
ROI calculation
Top influencers

Measuring Success

Key Metrics to Track

Share Count: How many times content is shared
Click-Through Rate: Clicks from shares / Total shares
Traffic: New visitors from social shares
Conversions: Sign-ups, purchases from shared links
ROI: Revenue / Cost of rewards

Setting Goals

Beginner Goals (Month 1-3):

100+ shares per month
500+ visitors from shares
2% conversion rate

Intermediate Goals (Month 4-6):

500+ shares per month
2,500+ visitors from shares
5% conversion rate

Advanced Goals (Month 7+):

2,000+ shares per month
10,000+ visitors from shares
10% conversion rate

Common Mistakes to Avoid

Too Many Buttons: Stick to 3-5 most relevant platforms
Poor Placement: Don't hide buttons or make them intrusive
No Mobile Optimization: 60%+ of shares happen on mobile
Ignoring Analytics: Track what works and optimize
No Incentives: Consider rewarding shares for better results
Slow Loading: Use async scripts to avoid performance issues
Broken Links: Test all share buttons regularly

Frequently Asked Questions

Q: How many social share buttons should I add? A: 3-5 buttons for your most relevant platforms. More isn't always better.

Q: Do social share buttons slow down my website? A: TokWork's async loading has minimal impact (<0.1s). Avoid platforms with heavy tracking scripts.

Q: Should I reward people for sharing? A: Yes! Studies show incentivized sharing increases share rates by 5-10x.

Q: Which platforms should I include? A: Depends on your audience. B2B: LinkedIn, Twitter. B2C: Facebook, Instagram, Pinterest.

Q: How do I track ROI from social sharing? A: Use TokWork's built-in analytics or UTM parameters with Google Analytics.

Q: Can I customize the button design? A: Yes, TokWork allows full customization to match your brand.

Q: Do I need coding skills? A: No! TokWork is copy-paste simple. Custom solutions require HTML/CSS knowledge.

Q: How much should I budget for rewards? A: Start with $50-100/month. Most see 5-10x ROI.

Next Steps

Now that you know how to add social share buttons, here's what to do next:

Choose Your Method: TokWork (recommended) or custom HTML
Install: Follow the step-by-step guide above
Customize: Match your brand and optimize placement
Test: Verify all buttons work correctly
Promote: Tell your audience about sharing rewards
Analyze: Track metrics and optimize
Scale: Increase reward budget as you see ROI

Ready to turn social sharing into your #1 growth channel?

Start with TokWork Free →

Conclusion

Adding social share buttons to your website is essential for organic growth. While you can create custom buttons with HTML, using a platform like TokWork gives you:

✅ 5-minute installation
✅ Influencer rewards for viral growth
✅ AI-powered content generation
✅ Advanced analytics
✅ Better performance
✅ Higher share rates

The choice is clear: invest 5 minutes with TokWork and turn social sharing into your most powerful growth channel.

Get Started Free - No Credit Card Required →

TokWork vs ShareThis - Which Social Share Platform is Better in 2024?

Detailed comparison of TokWork and ShareThis. Discover which social share button platform offers better features, pricing, and ROI for your website.