25 The Squarespace Twitter / Facebook Button Tutorial Post
Most 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:
- Enter the Structure Editing Layer from the Squarespace administrative interface
- Select the configure this page option from your blog home page
- Navigate to the Post Display Configuration section of the Configuration tab
- Drag one of the new HTML snippets to the header or footer of your blog layout
- 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>
Toggle the HTML Snippets in the Post Display Configuration interface.
Squarespace 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:
- Enter the Structure Editing Layer from the Squarespace administrative interface
- Select the configure this page option from your blog home page
- Navigate to the Post Display Configuration section of the Configuration tab
- Drag one of the new HTML snippets to the header or footer of your blog layout
- 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 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.
Did you like this blog post?
Let's Connect:
Subscribe:
Reader Comments (25)
Thanks for taking the time to write up a nice tutorial, Josh. I'll start implementing this right away.
Thanks for stopping by Randy. With a feature this shiny, it's no wonder you want to implement right away.
Good sir, thank you so much for this post. Straightforward, easy, effective - I've been trying to figure this stuff our for a long time, as I'm not real adept at HTML and such, and Squarespace is very labyrinthine sometimes. Thanks again!
Glad to help, Brian. We're all at some point in the learning process. I'm just trying to pay it forward.
Was desperately searching a way of adding the LIKE button on a tab of a facebook fan page. The like button has been implemented on a facebook fan page at
http://www.facebook.com/webwhispers
Just added both the facebook and twitter. some of the hit number counts are stuck on a default. Do you know how to fix this?
I know that there is a difference between the URL we typically link to and the PERMALINK. That said, once you switch over, I think you can expect to see things return to 0. Someone please feel free to correct me if I'm wrong here.
Thank you so very much! You made this very simple for a beginner like myself.
thank you so much for this post! That was easy to follow and helped so much
I got this to work, and easily! Unfortunately, when a user clicks like, it does nothing for the actual facebook fan page; is it supposed to?
Thanks for this, just added it over at nathanhangen.com.
Now if I could just get threaded comments, I'd be happy!
Looking good Nathan! Also, Squarespace says they're working on a comments overhaul right now. Fingers crossed for threading!
This post was exactly the help I needed! Thanks very much.
I have a photography site, and I'm trying to automatically add the FaceBook Like button above each photo in my Picture Galleries. These pages don't have HTML Snippets like Journals. I assume I need to add similar code, but I'm not sure how to specify it for the individual photos and where to put it.
Anyone have code that would work for this?
You rock.
Thank you, I had been struggling with this until I came across your site.
You made my night with your comment, Lisa. Glad to help another Squarespacer!
Sweet! That's the part I couldn't figure out was the permalink part. Thanks so much for your help!! :)
I had the same experience. The Facebook Like button I put up on my page does nothing for the actual Fan page for my business. Is there any way to connect the two like they are connected on Twitter?
Thanks very much for the post it definitely solved my Twitter problem, now I just want Facebook to connect!
@James - I include a Like button at the top of every article and a "Like my fan page" link at the bottom of every post. Just be sure to label actions clearly and put them where users would want to see them.
Ah, gotcha, wish there was one button for both tasks! Ha. Appreciate the response, thanks for the helpful posts
Hi Josh
Thanks for providing these tutorials, I've found them really helpful. I followed them to install the Facebook and Twitter buttons on my Squarespace site and it works just fine. Any chance you could do one for the StumbleUpon button too?
How are you getting the snippets to appear in the post header? I've added this as shown above and also tried through the post header configuration but the snippets continue to appear below the post. The only thing I've come up with is a significant css overhaul.
Hey snoe - nothing fancy on getting the snippets to appear in the post header. Look in the first screen shot in this blog post. You'll see exactly how I've configured my HTML 1 and HTML 2 snippets in my Journal Page Configuration. If that doesn't work, do you have some custom code that has repositioned your snippets?
Very helpful post! Thanks so much :-)
Josh, THANK YOU! I went into SS thinking it would be so much more intuitive. I have had to learn a lot since I don't have a programming background ... at least I have print design behind me : ) So tutorials like yours are keeping me here ... I have been so close to jumping ship with SS and going to WP for the simple fact that all my food blogging friends have all these great cool features. Ah well, we'll see what comes out with the next SS rev : ) Thanks again. Do you know of any good SS folks who I could pay to help me add some custom stuff?
xoLexie