The Ultimate Cheat Sheet for Creating Social Media Buttons

by Pamela Vaughan

Date

December 7, 2011 at 9:00 AM

share share shareSocial media is an extremely valuable tool for promoting your great marketing content. But with so many social media platforms providing their own individual content sharing and follow buttons, it's often difficult to differentiate between which social media button to use for what purpose. Be confused no more! We've put together a handy, comprehensive guide to help you understand the differences between the share and follow buttons/links for the top 4 social networks as well as how to implement them on your website, blog, and other content. You'll never have to Google instructions for individual buttons again!

Follow Buttons vs. Share Buttons

The first step in understanding the nuances of all the various social media buttons is being able to differentiate between social sharing buttons/links and social media follow buttons, and identify which type of button you should be using. So let's clear that up right now.

Social Media Follow Buttons: These buttons serve to promote your business' presence on various social media sites and help you generate fans/followers for those particular accounts. By placing these buttons on your business' website, you can help to create visibility for your social media accounts and easily extend your reach there. You can put these buttons anywhere on your website, but we recommend at least placing these buttons on your website's main homepage, your 'About Us' page, and your blog's homepage. The "Official Twitter Follow Button," "Facebook Like Box," "LinkedIn Company Profile Plugin," and "Google+ Page Button" we'll cover in this article all serve as social media follow buttons.

Social Media Share Links/Buttons: These links and buttons enable your website visitors and content viewers to easily share content that is on your site with their social media connections and networks. Adding these buttons to your content allows you to expand the reach of your content to an audience you may not already be visible to and generate new visitors back to your website. You should add social media sharing links/buttons to every piece of content you create, including landing pages, web pages, individual blog articles, email content, etc. The "Official Tweet Button," "Tweet This Link," "Facebook Like Button," "Facebook Share Link," "LinkedIn Share Button," "+1 Button," and "Google+ Share Link" we'll cover in this article all serve as social media sharing buttons.

Now let's dive into the most important social media buttons available for each of the top four social networks.

Social Media Buttons for Twitter

Official Twitter Follow Button

twitter follow buttonWhat It's For:

How to Implement It: Visit https://twitter.com/about/resources/followbutton to customize your button's featured account (i.e. the account you want people to follow), its button color, language, and whether you want the button to feature your business' Twitter follower count. Then copy and paste the HTML code it generates where you want the button to appear on your website.

Official Tweet Button

official tweet buttonWhat It's For: Use this button to enable site visitors to easily share content (e.g. blog posts, landing pages, other website pages) with their networks on Twitter, extending the reach of your content to connections in visitors' Twitter networks. In fact, research shows that including a Tweet Button increases Twitter mentions sevenfold!

How to Implement It: Visit https://twitter.com/about/resources/tweetbutton to customize the look of the button, the text and URL it generates, its language, and optionally add an @mention for a specific Twitter account. We recommend adding your company's Twitter username to increase your account's reach and generate new followers. Once customized, grab the HTML code for your new button and place it on your site where you want the button to appear.

'Tweet This' Link

What It's For: Have you ever wanted to create a link that pre-populates a specific Twitter message for your visitors to share? We call these links 'Tweet This' links and at HubSpot, we use them in blog articles a lot (click here for a great example). Usually, these tweet links are used on landing pages to promote offers using specific messaging, and within content itself such as in blog posts or in ebooks/whitepapers. A 'Tweet This' link enables marketers to have more control over the message a visitor shares about their content on Twitter.

How to Implement It: We've created a tool to help you easily create 'Tweet This' links for your content. Simply visit http://blog.hubspot.com/blog/tabid/6307/bid/17589/default.aspx, enter the message you want to populate the tweet, and copy/paste the generated URL into your anchor text (e.g. "Tweet This!). As a best practice, include a shortened URL in the tweet message that will direct people back to the original piece of content you're trying to promote. It's also a great idea to include your business' Twitter username in the tweet to help increase reach. Here's an example of an effective 'Tweet This' link: Tweet This Blog Article!

Twitter Website Widgets

twitter widgetWhat They're For: Twitter also enables you to create dynamic widgets to showcase your Twitter activity on your website. Create a Profile Widget to show your most recent Twitter updates, a Search Widget to show search results in real time (tip: use this to showcase tweets for a hashtag you're promoting), a Faves Widget to highlight tweets you've marked as favorites (tip: favorite only testimonials for your business and add this widget to your website's case studies or testimonials page), or a List Widget to showcase tweets from users on particular Twitter lists you've generated (tip: create a Twitter list of your business' employees and add this widget to your website's careers page).

How to Implement Them: Visit https://twitter.com/about/resources/widgets, choose "My Website," select the type of widget you'd like to create, and customize your widget's settings, preferences, appearance, and dimensions. Then grab the HTML code and place it on your website where you want the widget to display.

To find all of Twitter's official social media buttons/widgets in one place, visit https://twitter.com/about/resources/

Social Media Buttons for Facebook

describe the imageFacebook Like Box

What It's For: Like Twitter's Official Follow Button, the Facebook Like Box enables your business to promote its Facebook business page on your website/blog, highlight other users who have already liked your page, and feature recent posts on your page. The box also allows visitors to become a fan of (AKA 'like') your Facebook business page with just one simple click without leaving your site, enabling you to promote your Facebook presence and easily increase your page's fan count.

How to Implement It: To generate a Facebook Like Box for your website, visit https://developers.facebook.com/docs/reference/plugins/like-box/. Include the URL for your Facebook business page as well as your customization preferences. Then generate the HTML code, and place it on your website where you want it to appear.

Facebook Like Button

facebook like buttonWhat It's For: Facebook's Like button is basically a button that enables visitors to easily give a virtual thumbs up to your content. By clicking the Like button, a story also appears on the user's Facebook profile and in their friends' News Feed with a link back to your web page, whether it's a blog post or a specific landing page. Use this button to make it easy for visitors to endorse your content and share it with their Facebook connections.

How to Implement It: Visit https://developers.facebook.com/docs/reference/plugins/like/ to customize your Like button and grab the code to place on your website.

Facebook Share Link

What It's For: While Facebook no longer supports its official Facebook Share button and has officially replaced it with the Like button, there are still some valuable use cases for implementing a Facebook share link on your content, and it's not difficult to do. While the Like button does automatically share content to the user's profile and get displayed in their friends' News Feeds, the button still doesn't enable users to add a comment or message to the content they're liking. Creating your own Facebook share links provides your visitors with the option to customize their messaging around the content they're sharing. These links can then be added to web pages, blog articles, landing pages, or within content like ebooks/whitepapers. (Click here for a great example of a blog post that effectively leverages Facebook share links.)

How to Implement It: To create your own Facebook share link, replace the red highlighted URL with the URL of the content you want to promote. Then link the full URL to the anchor text you want to appear in your content.

http://www.facebook.com/share.php?u=http://bit.ly/vOKpgC

The link you'll generate will look/act like this: Share on Facebook!

We've covered the most important social media buttons for your business here, but to find all of Facebook's official social media plugins in one place, visit https://developers.facebook.com/docs/plugins/.

Social Media Buttons for LinkedIn

LinkedIn Company Profile Plugin

LinkedIn follow widgetWhat It's For: Like Facebook's one-click Like Box and Twitter's one-click Follow Button, LinkedIn's Company Profile Plugin serves as a follow button for your business' LinkedIn Company Page. Installing it on your website will allow visitors to follow your company on LinkedIn with just one click, enabling you to generate more followers for your LinkedIn Company Page and expand the reach of the content you share through your LinkedIn Company Status Updates.

How to Implement It: Build your Company Profile Plugin by visiting https://developer.linkedin.com/plugins/company-profile-plugin, entering your company name, and selecting your desired display mode. Further customize based on your preferences, and grab the code to embed the plugin onto your site.

LinkedIn Share Button

linkedin share buttonWhat It's For: Adding LinkedIn's Share Button to your website, blog, and landing page content enables visitors to easily share it with their connections on LinkedIn. Like Facebook's Like Button and Twitter's Tweet Button, incorporating this button can help extend the reach of your content to the LinkedIn audience and drive traffic back to your site.

How to Implement It: To create and install this button, visit https://developer.linkedin.com/plugins/share-button, specify the URL you want to generate traffic to, and choose your button's style. Then generate your code and add the HTML to your site where you want the button to display.

LinkedIn Product Recommend Button

linkedin recommend buttonWhat It's For: This button allows your website visitors to 'recommend' your business' specific products and services, provided you've added the product to your Company Page's 'Products' tab. When a user recommends a product, it's reflected on your LinkedIn Company Page. Furthermore, marketers can also choose to showcase the number of visitors who have recommended a specific product on the website button to leverage the power of social proof. Great places for these buttons are the product pages of your business' website.

How to Implement It: Generate your LinkedIn Recommend Button by visiting https://developer.linkedin.com/plugins/recommend-button?button-type-count-top=true, inputting your company name and the product ID of the product you want to feature (find the product ID by visiting the product's individual page in your LinkedIn Company Page's 'Products' tab and grabbing the numerical ID from that page's URL -- see below), and choosing a count mode.

linkedin product id resized 600

Then generate the button code, and add it to your webpage. Easy peasy!

To find all of LinkedIn's official social media plugins in one place, visit https://developer.linkedin.com/plugins.

Social Media Buttons for Google+

Google+ Page/Profile Button

google profile buttonWhat It's For: This is Google+'s version of other social networks' follow buttons. The only caveat is that it's not a slick, one-click follow button. Rather, users have to click to your Google+ business page and then manually add your page to one of their Circles in order to follow you. However, displaying this button on your website is a great way to promote your business' presence on Google+ and generate more followers for your page, increasing the reach of the content you promote there.

How to Implement It: To create a Google+ Page Button, visit http://www.google.com/webmasters/profilebutton/, enter your Google+ Page's URL, choose an image size, and copy/paste the HTML code onto your website where you'd like the button to appear.

+1 Button

 1 buttonWhat It's For: The +1 Button is Google's version of Facebook's Like Button. Adding this button to your website and content provides an easy way for visitors to +1 (or vote for/endorse) your content, recommend it in search results, and share it with their connections on Google+, expanding the reach of your content and increasing traffic back to your business' website. In fact, our research shows that websites that use Google's +1 button generate 3.5x more website visits from Google+ than websites that don't use the +1 button.

How to Implement It: Visit http://www.google.com/webmasters/+1/button/ to customize your +1 button and generate its embed code.

Google+ Share Link

What It's For: Like Facebook's share links, you can easily generate a link that visitors can click to share content to their Google+ page. The only difference between this link and the +1 button is that it appears as a link rather than a button, similar to the way a 'Tweet This' link works for Twitter. The benefit of using this is to enable visitors to share a specific piece of content within a larger piece of content, as exemplified in this blog post.

How to Implement It: To create a Google+ share link, replace the red highlighted URL with the URL you want people to share. Then hyperlink your desired anchor text using the full link.

https://plusone.google.com/_/+1/confirm?hl=en&url=http%3A%2F%2F%20http://bit.ly/vOKpgC

When a visitor clicks the link, they will have automatically +1'ed the content. In addition, like the +1 button, they will have the opportunity to click "Add a comment" to customize a message and share the content with their Google+ connections. Here's an example of how a Google+ share link works: Post to Google+!

Are you leveraging the awesome power of social media buttons on your website and in your content?

Image Credit: Carlos Maya

intro-to-facebook

Search the Blog

Subscribe by Email

Subscribe by RSS

Follow HubSpot