How to create social media sharing buttons on your website

headerOver the past few years, social media has progressively become a key source of traffic for many websites. It is a powerful promotional tool because it implies that your friend got some value out of the page. Making it simple for people to share your content is thus a great boost to your website. However, each social network has it’s own way of implementing social media sharing buttons, so today we’re going to show you how you can put these on your own site!

It is easy if you’re using Website Builder

screen-shot-2016-10-31-at-11-04-50-am

Website builder makes it incredibly easy for you to include social sharing buttons. All you have to do is to go to the Components panel and drag the ‘Share Buttons‘ component to the part of the site you want, and voila! There are several options you can choose from in the Properties panel as well, so you can choose how your buttons look!

screen-shot-2016-10-31-at-11-16-05-am

 

There are several plugin options if you’re using WordPressscreen-shot-2016-10-31-at-11-19-34-am

If you’re using WordPress, there are plugins you can use to incorporate sharing buttons. Share Buttons by AddThis has over 200,000 active installs and a 4- star rating and Shareaholic has over 100,000 installs as well as a respectable 4-star rating. I have previously experienced a plugin conflict with the sharing buttons I was using, so it’s something you want to look out for. Perhaps even try a few to see which ones work best for you website.

A cheat sheet for creating custom buttons

materialsocialicons
Custom buttons are also another option. Perhaps you found a social media icon set you really like, maybe you had some custom created. Here are links you can use (that don’t require Javascript or any other dependencies) for each social network.

  • Facebook: http://www.facebook.com/sharer/sharer.php?u=[URL]&title=[TITLE]
  • Twitter: http://twitter.com/intent/tweet?status=[TITLE]+[URL]
  • Pinterest: http://pinterest.com/pin/create/bookmarklet/?media=[MEDIA]&url=[URL]&description=[TITLE]
  • Google+: https://plus.google.com/share?url=[URL]
  • LinkedIn: http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE/DOMAIN]

Source: http://petragregorova.com/articles/social-share-buttons-with-custom-icons/

You can also use each social network’s code snippets

screen-shot-2016-10-31-at-11-55-34-am

Finally, if you prefer buttons that are the iconic ones for the brand, each network also has instructions on what you need to do. Fair warning, though, these get pretty involved and require some knowledge of HTML/CSS/Javascript. Here are the links:

Now you have the resources you need to go create your own sharing buttons!

Fields marked with an * are required

Want to see more of posts like these? Subscribe to be updated with occasional highlights. Don't worry, we hate spam as much as you do - we will not share your email with third parties.


Comments