Encouraging social sharing among your customers and fans can be a great way to extend your online reach. But no one’s going to share your content if it’s a chore to do so.
Forget making people copy and paste links. With some simple code, you can add social media buttons that allow users to share your content across the webs with just a couple of clicks.
The most common types of social media buttons offer share, like, and follow functions. Each serves a different purpose, and the ways they work vary somewhat among networks. But each type generally does what its name implies:
All of the social media buttons in this post are active, so you can interact with them to see exactly how they work. We created them using the tools outlined for each social network below.
Facebook offers several social media buttons: share, follow, like, save, and send.
How it works
Adding a Facebook share button to your website, not surprisingly, allows visitors to share your content with their friends and followers on Facebook. They can choose to share your content on their timeline, to a group, or even in a private message using Facebook Messenger. Users can also add their own personalized message to the shared content before posting.
How to add a Facebook share button
Use Facebook’s share button configurator to create share button code that you can paste into your website’s HTML.
When you include a Facebook share button on your site, you can choose whether to show the number of times the page has already been shared (as we did in the button above). If your page gets a lot of social shares, this number can provide great social proof of the value of your content.
How it works
The follow button allows users to subscribe to public updates from the relevant Facebook Page.
How to add a Facebook follow button
Use Facebook’s follow button interface to create code you can copy and paste into your HTML.
You can choose to show the number of people who already follow your page by selecting the “box count” or “button count” options. For personalized social proof, you can choose to show visitors which of their existing Facebook friends already follow your page, and even show those followers’ faces, by selecting the “standard” option and clicking the Show Faces box.
How it works
Clicking the Like button on your website has the same effect as clicking Like on one of your Facebook posts. The liked content shows in the user’s Facebook timeline, and may appear in their friends’ newsfeeds.
How to add a Facebook Like button
Go to Facebook’s Like button configurator to create the code to copy and paste into your HTML.
As with the other Facebook buttons, you can choose to show the number of times the page has already been liked. You can also provide the customized button showing which of the viewer’s Facebook friends have already liked the page.
One extra interesting option is that you can choose for the button to say “Recommend” instead of “Like.”
How it works
The Save to Facebook button works just like the Save option on Facebook posts. It saves the link to a user’s private list so that they can go back to it later—essentially bookmarking it within Facebook and making it easy to share later.
How to add a Save to Facebook button
Use Facebook’s Save button configurator to create the code to paste into your HTML.
How it works
The Facebook send button allows users to send content from your website directly to their friends through a private message on Facebook Messenger, a form of dark social sharing.
How to add a Facebook send button
You guessed it—Facebook has a send button configurator to provide you with the code you need to paste into your HTML.
Instagram does not offer Share or Like buttons—which makes sense, since the nature of Instagram as a mobile photo- and video-sharing platform means it’s not really suited to liking and sharing web content.
Instead, Instagram used to offer badges that you could use to send people from your website directly to your Instagram feed, but those badges are no longer available. Changes to the Instagram API have also made it difficult for third-party providers to create functional Instagram buttons and badges.
That means you’re left with very few options in terms of social sharing buttons for Instagram. But there is one workaround, and it’s a simple one: embed an Instagram post.
In addition to the photo, the embedded post includes an active follow button that allows users to follow your account without leaving your website. You could even post a photo to Instagram that you’ll use specifically for this purpose—some kind of evergreen post that highlights the value of your Instagram account.
Or you could create an Instagram post that directly relates to the content on a specific page. You obviously won’t want to do this on all of your web pages, but embedding a relevant Instagram photo can be a great option in blog posts.
How to embed an Instagram post with a follow button
LinkedIn offers customized JavaScript code for both share and follow buttons.
How it works
The LinkedIn share button combines the functions of the Facebook share and send buttons. It allows users to share your content on LinkedIn in several ways—on their public profile, with their contacts, in a group, or in a message to one or more individuals. Clicking on the button opens a pop-up window that provides the option to add a personal message to the post, along with sharing options.
How to add a LinkedIn share button
Go to the LinkedIn share plugin generator to create JavaScript code you can paste into your HTML.
You can choose whether to showcase the number of times your content has already been shared on LinkedIn.
How it works
Clicking the LinkedIn follow button allows users to follow your company on LinkedIn without leaving your website.
How to add a LinkedIn follow button
Use the LinkedIn follow company plugin generator to create code to paste into your HTML.
As with the LinkedIn share button, you can choose to showcase the number of people who already follow your company on LinkedIn as part of the follow button.
But there is also a more interesting option to explore. The company profile plugin functions in much the same way as a simple follow button but provides more information about your company with the simple hover of a mouse. To try it out, try hovering your mouse over the button below.
You can create your own using the LinkedIn company profile plugin generator.
In addition to the standard share and follow buttons, Twitter offers buttons to Tweet with a particular hashtag, or to @-mention someone with the click of your mouse. There’s also a button that allows someone to send you a private Twitter message.
How it works
When a user clicks on the Tweet button, a pop-up window opens with a Tweet containing the title of the page and its URL—or you can set a custom URL. A custom URL allows you to include UTM parameters to track how much traffic you get from your Twitter share button. The user can add more text if they wish before sending the Tweet.
How to add a Twitter share button
Using the customization options, you can choose to include a hashtag and a “via” username, which ensures you get credit as the source of your great content. You can also choose to pre-fill some text.
How it works
The Twitter follow button is not quite as efficient as the Facebook follow button, as it requires two clicks from users. Clicking the button opens a pop-up window with a preview of your Twitter profile. The user has to click Follow again in that pop-up window to complete the process.
How to add a Twitter follow button
You can choose whether to show or hide your username on the button, and whether you would like the button to be small or large. You can also choose the language in which your button is displayed.
How it works
When someone clicks on the Twitter mention button on your website, a pop-up window appears with a blank Tweet beginning with an @-mention of your username. This can be a great way to get readers to engage with your team on Twitter, or to encourage customer service queries through the network.
How to add a Twitter mention button
You can choose to pre-fill some text in the Tweet, which can be a good idea if you’re using the button on a customer service page. You can also choose whether you would like the button to be large or small, and the language in which to display the button text.
How it works
When someone clicks on a Twitter hashtag button on your website, a pop up window opens to a Tweet populated with the chosen hashtag. This is a great way to encourage people to share content to your branded hashtag, or motivate them to participate in a Twitter chat.
How to add a Twitter hashtag button
As with the mention button, you can enter pre-filled text, choose the button size, and specify the language in which to display the button text. You can also choose to include a specific URL, which could work well if you archive your Twitter chats or collect user-generated content on a specific page. You could also choose a landing page relevant to a specific hashtag campaign.
How it works
The Twitter message button allows users to send you a private direct message on Twitter. Note that this is a different function from the Facebook send button, which allows users to send your content in a private message to anyone they’re connected with. With the Twitter message button, users can only contact you, not anyone else on Twitter. While this won’t help to extend your social reach, it could be a great way to encourage people to contact your customer service and sales teams through Twitter.
A Twitter message button will work best if you have your account set to allow direct messages from anyone. Otherwise, people who do not follow you will not be able to send you messages, and may end up feeling frustrated with your brand.
How to add a Twitter message button
You can choose to pre-fill some message text, which could work well if the button is on a page where people are likely to contact you about a specific product, customer service issue, or promotion. You can also choose whether to show your username on the button, the button size, and the language in which to display the button text.
YouTube only offers one social media button, which allows users to subscribe to a YouTube channel.
How it works
Like the Twitter follow button, the YouTube subscribe button requires two clicks. First, when someone clicks on your subscribe button, your YouTube channel opens in a new window, with a subscription confirmation box. The user then has to click subscribe again for the subscription to take effect.
How to add a YouTube subscribe button
Use the YouTube configure a button page to create the code you need to paste into your HTML.
You have a few options when configuring your YouTube subscribe button. You have the options to include your YouTube profile image, a dark background behind the button, and whether you want to show your existing subscriber count. As with the other networks, highlighting an existing large subscriber count can be a great signal of social proof.
How it works
The Pinterest save button is equivalent to the share button for other networks in that saving your content to a Pinterest board extends your reach. Since Pinterest is an image-based platform for keeping track of information and ideas, it works a little differently from share buttons on other networks. There are three different ways you can set the Pinterest save button up on your site:
How to add a Pinterest save button—image hover or any image style
How to add a Pinterest save button—one image style
In addition to choosing which type of button to use, you can customize your button’s shape (round or rectangular), size (small or large), and language. You can also choose whether to show the existing Pin count for your image.
How it works
When someone clicks on the Pinterest follow button on your website, a preview window pops up to show your latest pins. They then click the Follow button within that preview to start following your Pinterest account.
How to add a Pinterest follow button
Your only option with the Pinterest follow button is how to display your business name. You may want to use your Pinterest username, or your full business name. Either way, stick to something easy for users to understand.
Hootsuite offers a social media button that allows users to share your content to any of the networks they have connected to their Hootsuite dashboard.
How it works
When a user clicks on the Hootsuite button on your website, a window opens with an interface that contains a link to your content. The user can choose which social networks to share it to: Twitter, Facebook, LinkedIn, Google+, or all of the above. They can add a personal message before sharing, and decide whether to post right away, schedule the post for a specified time in the future, or use Hootsuite’s auto-scheduling feature.
How to add a Hootsuite share button
Go to hootsuite.com/social-share, enter your URL, and copy and paste the code into your HTML.
You can choose from several different button styles.
Take your social media skills to the next level with free online training and videos from Hootsuite Academy.
Learning how to make money on TikTok can turn your hobby into a full-time job. Here are the best strategies for earning money on the app.
Instagram hashtags can make or break your Instagram strategy. Use them correctly and you’ll get your posts seen by more people.
Having the right social media management tools will save you a ton of time, effort, and money on social media.
Save time, get strategy advice, and never worry about finding the perfect caption. Here's how to get started with ChatGPT for social media.
