How to add Social Share buttons to your Wisepops campaigns

Method 1: Standard Button Elements (Recommended for Beginners)

This method uses Wisepops' native button elements - no coding required! It's the easiest way to add social share functionality to your popup.

What You'll Need

A Wisepops account with access to the campaign editor
The URL you want visitors to share
(Optional) An image URL for Instagram Story sharing

Step-by-Step Instructions

1. Open Your Campaign in the Editor

Navigate to your campaign in Wisepops and click Edit to open the campaign editor.

2. Add Button Elements

In the campaign editor, click the + icon to add a new element
Select Button from the element options
Repeat to add three separate buttons (one for each share option)

3. Configure Each Button

For Instagram Story Share Button:

Button Text: "Share to Instagram Story" or use an emoji like "📱 Share to Story"
Link Type: Select "URL"
URL: instagram-stories://share?backgroundImage=YOUR_IMAGE_URL_HERE
Open in new tab: Enable

For Facebook Share Button:

Button Text: "Share on Facebook" or use "👍 Share on Facebook"
Link Type: Select "URL"
URL: https://www.facebook.com/sharer/sharer.php?u=YOUR_URL_HERE
Open in new tab: Enable

For Email Share Button:

Button Text: "Share via Email" or use "✉️ Share via Email"
Link Type: Select "URL"
URL: mailto:?subject=Check%20this%20out&body=I%20thought%20you%20might%20be%20interested%20in%20this:%20YOUR_URL_HERE
Open in new tab: Not necessary (email client will open)

4. Customize URLs

Replace the placeholder URLs with your actual content:

For Facebook and Email: Replace YOUR_URL_HERE with the full URL you want visitors to share. For example:

https://www.yourwebsite.com/sale
https://www.yourwebsite.com/blog/new-article

For Instagram Story: Replace YOUR_IMAGE_URL_HERE with the full URL of the image you want to share. Requirements:

Must be a publicly accessible URL (not behind a login)
Recommended formats: JPG or PNG
Example: https://www.yourwebsite.com/images/promo.jpg

For Email (Optional): Customize the subject line and body text by editing these parts:

subject=Check%20this%20out - Change "Check this out" to your subject
body=I%20thought%20you%20might%20be%20interested%20in%20this: - Change the message text
Use %20 for spaces in URLs

5. Arrange Your Buttons

Position the three buttons horizontally next to each other or stack them vertically
Use the alignment tools in Wisepops to ensure they're evenly spaced
Adjust spacing between buttons for visual balance
Consider adding a small text element above like "Share this with friends:"

6. Preview and Test

Click Preview in the campaign editor to see how your share buttons look
Test each button to ensure they work correctly:
- Instagram: Will only work on mobile devices with Instagram app installed
- Facebook: Opens Facebook's share dialog
- Email: Opens the default email client with pre-filled subject and body

7. Save and Publish

Once you're satisfied with how the buttons look and function, click Save and then Publish your campaign.

Method 2: HTML Block (Advanced - For Custom Icons and Styling)

This method gives you complete design control with custom icons and advanced styling options. Use this if you want a more polished, professional look with social media icons.

What You'll Need

Basic understanding of HTML/CSS (or willingness to copy/paste code)
The URL you want visitors to share
(Optional) An image URL for Instagram Story sharing

Step-by-Step Instructions

1. Open Your Campaign in the Editor

Navigate to your campaign in Wisepops and click Edit to open the campaign editor.

2. Add an HTML Block

In the campaign editor, click the + icon to add a new element
Select HTML Block from the element options
Position the HTML block where you want the share buttons to appear

3. Insert the Share Button Code

Copy and paste one of the code snippets below into the HTML block:

Option A: Buttons with Icons and Text Labels

<div style="display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap;">
  <!-- Instagram Story Share -->
  <a href="instagram-stories://share?backgroundImage=YOUR_IMAGE_URL_HERE" 
     target="_blank" 
     rel="noopener noreferrer"
     style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: white; text-decoration: none; border-radius: 4px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 600;">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
    </svg>
    Share to Story
  </a>
  
  <!-- Facebook Share -->
  <a href="https://www.facebook.com/sharer/sharer.php?u=YOUR_URL_HERE" 
     target="_blank" 
     rel="noopener noreferrer"
     style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background-color: #1877F2; color: white; text-decoration: none; border-radius: 4px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 600;">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
    </svg>
    Share on Facebook
  </a>
  
  <!-- Email Share -->
  <a href="mailto:?subject=Check%20this%20out&body=I%20thought%20you%20might%20be%20interested%20in%20this:%20YOUR_URL_HERE" 
     style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background-color: #EA4335; color: white; text-decoration: none; border-radius: 4px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 600;">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
    </svg>
    Share via Email
  </a>
</div>

Option B: Icon-Only Buttons (More Compact)

<div style="display: flex; gap: 10px; justify-content: center;">
  <!-- Instagram Story -->
  <a href="instagram-stories://share?backgroundImage=YOUR_IMAGE_URL_HERE" 
     target="_blank" 
     rel="noopener noreferrer" 
     style="display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: white; text-decoration: none; border-radius: 4px;">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
    </svg>
  </a>
  
  <!-- Facebook -->
  <a href="https://www.facebook.com/sharer/sharer.php?u=YOUR_URL_HERE" 
     target="_blank" 
     rel="noopener noreferrer" 
     style="display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background-color: #1877F2; color: white; text-decoration: none; border-radius: 4px;">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <pata d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
    </svg>
  </a>
  
  <!-- Email -->
  <a href="mailto:?subject=Check%20this%20out&body=I%20thought%20you%20might%20be%20interested%20in%20this:%20YOUR_URL_HERE" 
     style="display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background-color: #EA4335; color: white; text-decoration: none; border-radius: 4px;">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
    </svg>
  </a>
</div>

4. Customize Your Share Links

Follow the same URL customization steps as Method 1 (see above).

5. Advanced Customization

Change Button Colors:

You can customize the background colors by modifying the background-color or background values:

Instagram: Uses a gradient - keep as is for brand consistency
Facebook: #1877F2 - change to any hex color
Email: #EA4335 - change to any hex color

Example:

background-color: #1877F2;  /* Change to background-color: #YOUR_COLOR; */

Adjust Button Size:

For icon-only buttons, change the width and height values:

width: 44px; height: 44px;  /* Make larger or smaller as needed */

Change Border Radius:

Make buttons more rounded or square:

border-radius: 4px;  /* Use 0px for square, 50% for circular */

Add More Spacing:

Increase the gap between buttons:

gap: 10px;  /* Increase to 15px or 20px for more space */

Comparing Both Methods

Feature	Method 1: Standard Buttons	Method 2: HTML Block
Setup difficulty	⭐ Easy (point and click)	⭐⭐ Medium (copy/paste code)
Coding required	❌ None	✅ Basic HTML/CSS
Design flexibility	⭐⭐ Medium (Wisepops styling options)	⭐⭐⭐ High (full CSS control)
Icon support	⭐ Limited (text/emoji only)	⭐⭐⭐ Yes (SVG icons included)
Maintenance	⭐⭐⭐ Edit each button separately	⭐⭐ Edit code directly
Mobile responsive	⭐⭐ Need to adjust each button	⭐⭐⭐ Automatically responsive
Professional look	⭐⭐ Good	⭐⭐⭐ Excellent with icons
Best for	Quick setup, beginners	Professional look, custom branding

Best Practices

Place strategically: Position share buttons after your main CTA so they don't distract from your primary conversion goal
Mobile optimization: Always test on mobile devices, especially for Instagram Story sharing
Clear image URLs: For Instagram sharing, ensure your image URL is publicly accessible and displays correctly
Track performance: Use Wisepops' analytics to see if visitors are engaging with your share buttons. Consider adding UTM parameters to your share URLs for better tracking
Match your brand: Customize button colors to align with your brand if the default social media colors don't fit your design
Keep it simple: Don't overwhelm visitors with too many sharing options - stick to 2-3 most relevant platforms for your audience
Add context: Consider adding a small text element above the buttons like "Love this? Share with friends!" to encourage sharing
Test thoroughly: Always preview and test on both desktop and mobile before publishing

Troubleshooting

Instagram Story button doesn't work:

This feature only works on mobile devices with the Instagram app installed
Ensure the image URL is publicly accessible (test by opening it in an incognito browser)
The URL must use HTTPS, not HTTP
The image should be optimized for Instagram Stories (1080x1920px recommended)

Facebook share shows wrong preview:

Facebook caches page metadata - use Facebook's Sharing Debugger to refresh
Ensure your page has proper Open Graph meta tags

Email button opens blank:

Check that special characters in subject/body are properly encoded (spaces = %20)
Some email clients may not support pre-filled body text on mobile devices
Keep the subject and body text reasonably short

Buttons don't display (Method 2):

Ensure you've pasted the code into an HTML block, not a text block
Check that your popup width is wide enough to display all buttons
Verify there are no syntax errors in the HTML code

Button links don't work (Method 1):

Verify "Open in new tab" is enabled for Facebook and Instagram
Check that URLs are properly formatted with no extra spaces
Test the URL directly in your browser to ensure it works

Buttons look misaligned:

Use Wisepops' alignment tools to center or distribute buttons evenly
For Method 2, adjust the justify-content value in the CSS

Need Help?

If you have questions or need assistance implementing social share buttons, contact our support team at support@wisepops.com or check out our other help articles on customizing popups.

Insert social widgets into your campaigns