How to Customize Your Social Share Buttons for Increased Traffic

social media how toAre you happy with how social share buttons work on your website?

Do they auto-populate with information that makes your brand look good on social networks?

To maximize the benefits of social sharing on your website, you need to make sure  your social share buttons contain customized messaging that’s easy for your readers to use and benefits your brand.

In this article, I’ll focus on how to optimize the top social share buttons for your website.

What’s an Optimized Share Button?

An optimized share button automatically generates a sharable message with custom information for your brand.

Here’s an example of a social share button tweet that’s not optimized with custom information.

non-custom-tweet

Here’s an example of a tweet that has not been customized.

While the product ID number shows in the URL, the tweet is missing the brand’s Twitter handle and hashtags. Including these items would help the brand increase followers, reach and engagement.

Here’s an example of a social share button tweet that’s optimized to auto-populate with the brand’s Twitter handle.

custom-tweet

This tweet has been customized to display the product name and color number within the URL, and includes the brand’s Twitter handle.

Notice the additional information included thanks to the customized URL in the tweet above.

Customized share buttons let your readers share useful information and help you control brand messaging at the same time.

Installing Social Share Buttons

Each social channel handles share buttons differently and allows for various levels of customization. All channels offer options for look and feel, size, share count, connection annotations and what metadata is automatically pulled through the widget.

Below, I cover share buttons for Twitter, LinkedIn, Google+, Pinterest, Facebook and email.

I’ll explain which buttons let you add your username or include hashtags; how URLs, images and page summaries are rendered; and how to best install and customize each button.

If you have a basic familiarity with HTML, the buttons are relatively easy to install. You can also send this to the person who does your technical web support.

#1: Twitter Share Button

Have you ever wanted to retweet something from someone you wanted to network with, but couldn’t find his or her Twitter handle in the automated tweet? Did you look for a Twitter handle to include in the retweet? Or did you abandon your networking endeavors?

In the example below, the Tweet button on ModCloth’s blog automatically pulls through the blog title, a custom shortened URL and their Twitter handle.

mod-cloth-tweet-button

This is an example of a tweet from a customized Tweet button.

mod-cloth-tweet-live

Here’s how the message looks when tweeted.

Here’s how you can customize the Twitter Share button:

Step 1: Go to Twitter Buttons and select the “Share a link” button you like best.

Complete the form fields in Options and make sure to include your Twitter username in the Via and/or Recommend section.

Select “Use the page URL” for share URL and “Use the title of the page” for tweet text.

custom-twitter-share-button

Customize your Twitter Share button with your Twitter handle and any relevant hashtags.

Step 2: Click the Tweet button to preview how your tweets will display.

twitter-share-button-preview

Preview the auto-populated message to see how it looks with your customizations.

Step 3: When you’re satisfied with how the tweet looks, copy and paste the code into the HTML for your site in the location you’d like the button to display.

Save the change to your site and you have a customized Tweet button.

#2: Google +1 Button

The Google +1 button attributes include the page title, URL, image and recommendations.

simple-google-plus-button

Simple’s Google +1 buttons automatically pull through article titles and images.

You can also select from advanced options, including how the +1 button loads, to better fit the needs of your website. For example, select Asynchronous JavaScript loading to improve page load time by allowing the browser to load the page and the +1 button code at the same time.

Google+ pulls information to auto-populate in one of four ways, in this order:

To ensure the best rendering of the share message and create the most eye-catching message, I recommend you implement both Schema and Open Graph on your site.

Visit the Google Developers page and follow the instructions below to customize your Google+ button.

Step 1: Select the desired button size, annotation format (meaning where the share count displays) and width.

google-plus-button-customization

Customize the size and format of your Google +1 button.

Step 2: Select the appropriate advanced options.

simple-google-plus-button-advanced-options

Advanced Google +1 button options allow you to choose how the button loads on the page, impacting render time.

Step 3: Now that you’ve formatted your button, click “Want to customize your snippet?” below the preview and code to customize the share message.

google-plus-button-snippet-customization

Here’s where you can customize the message that is auto-populated for the Google +1 button.

Step 4: Copy the snippet code and the button code from step 2, and paste them where you want the button to appear.

google-plus-button-code

Preview the share button and copy your code here.

Just like that, you have an optimized Google+ button on your site.

#3: LinkedIn Share Button

LinkedIn’s Share button is more basic than those for other social media networks. And it isn’t for every brand, but should be included if you deliver B2B content.

The LinkedIn Share button not only pulls through your title, description and image from the page, it also lets users edit the post.

linkedin-open-forum-share-button

The target audience for American Express’s Open Forum blog is entrepreneurs and SMB owners; therefore, it makes sense that LinkedIn is the first button in their share options.

To install the LinkedIn Share button, visit the LinkedIn Share Button generator and follow instructions below.

Step 1: Leave the URL to be shared blank and it will default to pulling the current page. Select how you want the share count to display.

linkedin-open-forum-share-button-customization

Select your preferred format for the LinkedIn Share button.

Step 2: Preview your button. If you’re satisfied, click “Get Code,” then copy and paste it where you want the button to display.

linkedin-open-forum-share-button-code

Copy the code generated for your LinkedIn Share button.

That’s it! Your optimized LinkedIn Share button is ready to go to work.

#4: Pinterest Pin It Button

Because Pinterest is image-based, the Pin It button only works on pages that include an image.

The Pin It button ignores any background images in your CSS and pulls any content within <img> tags that are at least 80×80 pixels.

If your page has multiple images, they are listed in the order in which they are specified in the HTML file.

fab-pin-it-button

Fab.com coded their Pin It buttons to automatically show their brand name in the pin description.

Pin It buttons require a bit more advanced coding than other sharing buttons. Don’t be afraid to check with your web developer to make sure you’re using the correct URL, image and description. When you’re ready to build your button, visit the Pinterest Widget builder to get started.

#5: Facebook Share Button

Facebook offers two types of buttons: Facebook Like and Facebook Share. Both buttons allow users to share your content on Facebook and create a story on their news feed. The difference is in how the news feed stories display and how much control the user has in crafting that story.

While both buttons allow users to add a comment and tag friends, the Facebook Like button doesn’t allow them to edit the headline, description or thumbnail image.

facebook-like-button

Here’s a Facebook Like button dialog box. Note that you’re unable to choose the thumbnail image or edit the title or description.

The Facebook Share button lets users make these changes. That means more exposure and engagement for you because the reader can personalize the post for their audience.

facebook-share-button

In this image you can see how the Facebook Share button allows the user to edit the description (highlighted in blue).

For this reason, I recommend you create a customized Facebook Share button for your website.

Follow these step-by-step instructions to add Facebook Share buttons to your site:

Step 1: Leave the URL field blank, as this will default to sharing the page that the button lives on. Enter the width that makes sense for your page design.

Then choose from six different layouts that combine different designs and share count displays. I recommend you use a version with share count to increase sharing—if readers see that others have shared something, they’re more likely to share it themselves.

facebook-share-button-customization

Customize and preview the Facebook Share button.

facebook-share-button-layout-options

Choose from six different layout options for the Facebook Share button.

Step 2: Click “Get Code” and choose between HTML5 and XFBML (iFrame and URL do not work with the Share button).

facebook-share-button-html5-code

Copy the code that Facebook generates for your Share button.

Step 3: Copy and paste the code where you want the button to appear on the page.

Step 4: Include the proper Open Graph (OG) tags in your page to allow for more appealing share messages. The basic OG tags to use are title, site_name, URL, description, image and app_id (this tells Facebook what the site is and allows Insights to work).

An OG tag for a page title looks like this:

<meta property=“og:title” content=“This is the Title of the Page”/>

Depending on your business’s industry and the type of content being shared, you can also include other OG tags like media type (this defaults to the website if no media type is specified), locale, author and publisher. It may seem complicated, but know that OG is just meta-tags and your web developer should be familiar with them. Learn more about Facebook Open Graph.

Once the code is copied and saved to your site, the Facebook Share button is installed.

#6: Email This Button

True, email is not considered a social media network. However, according to research by The Atlantic, emails, instant messages and other “dark social” channels account for 69% of the sharing that occurs online.

These objects are considered “dark social” because they’re untrackable through Google Analytics as people typically copy and paste a direct link, which shows as direct traffic in analytics.

Email buttons differ based on whether you’re using HTML, CSS or another programming language. Regardless of which language was used to build your site, make sure the title pulls through as the email subject line, and the URL renders correctly in the body copy so that the recipient can easily click on the link to visit the source from any email platform and device.

Work on your own or with a designer to develop a button that matches the look and feel of your site. Then add this code, which will open up the user’s default email client and create a new message:

<a href=“mailto:email@domain.com?subject=page title”>email button</a>

How to Measure and Enhance Performance

Google Analytics shows activity on these buttons within the Social Plugins section. You can also use Event Tracking to see how many users click on each social share button.

Keep an eye on the volume of shares for each button.

If you find that one button isn’t generating any shares, your audience simply may not use that social media channel. Consider removing the button to make room for others that perform well.

Conclusion

Facebook, Twitter, Google+, LinkedIn and Pinterest are arguably the top 5 social networks today. While you should make it easy for your readers to share your content on these networks, you should also make it a priority to control how your content looks when it’s shared.

Take advantage of the custom attributes each platform’s share button provides to help ensure that your brand messaging stays intact when your content is shared.

What do you think? How do you use social sharing on your site? Which buttons have you seen the most success with? Share your experiences in the comments below.

Tags: , , , , , , , , ,

About the Author, Angie Pascale

Angie Pascale is the social media director at Location3 Media, providing strategic direction for social media and content marketing campaigns for enterprise and multiunit retail clients. Connect on Google+. Other posts by »




More Info
  • http://www.muddywall.com/ Muddywall

    Thanks for sharing the helpful advice, Customizing social share buttons is often overlooked but can make a huge difference to a brand’s visibility on social media.

  • http://www.adspringr.com/ Adspringr

    Excellent, excellent advice. What I would like to add here is that not only will these help you display rich snippets but your site also excels when it comes to semantic search when it comes to search engines.

    Moreover if you have optimized your website well, then it is an advantage when you are ranking in social results.

    The part about having automatic titles for email sharing is a very pertinent point. The lesser work you create for a user, the better it is.

  • http://navneetsau.com/ NavNeet Sau

    Great resources to create custom social sharing buttons to place on
    blog. I would love to try these button because social sharing plugins
    doesn’t work properly. I have tried getsocial and then installed flare, but don’t
    know why sharing count doesn’t increase even my content got share on twitter, Google+ and pinteres. Do you know what point I am
    missing?

  • http://www.expertsem.com/ Angie Pascale

    Glad you enjoyed it, @muddywall:disqus! Thanks for reading!

  • http://www.expertsem.com/ Angie Pascale

    Thanks, @Adspringr! Great point about helping with semantic search. Social and SEO are one and the same now, and it’s important to understand how they integrate and impact each other.

  • http://www.expertsem.com/ Angie Pascale

    Thanks, @navneetsau:disqus. I don’t have personal experience with either of the plugins you mentioned, so I’m not sure what the issue is with those specific ones. But I have used AddThis and ShareThis, and have had found them to be mostly accurate with share count. Have you tried either of those two?

  • http://jameshalloran.net/ James R. Halloran

    Thanks for this instructive piece, Angie! It’s important for brands to know how to utilize such buttons, especially since social proof creates such an attractive draw to your content. When someone sees several hundreds or thousands of people shared your content, they’re also more compelled to see your content.

  • http://www.expertsem.com/ Angie Pascale

    Exactly, @jamesrhalloran:disqus! High share numbers validate the importance of that content for others.Thanks for reading!

  • http://blog.digitalinsights.in/ Omkar Mishra

    Thanks for the advice..Really Helpful

  • AmandahBlackwell

    Thanks for this great post on social share buttons. I use a WordPress social share plugin that works good. But I’m glad I know how to customize sharing buttons.

  • http://www.expertsem.com/ Angie Pascale

    Glad you found it useful, @csharpdflat:disqus. Thanks for reading!

  • http://www.expertsem.com/ Angie Pascale

    The WordPress plugin is great, too. Especially if you’re not a dev whiz.

  • Pingback: Marketing Day: December 18, 2013

  • Brent Applegate

    WOW! So great to have all these details in one place! I had just been thinking and wondering how this was done. Thanks for sharing the secrets!

  • http://increaseyoursocialreach.com/ Sofia

    Hi Angie I find this post really informative but how is it different from using AddThis. I have used AddThis for a client before and I find that you can add up to 10 share/follow buttons and you will get all the analytical data for reporting purposes. Would you recommend AddThis or would you say that doing them individually and customising is best?
    Thanks for the input. Sofia

  • http://makethemclick.com.au/library Mark @ Make Them Click

    Great article except that there are problems with G+ at the moment. Firstly, it doesn’t use meta descriptions of any kind. It used to but not anymore. Secondly it doesn’t use Open Graph data at all or even play nice with it. Again, it used to but not now.

    There also seems to be conflict if you use both schema and OG together.

    At present Google is just using the title of your page and the link, you can’t specify anything else regardless of what you put in the meta data.

    For the past year or more there was no problem, now suddenly there is and many people are reporting issues with G+ not sharing their shares properly if at all.

    It may be an implementation issue where Google has made some tweak that’s stuffed many people around.

  • http://www.expertsem.com/ Angie Pascale

    Hi, Sofia, AddThis can be a great option, but customizing the autopopulated message can be a little more complicated and will require more advanced development knowledge. AddThis does provided analytics data, but can also be challenging when trying to incorporate into Google Analytics. So it really depends on what you need it for.

    If using AddThis (or ShareThis or other plugins), I would recommend selecting only the top social networks though. This streamlines users to only those channels, allowing for better tracking and monitoring. Also, it helps to alleviate the paralysis that comes with having too many options.

    AddThis is neat in that it can dynamically suggest the social network most used by each reader, so it creates a really personalized experience for them.

  • http://www.expertsem.com/ Angie Pascale

    Thanks, @BrentApplegate:disqus. I wouldn’t call them secrets, but finding the info does take a little digging sometimes. Glad you like the article!

  • deb1221

    Really informative piece, Angie!

  • http://increaseyoursocialreach.com/ Sofia

    Thanks for your feedback Angie. I will probably run some testing with both systems to see which one is more efficient. Only by testing we can truly know what works, right?

  • http://www.EntrepreneurOnFire.com/ John Lee Dumas

    The power of using social share buttons is strong, and it’s great that we
    can control and take advantage of these features. Thanks for including
    all of these useful tips on how we can make it even more convenient for
    people to share, and how it can increase networking and engagement.
    Great post Angie!

  • Nicole Parisi

    ok

  • Abdul Rehman

    WOW,I did not knew that sharing buttons can be customized this way.Thanks Angie for this great tutorial

  • Tejas

    Why dont twitter reads the twitter cards or og tag?

  • http://www.expertsem.com/ Angie Pascale

    Thanks for clarifying some of those changes, @Mark_Make_Them_Click:disqus! It’s safe to say that nothing in social is static, and the networks are constantly making changes and piloting new features and functionality. That’s the exciting (and sometimes frustrating) thing about this industry. But that’s what keeps us all interested, right? Thanks for reading!

  • http://www.expertsem.com/ Angie Pascale

    Tejas, Twitter does read the cards if that code is implemented.

  • http://navneetsau.com/ NavNeet Sau

    No, I did not used them anymore :P

  • http://www.expertsem.com/ Angie Pascale

    Glad you enjoyed it, @disqus_Hxlx1xihtu:disqus!

  • http://www.expertsem.com/ Angie Pascale

    Thanks, @JohnLeeDumas:disqus! Couldn’t agree more.

  • http://www.expertsem.com/ Angie Pascale

    Thanks, @deb1221:disqus! Hope you find it useful and thanks for reading!

  • http://www.expertsem.com/ Angie Pascale

    Absolutely! I’d be interested in hearing how the tests go. Please keep in touch and share some findings.

  • http://blog.wishpond.com/ Krista Bunskoek

    Thanks for the detailed steps on customizing share buttons, Angie. You certainly know your stuff! It is important for brands to not only get their content shared, but to get it shared in the best way for their particular objectives.

    I sure wish the Pin It buttons were easier to code. Do you (or anyone here) have suggestions on how to simplify this process?

  • Lenzie O. Winstead

    Thank you for sharing all this good content we new at this social networking it so much to make a buck.Learning: This is a lifelong, never-ending commitment

  • http://www.rockandchairs.com/ Ashish Awasthi

    Hi Angie ,Thanks for sharing valuable advice…

  • http://MauiOwnerCondos.com/ Matt Pauli

    Thanks for the information on customizing the sharing icons @angiepascale:disqus! I would assume too that using the code directly from the source (vs. Addthis, sharethis, etc) should also help with your page load speed – or rather it would not slow it down as you never know how much the plugins are dragging down speed.

  • http://www.expertsem.com/ Angie Pascale

    Thanks, @kristabunskoek:disqus! What issues are you having specifically with PinIt buttons?

  • http://www.expertsem.com/ Angie Pascale

    You’re welcome, @lenzieowinstead:disqus! Thanks for reading!

  • http://www.expertsem.com/ Angie Pascale

    You’re welcome, @Ashish! Glad you found it useful.

  • Adrian Rizaldi

    thanks for sharing bro

  • http://www.muschamp.ca/ Muskie

    Dude, you gotta learn how to use structured meta data, particularly product schema, opengraph, Twitter Card, and Rich Pin.

  • http://www.taylorclark.co/ Taylor Clark

    Would love a wordpress plugin to make this easier

  • http://www.jamericanspice.com/search/label/Blog%20Campaign%20and%20Social%20Media Colette S

    This was very helpful! Especially with the facebook share links. I kept trying for almost two weeks now to get the new ones to work but couldn’t! Thank you!

  • http://www.praverb.net/ Praverb

    This is an amazing post Angie. I have a question regarding the Twitter button. How do I get rid of the “About” part in Twitter | About? Thank you for sharing this vital information with us.

  • http://www.praverb.net/ Praverb

    Quick question Angie, do you know why some of the people you mention show up (clickable mention) and the others do not?

  • http://www.expertsem.com/ Angie Pascale

    Hi, Patrick, Can you provide a bit more info? I think that may be something that is pulled from the meta data on your page, but want to make sure I understand what the issue is.

  • http://www.praverb.net/ Praverb

    I figured it out Angie thank you…

  • Kalisha

    Thanks for the info :)

  • Nick

    hi…. i can’t see the pictures in this post… is there any reason?

  • ad

    thanks for this, but the images seem to be missing above

    maybe a link is broken somewhere? Any chance of getting it back?

    Thanks so much

  • http://cindyking.biz/ Cindy King

    Thanks for letting us know, Nick. We’ll get this fixed shortly.

  • http://cindyking.biz/ Cindy King

    We’re working on it now. The images will be back soon.

  • Andrew

    Hi, Can you tell me a free wordpress plugin that will help me get those floating social sharing buttons on my blog?

  • http://www.sharanyan.com Sharanyan Sharma

    Excellent Tips :)

  • http://www.meattle.com/jay/ Jay Meattle

    Hi Andrew, Shareaholic offers one – http://wordpress.org/plugins/shareaholic/

  • Guest

    Thanks.

  • Andrew

    Thanks.

  • http://mamaandthecity.blogspot.com/ Mama and the City

    Hi Angie, at the moment I’m using this WP social share buttons, but I’m having issues implementing the change for Twitter. I use Genesis theme, and if I paste the html code by Twitter under the header or footer area, it doesn’t apply the change to the twitter button on the social media.

    I tried adding it at the post level, and it adds the working button at the end of the post, but then I end up having two twitter buttons.

    Do you have more info as to where exactly I would need to paste this code or do I have to do it every single time I write a post?

    Thank you
    Nadia

  • Andrew

    Hey, can you tell me how I disable shareaholic floating buttons on specific pages? Thanks.

  • Deanna Samaan

    I like this idea, especially the twitter one, I currently use sharethis. I can not figure how to add these inside my posts. I am on blogger.

  • Valay Patel

    Awsm…. Thanks for sharing this…

  • mem

    What if I wish to have several buttons on a single page. How can I do that?







Check out the Social Media Marketing Podcast!
Join our Social Media Marketing Networking Club
Download the free Social Media Marketing Industry Report