Squarespace + Twitter Share Button (via text) Updated

Please Note: a few weeks after posting this blog post, Squarespace made an update that broke my original code. I went back and made some changes so that the code works once again.

I had a client of mine ask me to find a way to add their Twitter handle to the Twitter share text.

The Twitter button that Squarespace uses is very basic and does not include any special parameters. So I was able to find a work around but it's a bit of a hack until Squarespace releases better options for this feature. Basically, you will need to use some jQuery to inject a new Twitter button and suppress (hide) the old one with some CSS.

 

The result

This code will now format the Twitter share text as {page title} {URL} {via @twitterhandle}. You can see this in action on my site or a client site of mine: virginiaingram.com/thoughts.

squarespace-plus-twitter-share-button-via-text

 

Where to start

All of the following code you can place under the Page Settings > Advanced for Blogs in the Page Header Code Injection area.

Please note: This has only been tested on the Bedford template, but should work on most other templates. Also, you will still need to have your Squarespace account connected to your Twitter account for this to work.

 

Step 1

This will hide the old Twitter button by using CSS.

<style>
  .ss-social-button-container.twitter {
    display: none !important;
  }
</style>

 

Step 2

Add jQuery if you didn't have it added already.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

 

Step 3

Use jQuery to add the new Twitter button. Note: You will need to replace devonstank with your Twitter handle at the bottom of the code.

Please Note: the reason I had to rewrite my code (that was actually straight forward) was due to a very odd issue. It seems that Squarespace is not loading the element I was selecting on the page for about a second or two. So the quick way around this was to have it check for this element every 0.5 seconds until the element was found. Additionally, I also have it stop trying after five attempts, which works out to 2.5 seconds as coded.
<script type="text/javascript"> 
  /* ---------------------------------------------------------------------------------
  * Replaces twitter button
  * @constructor
  * @param {string} twitterHandle - Handle of the twitter account you want to bind
  * @param {number} retry - The number of attempts this function has remaining to update run
  * @param {number} delay - Time in milliseconds to wait before trying again
  --------------------------------------------------------------------------------- */
  function replaceTwitter(twitterHandle, retry, delay) {
    var $element = $( ".ss-social-button-list" );
    if($element.length > 0) {
      $element.append( '<div class="ss-social-button-container custom-twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-via="' + twitterHandle + '" data-related="' + twitterHandle + '">Tweet</a>' );
    } else if (retry > 0) {
      retry -= 1;
      return setTimeout(function() {
        replaceTwitter(twitterHandle, retry, delay);
      }, delay);
    }
  }

  $( document ).ready(function() {
    replaceTwitter('devonstank', 5, 500);
  });
</script>

 

final code

Note: You will need to replace devonstank with your Twitter handle at the bottom of the code.

If you have any thoughts/suggestions on the code rewrite, please feel free to post in the comments below.
<style type="text/css">
  .ss-social-button-container.twitter {
    display: none !important;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript"> 
  /* ---------------------------------------------------------------------------------
  * Replaces twitter button
  * @constructor
  * @param {string} twitterHandle - Handle of the twitter account you want to bind
  * @param {number} retry - The number of attempts this function has remaining to update run
  * @param {number} delay - Time in milliseconds to wait before trying again
  --------------------------------------------------------------------------------- */
  function replaceTwitter(twitterHandle, retry, delay) {
    var $element = $( ".ss-social-button-list" );
    if($element.length > 0) {
      $element.append( '<div class="ss-social-button-container custom-twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-via="' + twitterHandle + '" data-related="' + twitterHandle + '">Tweet</a>' );
    } else if (retry > 0) {
      retry -= 1;
      return setTimeout(function() {
        replaceTwitter(twitterHandle, retry, delay);
      }, delay);
    }
  }

  $( document ).ready(function() {
    replaceTwitter('devonstank', 5, 500);
  });
</script>

 

Final thoughts

I hope this code helps you although I need to stress that this is not a perfect solution, but gets the job done. Hopefully soon Squarepsace will add some better options to the Twitter section to allow you to do this without the needed code of mine. If you have any issues getting this to work or have a better suggestion then please leave a comment below.

 

Credit: Thanks for helping with the rewrite, Matt Wurzberger.