Encouraging social sharing among your customers and fans can be a great way to increase your online reach. But no one will share your content if it’s a chore.
Forget about making people copy and paste links. With simple code, you can add social media buttons that allow users to share your content across the web with just a few clicks.
Reading: How to create a twitter share button on website
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 way they work varies somewhat between networks. But each type generally does what its name suggests:
- Share buttons allow users to share your content with friends and followers
- Like buttons allow you to give your content a virtual thumbs up
- Follow buttons subscribe to your updates on the specified social network
All 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 described below for each social network.
Social Media Buttons for Facebook
Facebook provides several social media buttons: Share, Follow ‘, ‘Like’, ‘Save’ and ‘Send’.
Facebook share button
How it works
Adding a Facebook share button to your website does little for visitors surprisingly sharing your content with their friends and followers on facebook. They can share your content on their timeline, in a group, or even in a private message through Facebook Messenger. Users can also add their own personalized message to the shared content before posting it.
How to add a Facebook share button
Use to create Facebook share button code share button configurator that you can paste into your website HTML.
Facebook share button options
If you include a Facebook share button on your website, you can choose whether to show how many times the page has been shared (like the button above). If your page gets a lot of social shares, this number can be a great social proof of the value of your content.
Facebook follow button
How it works
Follow button allows users to subscribe to public updates from corresponding Facebook page.
How to add a Facebook follow button
Use the Facebook “Follow” button interface to create code that you can copy and paste into your HTML.
Options for the “” button Facebook Followers
You can choose to show the number of people who already follow your page by selecting the “Number of boxes” or “Number of buttons” options. For personalized social proof, you can show visitors which of their existing Facebook friends are already following your page and even show the faces of those followers by selecting the “Default” option and clicking the “Show Faces” button.
Facebook Like button
How it works
Clicking the Like button on your website has same effect as clicking “Like” on one of your Facebook posts. Liked content will appear on the user’s Facebook timeline and may appear in their friends’ news feeds.
How to add a Facebook Like button
Go to Facebook 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 display how many times the page has already been liked. You can also provide the custom button that shows which Facebook friends of the viewer have already liked the page.
One particularly interesting option is that you can choose “Recommend” for the button instead select “Like”.
Save to Facebook button
How it works
The Save to Facebook button works just like the Save option in Facebook posts. It saves the link to a user’s private list for later reference – essentially bookmarking it within Facebook and easily sharing it later.
How to add a “On Facebook
Use the Facebook save button configurator to create the code to paste into your HTML.
Facebook button Send
How it works
The Facebook Send button allows users to send content from your website directly to Facebook Messenger via a private message to send their friends, a form of dark social sharing.
How to add a Facebook send button
You guessed it – Facebook has a send button configurator that will provide you with the code you put in Insert your HTML.
Social media buttons for Instagram
Instagram doesn’t offer a share or like button – which makes sense since Instagram is a mobile photo-sharing platform and videos it comes with it’s not really good for liking and sharing web content.
See also: High School Student Resume Template & 20 Examples
Instead, Instagram used to offer badges that you could use to send people from your website straight to your Instagram feed, but these badges are no longer available. Changes to the Instagram API have also made it harder for third parties to create working Instagram buttons and badges.
This means you have very few options when it comes to Instagram social sharing buttons. But there’s an easy workaround: 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 site. You could even post a photo on Instagram that you use specifically for this purpose – a kind of permanent post that highlights the value of your Instagram account.
Or you could create an Instagram post that directly refers to it obtains the content of a specific page. Of course, you don’t want to do this on all 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 follower button
- Navigate to the specific post you wish to embed, or go to your Instagram profile and scroll back to find a relevant option
- Click on the post
- Click on the more button (…) at the bottom right
- Select Embed
- Choose if you want to include the caption, then click Copy embed code
- Post code to your HTML
Social media buttons for LinkedIn
LinkedIn provides custom JavaScript code for share and follow buttons.
LinkedIn share button
So fun works
The LinkedIn share button combines the functionality of the Facebook share and send buttons. It allows users to share their content on LinkedIn in a variety of ways – on their public profile, with their contacts, in a group, or in a message to one or more people. Clicking the button opens a pop-up window offering the option to add a personal message to the post, along with share options.
How to add a share button Add LinkedIn
Go to the LinkedIn Share Plugin Generator to create JavaScript code to paste into your HTML.
LinkedIn Share Button Options
You can choose whether to show how many 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 site.
How to add a LinkedIn Follow button
Use the LinkedIn Follow Company Plugin Generator to create code to inject into your H TML code.
LinkedIn Follow button options
As with the LinkedIn share button, you can select this Showcase the number of people following your Businesses already on Lin follow kedIn as part of the follow button.
But there’s a more interesting option to explore. The company profile plugin works similar to a simple follow button, but provides more information about your company with a simple hover of a mouse. To try it out, hover over the button below.
You can create your own using the LinkedIn Company Profile Plugin Builder.
Social Media Buttons for Twitter
In addition to the standard Share and Follow buttons, Twitter offers buttons to tweet with a specific hashtag or to @-mention someone with the click of a button. There is also a button that allows someone to send you a private Twitter message.
Twitter share button
How it works
When a user clicks the tweet button, a popup 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’re getting from your Twitter share button. The user can add more text if needed before sending the tweet.
How to add a Twitter share button
- Go to publish.twitter .com, scroll down and click Twitter Buttons
- Click Share Button
- Click above the code box to Set customization options
- Enter your settings for tweet options and button size, then click Update
- Copy the code provided and paste it into your HTML
Twitter Share Button Options
Customization options allow you to choose whether you include a hashtag and “via” username that will ensure you are credited as the source of your great content. You can also prefill 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 will open a pop-up window with a preview of your Twitter profile. The user must click “Follow” again in this pop-up window to complete the process.
How to add a Twitter follow button
- Go to publish.twitter.com, scroll down and click Twitter buttons
- Click Follow button
- Enter your Twitter name including the @ symbol (e.g. @Hootsuite)
- Click Preview
- Above the code field, click Set customization options
- Enter your settings for tweet options and button size, then click Update
- Copy the provided code and paste it into your HTML
Twitter follow button options
You can choose to show or hide your username on the button should be faded and whether the button should be displayed small or large. You can also choose the language your button will appear in.
Twitter mention button
How it works
If someone Clicking the Twitter mention button on your site will pop up a blank tweet that begins with an @mention of your username. This can be a great way to get readers to interact with your team on Twitter, or encourage customer service requests across the network.
How to add a Twitter mention button
- Go to publish.twitter.com, scroll down and click on Twitter Buttons
- Click on mention Button
- Enter your Twitter name, including the @ symbol (e.g. @Hootsuite)
- Click Preview
- Above the code field, click Set customization options
- Enter your settings for tweet options and button size, then click Update
- Copy and paste the provided code into your HTML
Twitter mention button options
You can add a text i Prefill m tweet, which can be a useful idea when using the button on a customer service page. You can also choose whether the button should be large or small, as well as the language in which the button text should be displayed.
Twitter hashtag button
See also: How to Get High Quality Backlinks in 2022 (7 New Strategies)
How it works When someone clicks a Twitter hashtag button on your site, a pop-up opens with a tweet filled with the selected hashtag. This is a great way to encourage people to share content related to your branded hashtag or engage them in a Twitter chat.
How to add a Twitter hashtag Add button
- Go to publish.twitter.com, scroll down and click Twitter Buttons
- Click Hashtag Button
- Enter your chosen hashtag, including the # symbol (e.g. #HootChat)
- Click Preview
- Above the code field, click Set customization options
- Enter your settings for tweet options and button size, then click on Update
- Copy the provided code and paste it into your HTML
Twitter hashtag button options
As with the mention button n You enter prefilled text, select the button size, and specify the language in which you want the button text to appear. You can also include a specific URL, which might work well if you’re archiving your Twitter chats or collecting user-generated content on a specific page. You can also select 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 feature than Facebook’s Send button, which allows users to send your content in a private message to anyone they’re connected to. With the Twitter message button, users can only contact you, not anyone else on Twitter. While this doesn’t help increase your social reach, it could be a great way to encourage people to contact your customer service and sales teams via Twitter.
A Twitter message button works best if you’ve set your account to allow direct messages from anyone. Otherwise, people who don’t follow you won’t be able to message you and may become frustrated with your brand.
How to add a Twitter Messages button
- Log in to your Twitter account
- In the left column, click Privacy & Security
- Scroll down to Direct Message and Check the box next to Receive direct messages from everyone
- Click on your Twitter details in the left column. You may need to enter your password to access this screen
- Choose and copy your user ID that appears below your username
- Go to publish.twitter.com , scroll down and click on Twitter Buttons
- Click on Message Button
- Enter your username in the top box, including the @ symbol (e.g. @ Hootsuite)
- Paste your user ID in the bottom box
- Click Preview
- Above the code field, click Set customization options
- Enter your settings for tweet options and button size, then click Update
- Copy the provided code and paste it into your HTML
Twitter Message Button Options
You can e Pre-populate a message body, which might work well if the button is on a page where you’re likely to be contacted about a specific product, customer service issue, or promotion. You can also choose whether your username should be displayed on the button, the button size and the language in which the button text is displayed.
Social media buttons for YouTube
Offers YouTube only provides a social media button that allows users to subscribe to a YouTube channel.
YouTube subscribe button
How it works
Like the Twitter follow button, YouTube subscribe button requires two clicks. First, when someone clicks your subscribe button, your YouTube channel will open in a new window with a subscription confirmation box. The user must then click Subscribe again for the subscription to take effect.
How to add a YouTube subscribe button
Use the YouTube page for configuring a button to create the code you need to put in your HTML.
YouTube subscribe button options
You have a few options when configuring your YouTube subscribe button. You have the option to include your YouTube profile picture, a dark background behind the button, and whether you want to display your existing subscriber count. As with the other networks, highlighting an existing large subscriber base can be a great signal for social proof.
Social media buttons for Pinterest
Pinterest save button
How it works
The Pinterest save button is the same as the share button for other networks, as saving your content to a Pinterest board increases your reach. Because Pinterest is an image-based platform for gathering information and ideas, it works a little differently than share buttons on other networks. There are three different ways you can set up the Pinterest save button on your site:
- Image hover: Instead of putting a standalone Pinterest button on your site , provides this option creates code that displays a Pin It button when someone mouses over any image on your page. This is Pinterest’s most recommended option.
- Any Image: Use this option to place a Pinterest button on your website. Clicking this gives the user the option to save any of the images from your website to their Pinterest boards.
- One image: In this case, the Save button applies ‘ only for a single image on your page. This is the most complicated option in terms of coding.
How to add a Pinterest save button – hover image or any image style
- Go to the Pinterest widget builder and click Save button
- Choose what type of button you want to use: hover image or any Image
- Choose your preferred button size and shape options
- 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, just above the tag
How to add a Pinterest save button – an image style
- Go to the Pinterest widget builder and click Save button
- Choose your preferred button size and shape options
- In a new browser window, go to the page on your website that has the image you want to work with
- Copy the URL of this website and paste it into the URL field 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 in the Imagefield in the widget builder
- Enter a description for your image in the field Description in the widget builder. This will appear below your image when someone saves it to Pinterest.
- Click the Pin It sample button in the widget builder to test your button
- Copy the code button and paste it into your HTML.
- Copy the pinit.js script from the bottom of the widget builder page into your HTML, just above the tag
Save Pinterest button options
In addition to choosing the type of button to use, you can choose the shape (round or rectangular), size (small or large), and language of your button adjust. You can also choose whether to show the number of pins you have for your image.
Pinterest follow button
Hootsuite
How it works es
When someone clicks the Pinterest “Follow” button on your site, a preview window will open showing your most recent pins. They then click the “Follow” button in that preview to follow your Pinterest account.
How to add a Pinterest follow button
- Go to Pinterest Widget Builder and click Follow
- Enter your Pinterest profile URL
- Enter your business name as you want it to appear on the button
- Copy the button code and paste it into your HTML
- Copy the pinit.js script from below on the widget creation page in your HTML, just above the tag
Pinterest follow button options
Your only option with the Pinterest follow button is to display your business name. You may want to use your Pinterest username or your full company name. In any case, stick with something that’s easy for users to understand.
Hootsuite social media buttons
Hootsuite provides a social media button that lets users share your content on any network can have connected to their Hootsuite dashboard.
Hootsuite Share button
How it works
When a user on When you click 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 on: Twitter, Facebook, LinkedIn, Google+ or all of the above. You can add a personal message before sharing and decide whether to post immediately, schedule the post for a specific time in the future, or use Hootsuite’s auto-schedule feature.
How to add a Hootsuite Share button
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.
Let’s get started
See also: How to Start a Travel Blog in 2023: A Step-by-Step Guide for Beginners
.
