Share Buttons - Customize @Twitter handle, URL Shortener, #Hashtag

Overview

With Shareaholic, you can customize what gets shared when people share to Twitter. To optimize your Twitter shares, you can customize your Twitter Template and setup Twitter Cards.

You can customize your Twitter Template to include your @Twitter handle, URL shortener, hashtags, etc.

Including your Twitter handle in your site's social shares can help you gain followers and brand recognition whenever users Tweet links to your content – a passive and easy way to build your audience!

You can also add Suggested Twitter accounts to appear in the "Who to Follow" list after a user shares your content! You can read more about this feature here.

How to customize your Twitter Template

${title}, ${link}, ${short_link}, ${description}, ${notes} and ${source} placeholder variables are available for the Twitter template. These will be dynamically substituted with the actual values. All template variables are optional. You can also use ${meta:____} placeholder variables to substitute from your page's meta tags, for example ${meta:og:title}.

Code-less method - in the Admin UI, head over to Site Profile -> Settings -> Sharing -> Sharing Settings

1. Login to your Shareaholic account and select a Site Profile.
2. Click the Settings link on the left side of the page.
   
3. Select the Sharing tab.
   
4. Edit the text in the Tweet Template section to customize the default message that appears when someone tweets a page from your site.
5. Select your preferred URL Shortener from the dropdown menu.
6. Click Save Changes.

Code method - 

<div class="shareaholic-canvas"
      data-app="share_buttons"
      data-app-id-name="post_below_content"
      data-app-config='{
        "templates":{
           "twitter":{
             "body":"${title} - ${short_link}",
             "related":"nike,adidas"
      }}}'>
 </div>

To apply globally:

_SHR_SETTINGS_CUSTOM = {
  config: {
     apps: {
      share_buttons: {
        templates: {
          twitter: {
            body: "${title} - ${short_link}",
            related: "nike,adidas"
          },
        },
      },
    },
  },
};

If both code and codeless methods are set, code method will take priority.

Tip: After a user Tweets, Twitter usually suggests "Who to follow." You can have a specific account suggested by specifying the account in the related parameter. Twitter will then suggest that account (if not already followed by the user). Up to two accounts can be suggested.

Example code for "Tweet Quote" link:

HTML:

<blockquote>
   <p id="pull-quote">"Recliner Chair Market: Global Market Size, Forecast, Insights, and Competitive Landscape"</p>
   <a data-app="share_buttons" data-app-config='{"service":"twitter", "templates":{"twitter":{"body":"Recliner Chair Market: Global Market Size, Forecast, Insights, and Competitive Landscape ${link}"}}}' id="tweet-pull-quote">Tweet this</a>
</blockquote>

CSS:

blockquote {
  font: normal 1.2857em/1.1667em "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: #7aa52a;
  position: relative;
  top: -.0833em;
  margin: 5px 15px 15px 0;
}
a#tweet-pull-quote {
  background: url('https://abs.twimg.com/errors/logo23x19.png') no-repeat -1px center;
  float: left;
  font-size: 16px;
  margin: 10px 0;
  padding: 3px 3px 3px 28px;
  border: none;
  outline: medium none !important;
  cursor: pointer;
  text-decoration: none;
  color: #499ed6;
}