Social sharing buttons + CMS?

Design help Custom code
1

Hi.

Is there any way to embed social sharing buttons that have a dynamic link with webflow CMS? I know https://shareaholic.com/ makes very simple social sharing embed options… but how can I make sure the link getting shared is the one for the current CMS page and not the entire site?

Best,
Christopher

2

Hello Christopher (@ctrav)

I used code snippets for Facebook, Google+, Twitter, Tumblr, E-mail and Pinterest sharing in one of my clients site. All options were checked and work well.

First of all, I used method that Waldo showed in this post FREEBIE: Sharing is Caring :) - Show & Tell - Forum | Webflow

Then I just found and adjust code snippets for Social Networks that I needed

Facebook

<a class="w-inline-block social-share-btn fb" href="https://www.facebook.com/sharer/sharer.php?u=&t=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"></a>

Twitter

<a class="w-inline-block social-share-btn tw" href="https://twitter.com/intent/tweet?" target="_blank" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=%20Here goes text of your tweet ' + encodeURIComponent(document.title) + ':%20 '  + encodeURIComponent(document.URL)); return false;"></a>

Google+

<a class="w-inline-block social-share-btn gplus" href="https://plus.google.com/share?url=" target="_blank" title="Share on Google+" onclick="window.open('https://plus.google.com/share?url=' + encodeURIComponent(document.URL)); return false;">

Pinterest

<a class="w-inline-block social-share-btn pin" title="Pin it" target="_blank" href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);
e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);
e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);
e.setAttribute(&apos;src&apos;,&apos;
http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'></a>

With Pinterest sharing, it will take Meta description from the current page and show all images from the site. But it is possible to adjust by changing settings (look Pinterest docs)

Tumblr

<a class="w-inline-block social-share-btn tmb" href="http://www.tumblr.com/share?v=3&u=&t=&s=" target="_blank" title="Post to Tumblr" onclick="window.open('http://www.tumblr.com/share?v=3&u=' + encodeURIComponent(document.URL) + '&t=' +  encodeURIComponent(document.title)); return false;"></a>

E-mail

<a class="w-inline-block social-share-btn email" href="mailto:?subject=&body=:%20" target="_blank" title="Email" onclick="window.open('mailto:?subject=' + encodeURIComponent(document.title) + '&body=' +  encodeURIComponent(document.URL)); return false;"></a>

These code snippets will take information from current page meta image and meta description. And, as you know, on the dynamic pages template you can set these settings dynamically too (page settings above the custom code areas).

Classes of anchors may be different (depend on what you will use on 1st step) but “w-inline-block” is necessary.

Hope it helps.
Cheers,
Anna

8 Likes
3

You can see it here http://sister-hood.webflow.io/posts/post5 and try it.

2 Likes
4

All of this looks very detailed and helpful! I will try this out when I have a chance and report back if I was successful (which I am sure I will be considering how clear this all in). Thank you so much.

1 Like
5

@Sabanna

Amazing. So helpful.

If you find some time could you take a stab at getting a Linkedin social post share working as well? I messed around with it quite a bit but couldn’t figure out what I’m doing wrong.

6

Ok, try this one, but I do not have a Linkedin account so really didn’t check.

<a class="w-inline-block social-share-btn linked" href="http://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=&source=" target="_blank" title="Share on LinkedIn" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.URL) + '&title=' +  encodeURIComponent(document.title)); return false;"></a>

Let me know if it works

Cheers :wink:

2 Likes
7

Hi Sabanna,

Sorry about the delay here - busy. Just wanted to thank you for your time. I’ll check this out sometime soon & report back :wink:

1 Like
8

Hi, Sabanna. I’m looking something like this but to integrate into the CMS… probably this was answered before, do you know if there is a thread with the answer?

9

Hello, @portentus!

Check this tutorial:

Hope it helps :slight_smile:

Cheers,
Anna

1 Like