Streaming live at 10am (PST)

Dynamic share buttons for different social media

Hi @darusim_ws!

I think Pinterest code it outdated. I found a new one that works:

<a class="w-inline-block social-share-btn pin" href="http://pinterest.com/pin/create/button/?url=&description=" target="_blank" title="Pin it" onclick="window.open('http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(document.URL) + '&description=' + encodeURIComponent(document.title)); return false;"></a>

P.S. I updated the code in the main post. Thanks for bringing it

1 Like

@Erin_O_Dwyer @sabanna

I read the posts above mentioning that you can’t force modern browsers to open in certain ways, but it is possible because most share buttons open a new small window with the controls turned off so that it’s less intrusive to your browsing experience like this.

I figured out how to to this for a specific page, but I could use some help on how to do it for the current page (dynamically).

<a 
class="YOUR CLASS NAME"
target="_blank" 
title="Share on Facebook"
OnClick="window.open(this.href,'targetWindow','toolbar=no,location=0,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=250'); return false;" 
href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2FYOURWEBSITE.COM">
</a>
2 Likes

Thanks for finding the code, @parkerwest!

Here is a snippet that works for the dynamic page (for FB sharing) with the suggested parameters. Works pretty well :+1:t3:

<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), 'targetWindow', 'toolbar=no,location=0,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=250'); 
return false;">Sare on FB</a>
1 Like

@sabanna Thank you for the final touches!

With your help I finalized my un-styled template for social share buttons that has all of them made using the small share window UI. I made it cloneable so hopefully others can use these going forward as well!

5 Likes

thank you @sabanna and @parkerwest ! I will try it out in a bit… I really appreciate both of you helping me with that and that’s amazing you made the clone option, @parkerwest!

Hi Anna @sabanna,

first of all thank you very much for this awesome work. The Share-Buttons worked well with my website www.run-thecontinents.com. After adding Multilanguage site ([TUTORIAL] Full Multi Language Site - Easy to set-up and to use!) it doesn’t work anymore. I tried to fix it but without success. Do you have any idea?

Thanks in advance,
Gockel

Great tutorial!

Please let me know how to add image from CMS to “Twitter share”?

Thanks!

Hi, @botski!

Are you trying to share an image on Twitter or page?

Hi,

I am using this on my CMS template page and trying to share from my CMS ‘generated’ page:

TWITTER SHARE
<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=%20Check%20up%20this%20awesome%20content' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent(document.URL)); return false;"></a>

I am just wondering how to attach thumbnail/image from the CMS field.

Thanks!

This code will share the Link to the page and automatically will pull the Image that you set for the Page (Open Graph Image). If you want the certain image field to be the Page OG image, you need to select it in the Dynamic page settings:

1 Like

Hey this works perfectly!

How does one resize the font-awesome Icon and change the colour? I have no coding experience.

  1. Download the font awesome font for desktop.
    https://fontawesome.com/download

  2. Install the font on the site you want to use it these buttons on
    https://university.webflow.com/article/custom-fonts

  3. Copy the elements you want from my project to the project you want to use.
    https://university.webflow.com/article/copying-and-pasting-between-projects

  4. Change the size and color using webflow native tools. (see image)

2 Likes

It worked. You’re a superstar - thank you!

1 Like

Thanks for your help! Everything worked fine but suddenly the link images are not visible anymore. I previewed the backups month ago and they work fine there. Just can’t restore as client site has been updated multiple times in between…

Here’s share link to the site https://preview.webflow.com/preview/smartringnews?utm_medium=preview_link&utm_source=designer&utm_content=smartringnews&preview=be88d0854e3b9a580c7f6f1b520860da&pageId=5dd438d043566201ff863d1c&itemId=5dd438d04356620635863d97&mode=preview

Problem is related to the blog posts template where the social media share buttons are supposed to be.

Maybe You could help?

Thanks!

OK, figured out what was causing the missing “buttons”. As they were in the first place created and then deleted not “used” anymore… and I cleaned up all “not used” classes form the tool and at the same time those three were gone :slight_smile: Screen Shot 2020-03-22 at 19.53.32

Hi everyone, since I didn’t find a video about this issue I decided to make one. Since I feel like this little custom code is super helpful and I also find it little bit confusing at first. I hope this might help someone! :blush: https://www.youtube.com/watch?v=m8xCoDXvFVA

2 Likes

Hi Sabanna,

I am trying to add a single button multiple share (whatsapp, sms, facebook messenger, gmail, outlook) to my mobile version website to appear on multiple browsers. Your assistance would be greatly appreciated. ps im fairly new at this :-/

How would the script actually look like with image/text in the embed element. @sabanna gives a hint at the end in the tutorial, but I cant get title to show… :stuck_out_tongue:

1 Like

! Social Sharing With LinkedIn (May, 2020)

Many of the answers here were valid until about one or two weeks ago (i.e., April, 2020). For now, the ONLY supported param is url , and the new share link is as follows…

Following Sabanna’s template this would be:

<a class="w-inline-block social-share-btn lnk" onclick="window.open('https://www.linkedin.com/sharing/share-offsite/?url=' + encodeURIComponent(document.URL)); return false;"></a>

Previously, the follower params were valid: title , summary , source . Unfortunately, these have all been entirely removed from any functionality.

Best!

For anyone looking for WhatsApp or Telegram, I’ve pieced this together using the code from sharingbuttons.io and the excellent guide above. I am no developer, so if anyone smarter than me wants to verify this isn’t opening Pandora’s Box somewhere, that’d be great.

It’s 100% working on our live site, as of May 30, 2020.

WhatsApp

<a class="w-inline-block social-share-btn wa" href="" target="_blank" rel="noopener" onclick="window.open('whatsapp://send?text='+encodeURIComponent(document.title)+'%20 '+encodeURIComponent(document.URL));return false;">/a>

Telegram

<a class="w-inline-block social-share-btn tg" href="" target="_blank" rel="noopener" onclick="window.open('https://t.me/share/url?url='+encodeURIComponent(document.URL)+'&text='+encodeURIComponent(document.title));return false;"></a>

EDIT: updated code to include both document.title and document.URL.
EDIT2: added Telegram.