Social Sharing Links

Design help CMS
1

Please help. I’m desperate.

I’m trying to add social sharing links to my CMS collection pages. I created my own, however, I can’t seem to link each individual post by editing an individual post in Blog Collection Template. No matter which blog post I click on, the social sharing element will have the same link. Understandable.

So I decided to use AddThis, but I’m not sure if there’s a seamless integration for it. Adding the code in Custom Code in Settings doesn’t seem to work.

How to create social sharing links/elements that actually work with the CMS?

Here is my public share link: LINK
(how to access public share link)

2

Sorry brother. No better idea about CMS.

3

Curious if you ever found a solution to this? I’m in the same boat right now

Edit:
Actually I found it did work with the Add This code. Thanks for sharing that resource!

4

The API for Facebook/twitter/linkedin and so on - change over time (Read the docs for each platform).

Linkedin:

For linkedin for example this works perfectly (Change to your slug and absolute path):

<script src="//platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-url="https://www.sitename.co.uk/post/{{cms slug her}}"></script>

image
image804×187 14.2 KB

Facebook:

Add some share icon (JPEG)

<a title="share on facebook" class="social-icon facebook"  href="javascript:fbshareCurrentPage()" target="_blank" alt="Share on Facebook">
<img height="21" src="https://some-facebook-icon.gif" alt="share on facebook button">
</a>

<script language="javascript">
    function fbshareCurrentPage()
    {window.open("https://www.facebook.com/sharer/sharer.php?u="+escape(window.location.href)+"&t="+document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false; }
</script>

Twitter

<a title="Share on Twitter" href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a>

<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

OPEN GRAPH

You should add Open Graph (OG) data (Title/image and so on):

5

Hey @Siton_Systems

Do you know how to prevent my preloader gif from interfering with OG image?

When I share a CMS page, the first time it gets the preloader gif, then I close the window and share again and it gets the good OG.

Thanks!

6

Peace everyone! Thank you @Siton_Systems for the code snippets. I was looking for something to resolve the recent API update for LinkedIn, as it prevented my previously accessible share button from working properly.

After using the code you shared along with some trial & error, I was able to finesse it back into a custom share icon for LinkedIn. Here’s the code snippet I used:

<a onclick="window.open(this.href, 'linkedin-share','width=580,height=640');return false"
href="https://www.linkedin.com/cws/share?url=https%3A%2F%2Fwww.wildenfree.com/wf-log/{{wf {&quot;path&quot;:&quot;slug&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}
&xdOrigin=https://www.wildenfree.com
&xdChannel=bce03efd-1b66-41e5-8e34-2bbd1894b473
&xd_origin_host=https%3A%2F%2Fwww.wildenfree.com" class="linkedin-share">

<div class="social-image">
<img src="https://uploads-ssl.webflow.com/
5b331ee74ca8552bcfa2a396/5c35d4058b9a31345c8be667_WF-Icon_LinkedIn.svg"
alt="linkedin-icon" class="center">
</div>
</a>

So if you were to customize it for yourself it would be more along the lines of:

<a onclick="window.open(this.href, 'linkedin-share','width=580,height=640');return false"
href="https://www.linkedin.com/cws/share?url=https%3A%2F%2Fwww.YOURSITE.com/YOUR-PAGE/YOUR-CMS-SLUG
&xdOrigin=https://www.YOURSITE.com
&xdChannel=bce03efd-1b66-41e5-8e34-2bbd1894b473
&xd_origin_host=https%3A%2F%2Fwww.YOURSITE.com" class="linkedin-share">

<div class="social-image">
<img src="YOUR ICON'S IMAGE LINK"
alt="linkedin-icon" class="center">
</div>
</a>

Hope that helps somebody!

All the Best,
Sean aka Mr. Wildenfree

1 Like