Adding the Facebook "Like" and "Share" Button

Unfortunately, Squarespace does not currently offer the ability to have share buttons added to non-blog pages. I would love to have this ability on pages I create, specifically facebook, pinterest and twitter.

Twitter is the easiest of the bunch, requiring a simple html link added to a Code Block. Pinterest is not as straight forward. Facebook is the same. Regarding Facebook specifically, I would like to add the Like / Share button found here: http://developers.facebook.com/docs/reference/plugins/like/

However, when using the tool to generate the code, it results in two blocks of code for HTML5. The first batch of code has the following instruction: "Include the JavaScript SDK on your page once, ideally right after the opening <body> tag."

The second batch of code has this instruction: "Place the code for your plugin wherever you want the plugin to appear on your page."

My question is: where do these batches of code go in Squarespace 6? I'm assuming the second batch goes in a Code Block where you want it to appear. But what about the first? I've tried pasting it into every available space for code and nothing is working.

Any help would be greatly appreciated. Thanks!!!

asked Apr 25 '13 at 22:26 by deardorff 116125

6
6

I'd think you paste the first bit of code in the Header Code Injection Point.

http://help.squarespace.com/customer/portal/articles/438250

answered Apr 25 '13 at 23:37 by kale 5.1k510

link

@kale, this worked! I still need to test how it links but the buttons appear on the page preview so this is certainly progress. Thank you so much for chiming in.

(Apr 30 '13 at 03:40) deardorff deardorff's gravatar image

There should be a way to do this in a way that doesn't require creating custom Code blocks for every page.

I think the jQuery append/prepend method would allow insertion consistently.

Something like..

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

    $( insertSocial );

    function insertSocial() {

      var insertionCode= $( "Like button HTML goes here" );
      $('#headerWrapper').append( insertionCode );
    }

    </script>

NB - I haven't tested that - just thinking out loud.

The code would drop whatever you define as the Like button HTML immediately after the Headerwrapper. #headerWrapper could be replaced by any other unique reference in the html. A conditional could ensure that it only appears on certain pages.

The advantage of this approach is that the code only needs to go in the sitewide injection point and is thus easier to maintain.

answered Apr 30 '13 at 06:34 by silvabokis 4.7k2512

link

If you want to add the the addthis/ individual share buttons to the bottom of each individual blog post:

  1. Get the code from addthis.com or any share button code.
  2. Make sure your in your blog dashboard.
  3. Click "Blog Settings" on the right, next to "add post."
  4. Click advanced.
  5. Scroll to bottom and paste code in "Post Blog Item Code Injection."
  6. You're welcome!

PHEW, it took me months to find something easy, that works!

ALSO- to make sure the buttons pull content from your individual posts, replace your url in any code with "{permalink}" instead. Edit the first line of your code to look like:

 <div class="addthis_toolbox addthis_default_style " addthis:url="{permalink}">

answered Jan 30 at 17:08 by donutlover 213

link
Your Answer
toggle preview

Follow This Question

Once you sign in you will be able to subscribe for any updates here

Markdown Basics

  • *italic* or __italic__
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×41
×35
×20
×12
×6

Asked: Apr 25 '13 at 22:26

Seen: 8,204 times

Last updated: Jan 30 at 17:37

Established 2004 Handmade in NYC