Creating Inline “Tweet This” Quotes in Squarespace

If you want to expand your reach beyond your current audience, social media is a must. Having your users spread your content on Twitter exposes it to a completely new set of people on every share.

But how do you get your users to tweet?

@@The simplest way to get users to share your content on Twitter is to give them the ability to do so. @@

See what we did there? Tweeting an inline quote is one of the best ways to give people different options of what to share with their friends from your article. It takes the busy work out of tweeting without constricting everyone to the same tweet.

To accomplish this, the first thing you want to do is head to Settings → Advanced → Code Injection. Once on the Code Injection menu, paste the following code into the textbox titled Header:

JS
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

Next, head to the Blog (or regular page) that you want this to work on. Click the Settings gear and then head to the Advanced tab. Copy and paste the code below into your Page Header Code Injection. Important: Next to the username variable, where it says YOURHANDLEHERE, enter your twitter handle without the @ sign.

WE REPEAT:
enter

your twitter handle

without the @ sign!!

!!

Carry on.

Code
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <script type="text/javascript" async src="//platform.twitter.com/widgets.js"></script>
  <script>
    $(function() {
      var replaced = $("body").html().replace(/\@@(.*?)\@@/g, function(found) {
        var tweet = found.substr(0, found.length - 2).substr(2);
        var username = 'YOURHANDLEHERE';
        return '<a class="tweetLink" target="_blank" href="https://twitter.com/intent/tweet?text=' + tweet + '&url=' + window.location.href + '&via=' + username + '"><span class="tweetLine">' + tweet + '</span><i class="fa fa-twitter-square tweetSquare"></i></a>';
      });
      $('.tweetLine').css('color', $('p').css('color'));
      $("body").html(replaced);
    });
  </script>

Next, we need to add some custom CSS to that our tweets look nice! From the main menu, head to Design → Custom CSS and enter the following code:

CSS.tweetLink {
    cursor: pointer;
    .tweetLine {
      border-bottom: 1px dotted rgba(64, 153, 255, 0.6);
      color: inherit;
    }
    .tweetLine, .tweetSquare {
      -moz-transition: color 0.3s;
      -o-transition: color 0.3s;
      -webkit-transition: color 0.3s;
      transition: color 0.3s;
    }
    .tweetSquare {
      font-size: 140%;
      vertical-align: top;
      margin-left: 8px;
      color: #D0D5D8;
      outline: 0;
    }
    &:hover {
      .tweetLine, .tweetSquare {
        color: #4099ff !important;
      }
    }
  }

The last step is to create the actual tweet in your post. While typing, simply surround the part of your post that you want to share with two @ signs. We can’t do it here or else it will make a tweet link, but below is a picture of how it should look:

Tweets can only go for 140 characters, so keep that in mind when choosing what to select. Feel free to comment below and enjoy!

…Oh, and why not share? ☞ @@Tweeting inline quotes are now possible in Squarespace!. @@