Social Sharing on 7.1

Writing this because I couldn’t find the answer myself. Find a widget that can create code for share buttons, I'm using Elfsight atm. 

For Version 7.1

Add code to blog posts by going to Pages > Blog Settings (the little cog) > Advanced and then paste the code to “Post Blog Item Code Injection”.

The widget should carry over all blog pages.

Hey @jesslowe, thanks a lot for mentioning us! We hope our widget is working fine for you 🙂

We're happy to provide support with any questions you might have - from your widget customization to the whole installation on your website.

Never hesitate to contact us 😉

Regards,
Elfsight Team

Explore all Elfsight widgets - Widget Catalog
Follow us - Facebook | Instagram

On 1/5/2022 at 10:33 PM, FORNEO said:

After trying other services suggested in this thread, which were less than ideal for various reasons, I discovered this.  Free and simple.  No javascript needed.  No tracking by a 3rd party (that I can tell. . . at least there were no "terms of service" to agree to).  Works great!

https://sharingbuttons.io/

Thank you for the tip, I'd love to use it, but I don't know how to get it to share the specific url of each blog post. So far, it proposes to share the website's url on every blog page, but not the specific page it's displayed on. Could you walk me through how you set it up?

6 hours ago, Kawasana said:

Thank you for the tip, I'd love to use it, but I don't know how to get it to share the specific url of each blog post. So far, it proposes to share the website's url on every blog page, but not the specific page it's displayed on. Could you walk me through how you set it up?

The code on the left needs to go into the Post Blog Item Code Injection section of your blog settings. Click on the blog page, then the gear icon, then advanced, then the post blog item code section.

The code on the right needs to go under Design, Custom CSS.

Does your blog have to be published for this to show up? My blog post is still in my drafts and the share buttons aren't showing up.

3 hours ago, natashadeen said:

Does your blog have to be published for this to show up? My blog post is still in my drafts and the share buttons aren't showing up.

It should show up in the editor, but if you aren't on a plan that allows for code injection the css won't work without it. what plan are you on?

Hi all, 

I am struggling with this code injection thing. I have gotten it to work on the blog page section (which is the section I want it in). I have tried numerous widgets en elfsight was the only one that showed up. 

However, I don't want to use the blog site function as there is no custom page editing as in adding sections. It's just a plain section of a header image and text. So I want to use a normal page and have some editing options. 

When I custom add the code (Elfsight) to a blank section it shows up, but it says in grey Script Disabled. Does that mean it does not work ? I can also not delete this text.  I can't test is, as site is not live yet. 

And to the elephant in the room, why the heck is this not a feature? This should IMO be standard. 

However, what are my options here, because making a blog page is not desirable as stated above. 

Thanks

Here's how I worked around this problem. This works for SS 7.1 but you will need a plan with access to code blocks.

Head over to this website (that I found by searching) and choose 'Inline horizontal sharebar' at step 1.

At step 2, you can click on a button's trashcan icon to remove that button. You can click and drag buttons to re-order them. You can search for another social network's button and add that.

At step 3, click on 'Select a template' and choose how you want your buttons to look. Note that some design styles look the same here, but they may have different mouseover behaviours, which you can see in…

Step 4: Check it all looks right.

At Step 5, make sure you click on 'Automatically use active page details' to check it. You will need to leave it set to 'With JS' on the green button toggle.

Ok so now the page gives you three sections of code: In Header, In Body and Before </body>. If you are happy to use the externally hosted code you can proceed with these as they are written. However, if you want to self-host, you will need to jump through a few hoops, as follows:

----------

Download the two files linked at the bottom of the page -  socializer.css and socializer.js. You can right-click on the links and Save File As… etc. Note that the linked files have two periods in the file names. These filenames may be altered by your PC when you download them. Either way, for Squarespace I recommend you rename them to socializermin.css and socializermin.js - with only one period, separating the name from the file extension. (Squarespace's upload system does not like files with multiple periods in the name).

Now, over in your Squarespace editor, you're going to head to Pages > Not Linked and click the + button, then select Link from the list of page types. In the pop-up, click the gear icon to bring up the Link Editor. Then head to File and click UPLOAD FILE. Select one of your downloaded and renamed files and upload it, then repeat for the other one.

You should now see those files listed in the Link Editor, so click on one of them to select it and click SAVE in the top-left. Take note of how the link is formed in the text field. It's probably just /s/socializermin.js which is good. You don't need to actually create a link so now just click Close and then Discard.

----------

OK. Now, back in the main Squarespace editor let's go to Settings > Advanced > Code Injection. If you're using the externally hosted code, you just need to copy and paste the In Header code (from step 5 of the Aakash website) into the Header section, and the Before </body> code into the Footer section. If you are using the self-hosted code files that you uploaded to Squarespace, you will need to amend the code slightly. This is what worked for me:

Header code

<link rel="stylesheet" type="text/css" href="../s/socializermin.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">

Footer code

<script src="../s/socializermin.js"></script>
<script>
(function(){
    socializer( '.socializer' );
}());
</script>

Note that I added two periods before that /s/… part that the Link Editor gave me earlier. If this doesn't work for you, you may need to try the complete URL of your site here, eg. 

"https://www.mywebsitename.com/s/socializermin.js"

Don't forget to now SAVE this code injection.

Nearly there…

Now, if you're happy to have your sharing buttons BELOW your blog post's content, you can go to Pages > Blog > Settings (gear icon) > Advanced > Post Blog Item Code Injection and then paste in the code from the In body (from step 5 of the Aakash website) section. Maybe it'll be something like this:

<div class="socializer" data-features="32px,opacity,icon-white,pad" data-sites="facebook,twitter,reddit,print,email,rss,whatsapp"></div>

The nice thing about this whole method is that you can go back later and only amend this single piece of code in your blog settings, to add or remove buttons and change their style. You don't need to edit the injected Header and Footer code. And the buttons will automatically create links to the current blog post, they don't need customising for every post (unlike the sharingbuttons.io ones someone else mentioned.

If you want your sharing buttons somewhere else, eg. below your blog post title and before the content (like most blogs) you will unfortunately have to add a code block in to every single blog post and add the same In Body code to those blocks.

Or maybe Squarespace will get their act together and just add the old functionality back in 🙄 if everyone submits a request for it.

Re. self-hosting vs external hosting. The advantage of using the developer's externally linked code is that they can update it when Facebook, Twitter etc change their API. This is good (if they actually do it). The disadvantage is the developer, or a hacker that gained access to their account, could modify the code and attempt to install something malicious in it's place which your site would then be loading. Personally I think that is unlikely and I have used the externally hosted code. My instructions for self-hosting failed to also take account of the css file from fontawesome.com so for total belt-and-braces you might want to upload that one too.

On 9/7/2022 at 10:25 AM, kitkats said:

Re. self-hosting vs external hosting. The advantage of using the developer's externally linked code is that they can update it when Facebook, Twitter etc change their API. This is good (if they actually do it). The disadvantage is the developer, or a hacker that gained access to their account, could modify the code and attempt to install something malicious in it's place which your site would then be loading. Personally I think that is unlikely and I have used the externally hosted code. My instructions for self-hosting failed to also take account of the css file from fontawesome.com so for total belt-and-braces you might want to upload that one too.

I tried the self hosted and doesn't show any of the icons, just with the external function.

Having this code, it is possible to place the icons in the top of the blog close to the autor, tags etc?

I can't believe that two years later, still I have to inject code to get this working.

Also using any of those 3rd party sharing services isn't an option in the EU as they track user data and require therefore user consent. Unless some of them do not track data? 

Please know that "Share.this" is a tracking software. This is how it is "free". Because it tracks and sells data from your website visitors it requires disclaimers on your site. 

On 1/6/2023 at 7:19 PM, Jen9938383 said:

Please know that "Share.this" is a tracking software. This is how it is "free". Because it tracks and sells data from your website visitors it requires disclaimers on your site. 

Exactly, companies like that one make money by tracking and profiling website visitors. By being implemented on numerous websites, they are in a unique position to track people on the web, compiling their browsing history into profiles that can then be shared, processed, and sold. 

I'm very new to building websites. Could someone help me on how to insert this script header into the html on Squarespace? I'm not finding a way to do this. Thanks.  

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JZZDCKR7QC"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-JZZDCKR7QC');
</script>

1 hour ago, JeffreyDavison56 said:

Could someone help me on how to insert this script header into the html on Squarespace?

Add to Settings > Advanced > Code Injection > HEADER.

Let us know how it goes.

On 9/7/2022 at 8:25 AM, kitkats said:

Here's how I worked around this problem. This works for SS 7.1 but you will need a plan with access to code blocks.

Thanks @kitkats for posting this. I have tried the external host and the self-host options and had no luck getting the social buttons to appear in my blog posts. I have also tried replacing .. with my trial site's URL. Any advice for trouble shooting?

On 1/5/2022 at 9:33 PM, FORNEO said:

After trying other services suggested in this thread, which were less than ideal for various reasons, I discovered this.  Free and simple.  No javascript needed.  No tracking by a 3rd party (that I can tell. . . at least there were no "terms of service" to agree to).  Works great!

https://sharingbuttons.io/

Thanks! Made it work for sharing individual blog posts! (added {permalink} in the html code)

And agree with many others on this thread that share buttons should be a standard feature, i'm new to squarespace but quite disappointed on this.

On 1/5/2022 at 4:33 PM, FORNEO said:

After trying other services suggested in this thread, which were less than ideal for various reasons, I discovered this.  Free and simple.  No javascript needed.  No tracking by a 3rd party (that I can tell. . . at least there were no "terms of service" to agree to).  Works great!

https://sharingbuttons.io/

I had to remove it because it was sharing a link to io instead. 😐

12 hours ago, PDChappelle said:

I had to remove it because it was sharing a link to io instead. 😐

you'd need to edit the html a bit to have the permalink to your blog posts as the target destination. I'm pasting here below the html code i've added as Post Blog Item Code Injection.

<!-- Sharingbutton Facebook -->
<a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u={permalink}" target="_blank" rel="noopener" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/></svg>
    </div>
  </div>
</a>

<!-- Sharingbutton Twitter -->
<a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?url={permalink}" target="_blank" rel="noopener" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/></svg>
    </div>
  </div>
</a>

<!-- Sharingbutton Tumblr -->
<a class="resp-sharing-button__link" href="https://www.tumblr.com/widgets/share/tool?posttype=link&amp;canonicalUrl={permalink}&amp;shareSource=tumblr_share_button" target="_blank" rel="noopener" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--tumblr resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.5.5v5h5v4h-5V15c0 5 3.5 4.4 6 2.8v4.4c-6.7 3.2-12 0-12-4.2V9.5h-3V6.7c1-.3 2.2-.7 3-1.3.5-.5 1-1.2 1.4-2 .3-.7.6-1.7.7-3h3.8z"/></svg>
    </div>
  </div>
</a>

<!-- Sharingbutton E-Mail -->
<a class="resp-sharing-button__link" href="mailto:?subject=Words%20and%20Pictures%20-%20street%2C%20travel%20and%20documentary%20photography&amp;body={permalink}" target="_self" rel="noopener" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--email resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.25 14.43l-3.5 2c-.08.05-.17.07-.25.07-.17 0-.34-.1-.43-.25-.14-.24-.06-.55.18-.68l3.5-2c.24-.14.55-.06.68.18.14.24.06.55-.18.68zm4.75.07c-.1 0-.2-.03-.27-.08l-8.5-5.5c-.23-.15-.3-.46-.15-.7.15-.22.46-.3.7-.14L12 13.4l8.23-5.32c.23-.15.54-.08.7.15.14.23.07.54-.16.7l-8.5 5.5c-.08.04-.17.07-.27.07zm8.93 1.75c-.1.16-.26.25-.43.25-.08 0-.17-.02-.25-.07l-3.5-2c-.24-.13-.32-.44-.18-.68s.44-.32.68-.18l3.5 2c.24.13.32.44.18.68z"/></svg>
    </div>
  </div>
</a>

<!-- Sharingbutton Pinterest -->
<a class="resp-sharing-button__link" href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fwww.pierrefdocquir.com&amp;media={permalink}" target="_blank" rel="noopener" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--pinterest resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.14.5C5.86.5 2.7 5 2.7 8.75c0 2.27.86 4.3 2.7 5.05.3.12.57 0 .66-.33l.27-1.06c.1-.32.06-.44-.2-.73-.52-.62-.86-1.44-.86-2.6 0-3.33 2.5-6.32 6.5-6.32 3.55 0 5.5 2.17 5.5 5.07 0 3.8-1.7 7.02-4.2 7.02-1.37 0-2.4-1.14-2.07-2.54.4-1.68 1.16-3.48 1.16-4.7 0-1.07-.58-1.98-1.78-1.98-1.4 0-2.55 1.47-2.55 3.42 0 1.25.43 2.1.43 2.1l-1.7 7.2c-.5 2.13-.08 4.75-.04 5 .02.17.22.2.3.1.14-.18 1.82-2.26 2.4-4.33.16-.58.93-3.63.93-3.63.45.88 1.8 1.65 3.22 1.65 4.25 0 7.13-3.87 7.13-9.05C20.5 4.15 17.18.5 12.14.5z"/></svg>
    </div>
  </div>
</a>