Big Picture Web

View Original

The Squarespace Twitter / Facebook Button Tutorial Post

Josh Braaten

Squarespace's new Twitter and Facebook featuresMost people that have been to Big Picture Web in the past know that I'm a Squarespace blogger. I enjoy their beautiful design interface, thoughtful technical decisions and their ever-growing momentum as a software-as-a-service (SaaS) web publishing platform. This week they announced a series of updates, including the integration of HTML snippets. Today's post shows how easy it is to integrate your online Twitter, Squarespace and Facebook efforts using one of Squarespace's awesome new features.

If Squarespace's big $38.5M VC deal with Index Ventures and Accel Partners somehow failed to grab your attention last month, perhaps features from their one-two combo update this week to their iPhone and blogging platform will persuade you to check them out:

  • HTML snippets that allow bloggers to add features to Squarespace like Twitter's Tweet and Facebook's Like buttons to their blogs
  • An iPhone update that enables a smoother cross-platform blogging experience. The fluid comment moderation interface alone (with push notifications!) is pretty remarkable.
  • Now you can subscribe to comments, facilitating more thorough community engagement between visitors of your blog (Thank you, @Markb and @Squaregirl if you had something to do with this!)
  • A stats page redesign that is shiny, but still probably nothing more than eye candy to those with a web analytics tool like Google Analytics

What are HTML Snippets?

Squarespace allows for up to three HTML snippets in your blog header or footer. An HTML snippet is simply a small chunk of (usually) HTML and/or JavaScript that enable enhanced functionality (e.g., the Like button) within a blog or website. Squarespace's new HTML snippets are a way to easily add features like the Twitter Tweet and Facebook Like buttons across all your blog posts from one spot in the in admin interface. Follow the steps listed in the sections below to add the Facebook Like and Twitter Tweet buttons to your Squarespace blog.

(Now, before you decide that a post including HTML is not for you, realize that what follows requires, for the most part, only basic copy/paste skills. And it's pretty harmless. Also, while I describe the specific methods for adding Twitter and Facebook buttons to Squarespace, be sure to check out the Squarespace Manual if you're having any difficulties.)

Add the Twitter Tweet Button to Squarespace

Follow these simple steps to add the Twitter Tweet button to your Squarespace blog:

  1. Enter the Structure Editing Layer from the Squarespace administrative interface
  2. Select the configure this page option from your blog home page
  3. Navigate to the Post Display Configuration section of the Configuration tab
  4. Drag one of the new HTML snippets to the header or footer of your blog layout
  5. Click on your new snippet to edit. Paste the following code and then select Hide and Save:

<a href="http://twitter.com/share" class="twitter-share-button" data-url="%PERMALINK%" data-count="horizontal" data-via="YOUR TWITTER USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Squarespace HTML Widget interfaceToggle the HTML Snippets in the Post Display Configuration interface.

Squarespace Twitter HTML SnippetSquarespace HTML Snippet for a Twitter Tweet button

  • Note 1: Make sure you make use of Squarespace's "%PERMALINK%" URL substitute in place of any specific URLs on your blog.
  • Note 2: Replace "YOUR TWITTER USERNAME" with, you guessed it, your Twitter username. This will include a mention to you when someone tweets your article.
  • Note 3: Choose or create your own Twitter Tweet button for Squarespace here (just be sure to use the %PERMALINK% URL plug).

Add a Facebook Like Button to Your Squarespace Blog

Follow these simple steps to add the Facebook button to your Squarespace blog:

  1. Enter the Structure Editing Layer from the Squarespace administrative interface
  2. Select the configure this page option from your blog home page
  3. Navigate to the Post Display Configuration section of the Configuration tab
  4. Drag one of the new HTML snippets to the header or footer of your blog layout
  5. Click on your new snippet to edit. Paste the following code and select Hide and Save:

 <iframe src="http://www.facebook.com/plugins/like.php?href=%PERMALINK%&layout=standard&show_faces=true&width=310&action=like&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:310px; height:23px;"   allowTransparency="true"></iframe>

Squarespace Facebook Like HTML SnippetSquarespace HTML Snippet for a Facebook Like Button

  • Note 1: Make sure you make use of Squarespace's "%PERMALINK%" URL substitute in place of any specific URLs on your blog.
  • Note 2: You can adjust the size of the Like button's container by adjusting the number of pixels in the width and height properties of the HTML

Displaying Squarespace HTML Snippets Inline

By default, each HTML snippet displays on its own line on the web page. But if you want to display them side-by-side, read Squarespace user Si Lunt' tip on how to display your Squarepace HTML snippets inline on the Squarespace developer forum. As a part-time Squarespace developer, I appreciate people like Si Lunt for sharing knowledge with the community.

What is your opinion of Squarespace? Have you heard of them as a blogging platform? Do resources like the Squarespace Twitter / Facebook Button Tutorial Post make you more likely to want to check them out? What reservations do you have? Leave your thoughts and opinions in the comments below. And check out this information if you're looking for more on Squarespace.