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.
Table of contents
Types of social media buttons
Social media buttons for Facebook
Social media buttons for Instagram
Social media buttons for LinkedIn
Social media buttons for Twitter
Social media buttons for YouTube
Social media buttons for Pinterest
Social media buttons for Hootsuite
Types of social media buttons
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:
- Share buttons allow users to share your content with friends and followers
- Like buttons allow them to give your content a virtual thumbs-up
- Follow buttons will subscribe them to your updates on the specified social network
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.
Social media buttons for Facebook
Facebook offers several social media buttons: share, follow, like, save, and send.
Facebook share button
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.
Facebook share button options
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.
Facebook follow button
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.
Facebook follow button options
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.
Facebook Like button
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.
Facebook Like button options
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.”
Save to Facebook button
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.
Facebook send button
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.
Social media buttons for Instagram
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.
https://www.instagram.com/p/7N5SOkrd82/?taken-by=hootsuite
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
- Navigate to the specific post you want to embed, or go to your Instagram profile and scroll back to find a relevant choice
- Click on the post
- Click on the more button (…) at the bottom right
- Select Embed
- Choose whether you want to include the caption and then click Copy Embed Code
- Post the code into your HTML
Social media buttons for LinkedIn
LinkedIn offers customized JavaScript code for both share and follow buttons.
LinkedIn share button
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.
LinkedIn share button options
You can choose whether to showcase the number of times your content has already been shared on LinkedIn.
LinkedIn follow button
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.
LinkedIn follow button options
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.
Social media buttons for Twitter
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.
Twitter share button
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
- Go to publish.twitter.com, scroll down, and click on Twitter Buttons
- Click Share Button
- Above the code box, click on set customization options
- Enter your preferences for Tweet options and button size, then click Update
- Copy and paste the provided code into your HTML
Twitter share button options
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.
Twitter follow button
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
- Go to publish.twitter.com, scroll down, and click on Twitter Buttons
- Click Follow Button
- Enter your Twitter handle, including the @ symbol (e.g., @Hootsuite)
- Click Preview
- Above the code box, click on set customization options
- Enter your preferences for Tweet options and button size, then click Update
- Copy and paste the provided code into your HTML
Twitter follow button options
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.
Twitter mention button
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
- Go to publish.twitter.com, scroll down, and click on Twitter Buttons
- Click Mention Button
- Enter your Twitter handle, including the @ symbol (e.g., @Hootsuite)
- Click Preview
- Above the code box, click on set customization options
- Enter your preferences for Tweet options and button size, then click Update
- Copy and paste the provided code into your HTML
Twitter mention button options
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.
Twitter hashtag button
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
- Go to publish.twitter.com, scroll down, and click on Twitter Buttons
- Click Hashtag Button
- Enter your chosen hashtag, including the # symbol (e.g., #HootChat)
- Click Preview
- Above the code box, click on set customization options
- Enter your preferences for Tweet options and button size, then click Update
- Copy and paste the provided code into your HTML
Twitter hashtag button options
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.
Twitter message button
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
- Log into your Twitter account
- In the left column, click on Privacy and safety
- Scroll down to Direct Message and check the box next to Receive Direct Messages from anyone
- In the left column, click on Your Twitter data. You may need to enter your password to access this screen
- Select and copy your user ID, which appears under your username
- Go to publish.twitter.com, scroll down, and click on Twitter Buttons
- Click Message Button
- Enter your username in the top box, including the @ symbol (e.g., @Hootsuite)
- Paste your user ID into the bottom box
- Click Preview
- Above the code box, click on set customization options
- Enter your preferences for Tweet options and button size, then click Update
- Copy and paste the provided code into your HTML
Twitter message button options
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.
Social media buttons for YouTube
YouTube only offers one social media button, which allows users to subscribe to a YouTube channel.
YouTube subscribe button
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.
YouTube subscribe button options
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.
Social media buttons for Pinterest
Pinterest save button
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:
- Image hover: Rather than placing a standalone Pinterest button on your website, this option creates code that brings a Pin It button up when someone hovers their mouse over any image on your page. This is the option most recommended by Pinterest.
- Any image: With this option, you place a Pinterest button on your webpage. Clicking it gives the user the option to save any of the images from your site to their Pinterest boards.
- One image: In this case, the save button only applies to a single image on your page. This is the most complicated option in terms of coding.
How to add a Pinterest save button—image hover or any image style
- Go to the Pinterest widget builder and click Save Button
- Choose which type of button you want to use: image hover or any image
- Select your preferred options for button size and shape
- Hover your mouse over the sample image to preview your button
- Copy the button code and paste it into your HTML
- For the any image option, copy and paste the pinit.js script from the bottom of the widget builder page into your HTML, right above the tag
How to add a Pinterest save button—one image style
- Go to the Pinterest widget builder and click Save Button
- Select your preferred options for button size and shape
- In a new browser window, go to the page on your website where the image you want to work with appears
- Copy and paste the URL of that webpage into the URL box in the widget builder
- On your webpage, right click the image you want to work with, and select Copy Image URL
- Paste the image URL into the Image box in the widget builder
- Enter a description for your image in the Description box in the widget builder. This will appear beneath your image when someone saves it to Pinterest
- Click the sample Pin It button in the widget builder to test your button
- Copy the button code and paste it into your HTML
- Copy and paste the pinit.js script from the bottom of the widget builder page into your HTML, right above the tag
Pinterest save button options
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.
Pinterest follow button
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
- Go to the Pinterest widget builder and click Follow
- Enter your Pinterest profile URL
- Enter your business name as you wish it to appear on the button
- Copy the button code and paste it into your HTML
- Copy and paste the pinit.js script from the bottom of the widget builder page into your HTML, right above the tag
Pinterest follow button options
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.
Social media buttons for Hootsuite
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.
Hootsuite share button
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.
Hootsuite share button options
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.
