Social 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
What 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
What 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
What 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
Facebook 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
What 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
What 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
What 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
What 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.
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
What 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
What 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
Denis Johnston 9:30 AM on December 07, 2011
Denis Johnston says
With web based platforms it is must to be able to provide social media & link buttons without the confusion of needing a comprehensive guide to help you understand the differences between the share and follow buttons. Way cool tool...
Richard Masters 9:51 AM on December 07, 2011
really useful summary thank you
Drewry 10:14 AM on December 07, 2011
hello,
I noticed on someone's website they have a specific code added into it, whereas ppl have to click the "Facebook like" button, before site visitors can see the "website content". Do you know what website I can go to that has that specific code, so i can add it to mine, and I can increase "Facebook traffic", by ppl liking more of my content?
Thanks kindly for your help =)
Kara 10:39 AM on December 07, 2011
Drewry, You are looking for a "like gate". There are many apps that can do it. If you're not afraid of a bit of code, you can try StaticHTML, which seems to be a popular option. ShortStack is my personal favorite, and it is free for pages up to 2k fans, and comes with many other cool tools.
Frank Qiu 10:42 AM on December 07, 2011
Or you can simply pretend to have a gate and lead the visitors to the welcome page. That does not turn visitors away by setting up another burden. Just a tradeoff.
Drewry 10:50 AM on December 07, 2011
@ Kara...
Thanks so much, for pointing me in the right direction. I love "code" and more than happy to insert the code into my site. I think by ppl liking my site content more, it'll not only help me get more Facebook fans, but increase Facebook traffic too. Thanks again and please let me know how I may be of service in the future, if you need anything =)
Filip 12:40 PM on December 07, 2011
"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."
I dissagree. There is a difference between the iframe like button and the XFBML version. The second one gives users the possibility to add a personal message.
Source: third paragraph on http://developers.facebook.com/docs/reference/plugins/like/
Patricio 4:37 PM on December 07, 2011
Hello,
Thanks for the info. I want to put the Facebook Like Button on all my website´s pages. I was wondering if I should use the home page url on all of them, or customize each individual button with the url where I´m placing the button on. Does anyone know any best practice for doing this? Thanks!
url 6:55 AM on December 08, 2011
Thanks for sharing your views
Hilary Brooks 8:06 PM on December 08, 2011
Drewry, if your website is done with WordPress, another less intrusive way of increasing your likes is through a premium plugin on Code Canyon, called Facebook Like to Download (http://codecanyon.net/item/facebook-like-to-download-for-wordpress/930859?WT). It's similar in concept to offering a freebie for when people sign up to your list, but instead takes a potentially more viral approach by connecting the download to a Facebook "like". If not a WordPress site, they also have a script called Transact Socially (codecanyon.net/item/transact-socially-sell-the-easy-way/599461?WT) where you can 'pay' for the download via tweet or 'like'. Hope some of you may find this helpful!
Derick Van Ness 11:32 AM on December 11, 2011
Great guide as always. Thanks for simplifying and sorting how to use each button!
ramon into ratera 3:28 PM on December 11, 2011
Thanks Hubspot, once again your useful clears and actual articles
Danielle Raver 3:23 PM on December 28, 2011
This article didn't explain exactly how to create a "Tweet This" button (unless I missed it). I played around today and create a blog post to explain how I did it!
http://danielleraverauthor.blogspot.com/2011/12/trying-out-tweet-this-button.html