• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Social Media Examiner

Your Guide to the Marketing Jungle

  • 🔥 Free Newsletter
  • 🎙️ Podcasts
    • Social Media Marketing Podcast
    • AI Explored Podcast
    • Social Media Marketing Talk Show
    • Our YouTube Channel
  • 🌟 AI Society
  • 🗓️ Marketing Conference
  • đź‘‹ About Us
    • Marketing Events
  • Search
  • Embrace AI & MarketingGet Ongoing Training & SupportBEGIN YOUR JOURNEY NOW

    How to Customize Your Social Share Buttons for Increased Traffic

    by Angie Pascale / December 18, 2013

    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.

    AI Business Society

    Ready to Unlock AI Marketing Breakthroughs?

    If you’re like most of us, you are trying to figure out how to use AI in your marketing. Here's the solution: The AI Business Society—a new AI marketing community from your friends at Social Media Examiner.

    The AI Business Society is the place to discover how to apply AI in your work. When you join, you'll boost your productivity, unlock your creativity, and make connections with other marketers on a similar journey.

    I'M READY TO BECOME AN AI-POWERED MARKETER

    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:

    • Schema.org
    • Open Graph Protocol
    • Title and meta description
    • Google’s best guess from page content

    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.

    Discover Proven Marketing Strategies and Tips

    Want to go even deeper with your marketing? Check out the Social Media Marketing Podcast! Publishing weekly since 2012, the Social Media Marketing Podcast helps you navigate the constantly changing marketing jungle, with expert interviews from marketing pros.

    But don’t let the name fool you. This show is about a lot more than just social media marketing. With over 600 episodes and millions of downloads each year, this show has been a trusted source for marketers for well over a decade.

    CHECK OUT THE SOCIAL MEDIA MARKETING PODCAST NOW

    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 protected]?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.

    AI EXPLORED

    Curious About How to Use AI?

    Our newest show, AI Explored, might be just what you're looking for. It's for marketers, creators, and entrepreneurs who want to understand how to use AI in their business.

    It's hosted by Michael Stelzner and explores this exciting new frontier in easy-to-understand terms.

    Pull up your favorite podcast app and search for AI Explored. Or click the button below for more information.

    I WANT TO LEARN MORE ABOUT AI

    Tags: Social Media Tools

    About the authorAngie 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 Angie Pascale »

    Get Social Media Examiner’s Future Articles in Your Inbox!

    Get our latest articles delivered to your email inbox and get the FREE Social Media Marketing Industry Report (43 pages, 60+ charts)!

    Industry Report Cover

    Worth Exploring:

    Facebook

    Marketing Help Explore More →

    Instagram

    Marketing Help Explore More →

    YouTube

    Marketing Help Explore More →

    Linkedin

    Marketing Help Explore More →

    AI

    Next Frontier Explore More →

    Social Media Marketing Industry Report

    Get Free Report →

    Social Marketing Trends

    The data you've been missing!

    Need a new plan? Discover how marketers plan to change their social activities in the 16th annual Social Media Marketing Industry Report. It reveals what marketers have planned for their social activities, content marketing, and more! Get this free report now and never miss another great article from us. Join more than 385,000 marketers!

    Simply click the button below to get the free report:

    Footer

    Your Guide to the Marketing Jungle
    Copyright © 2025 Social Media Examiner®
    All Rights Reserved. Terms of Use | Privacy Policy.

    Helpful Links

    • About us
    • Our content via email
    • Our podcasts
    • Our YouTube channel
    • Our live show
    • Our social media marketing industry report
    • Our generative AI marketing industry report
    • Sponsorship opportunities
    • RSS