Categories
CSS HTML JavaScript

Create Your Own Social Media Powerhouse: Building a Share/Follow Widget from Scratch

Create Your Own Social Media Powerhouse: Building a Share/Follow Widget from Scratch

In today’s digital landscape, having a robust social media presence is crucial for businesses, bloggers, and content creators alike. Social media widgets play an essential role in driving traffic and increasing engagement on your website. In this comprehensive guide, we will walk you through the process of building your own share/follow social media widget from scratch. By the end, you’ll be able to create a widget tailored to your unique needs and optimized for search engines.

Why Build Your Own Social Media Widget?

While there are many third-party social media widgets available, creating your own offers several benefits:

  1. Customization: You can design your widget to match your website’s aesthetics and include only the social networks relevant to your audience.
  2. Performance: Third-party widgets often come with bloated code, which can slow down your website. Building your own widget allows you to optimize for performance.
  3. Privacy: By hosting your widget, you retain full control over the data collected and can ensure that no third-party cookies are being used.

Planning Your Social Media Widget

Before diving into code, it’s important to plan out your widget. Consider the following:

  • Which social networks do you want to include?
  • Do you want to display share or follow buttons, or both?
  • What design elements (color, size, shape) do you want to use for your buttons?

Once you have a clear vision of your widget, it’s time to start coding!

Setting Up the HTML Structure

Begin by creating the basic HTML structure for your widget. This will include a container for the widget and separate elements for each social media platform.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Website</title>
</head>
<body>
  <!-- Social Media Widget Container -->
  <div class="social-media-widget">
    <!-- Facebook Share Button -->
    <a href="#" class="facebook-share">Share on Facebook</a>

    <!-- Twitter Share Button -->
    <a href="#" class="twitter-share">Share on Twitter</a>

    <!-- LinkedIn Share Button -->
    <a href="#" class="linkedin-share">Share on LinkedIn</a>

    <!-- Instagram Follow Button -->
    <a href="#" class="instagram-follow">Follow on Instagram</a>
  </div>
</body>
</html>

Styling Your Widget with CSS

Now that you have the basic HTML structure, it’s time to style your widget using CSS. Start by creating a new file called styles.css and link it in your HTML file:

<head>
  ...
  <link rel="stylesheet" href="styles.css">
</head>

Next, add the following CSS code to your styles.css file to style the buttons:

.social-media-widget {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.facebook-share,
.twitter-share,
.linkedin-share,
.instagram-follow {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
}

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

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

.linkedin-share {
  background-color: #0077B5;
}

.instagram-follow {
  background-color: #C13584;
}

This code will give your buttons a clean, professional look with appropriate colors for each social network.

Adding Share Function

Now that your widget is styled, it’s time to add the sharing functionality. To do this, we’ll use JavaScript to dynamically create share URLs for each social media platform.

First, add a script tag at the end of your HTML file, just before the closing </body> tag:

<script src="script.js"></script>
</body>

Next, create a new file called script.js and add the following code to handle the sharing functionality:

function getShareUrl(platform) {
  const pageTitle = encodeURIComponent(document.title);
  const pageUrl = encodeURIComponent(window.location.href);

  switch (platform) {
    case 'facebook':
      return `https://www.facebook.com/sharer.php?u=${pageUrl}&t=${pageTitle}`;
    case 'twitter':
      return `https://twitter.com/intent/tweet?url=${pageUrl}&text=${pageTitle}`;
    case 'linkedin':
      return `https://www.linkedin.com/shareArticle?url=${pageUrl}&title=${pageTitle}`;
    default:
      return '';
  }
}

document.querySelectorAll('.social-media-widget a').forEach((button) => {
  const platform = button.className.split('-')[0];
  const isFollowButton = button.classList.contains('instagram-follow');

  if (isFollowButton) {
    button.href = 'https://www.instagram.com/your_username/';
    button.target = '_blank';
  } else {
    button.href = getShareUrl(platform);
    button.onclick = (e) => {
      e.preventDefault();
      window.open(e.target.href, '_blank', 'width=600,height=400');
    };
  }
});

This code creates a function called getShareUrl that takes a platform name as an argument and returns the appropriate share URL. It then loops through each button in the widget and sets the correct href attribute based on the platform and whether it’s a follow or share button. Finally, it adds an onclick event listener to open the share URL in a new window when the user clicks a share button.

Custom Share/Follow Social Media Widget

Congratulations! You’ve now successfully built your own share/follow social media widget from scratch. Not only is your widget visually appealing and functional, but it’s also optimized for search engines. By following the steps outlined in this guide, you’ve taken control of your website’s performance, aesthetics, and privacy while enhancing its social media presence.