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 
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! 
Dynamic Sharing Buttons in Webflow - Sketch to Webflow - YouTube
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… 
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.
<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.
An Instagram workaround
Of course, Instagram doesn’t have any sharing API because each Instagram post requires an image (a URL isn’t enough and URLs aren’t even clickable in Instagram captions).
But, then we realized: “Hey, we already made an image for every page. We spent a fair bit of time preparing nice Open Graph images. Why not link that og:image directly to users?”
The code below will open that page’s Open Graph image in a new tab that Instagram users can download and use for their post.
<a class="w-inline-block social-share-btn ig" href="" target="_blank" rel="noopener" onclick="(function(e){e = e || window.event; e.preventDefault(); window.open(document.querySelector('meta[property=\'og:image\']').getAttribute('content')); return false;})(event)">
This is 100% working on our test site. No warranties on opening Pandora’s Boxes, haha, but it looks straightforward. The code is, again, a mix of the OP code & code copied from this Stack Overflow post.
EDIT 1: code fixed to only open one tab. Apologies for the error.
How share the image or photo in Instagram??
Please Provide me url For Instagram
Please Help me??
Hi, @dharmendra_maurya!
Unfortunately, Instagram doesn’t allow you to share a photo or video from another website – you can only upload photos/videos directly from your mobile device. Since there is no sharing mechanism, there is no way to create a button that will share the content to Instagram.
Thank you so much for sharing this. It has come in very handy! I have a question for you about pulling in the URL for the collection item. Pulling in the (document.URL) is fine if you are sharing an item from their own Collection Page, but if you have a grid of multiple different items from a collection (like videos) on a different page (like a portfolio page) and each video has a share button, then the URL being generated is of that document page, not the video’s page.
Example:
Part 1 - I have 4 videos from the collection pulled into the “Home” page and the share buttons pull in the URL of http://name.webflow.io so then I can add the parameters to + ‘/videos/{{slug}}’ and it pulls the unique video from its own collection page to share.
Part 2 - I have 8 videos from the collection pulled into the “Work” page and the share buttons pull in the URL of http://name.webflow.io/work So now I can’t add + ‘/videos/{{slug}}’ to find the video. Is there a function that you may know of to either remove the /subpage from the document URL or just grab the “Home” URL of http://name.webflow.io
Here is the code you posted with my tweaks:
<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=' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent(document.URL) + 'videos/{{slug}}'); return false;">Tweet</a>
Is there any WhatsApp code?
thanks!
Hey everyone,
I had been using these buttons for a while in my projects and I’ve noticed they don’t appear on Safari anymore (Shows on Chrome, Firefox and Opera, even on my iPhone’s Safari, but not my coworkers’).
What I’m supposed to see
What I see
Does anyone know if this could have something to do with Safari’s new privacy stuff? This was my coworker’s guess.
Do we have a way to fix this? I can’t have these buttons now show on one browser in my current project, so I’d need an alternative that’s fail-proof. Should I look into ShareThis like Webflow ‘officially’ recommends?
Thanks in advance!
pinterest not showing pin image
and twitter link also not showing og:image content
any help ?
@Gary_Voigt - This is exactly the issue I’m running into. I’ve scoured the Webflow forums and can’t seem to find an answer.
@sabanna - Would you be able to advise? If I’m understanding Gary correctly I have the same issue. I have multiple posts from a collection on one page. And I’m hoping to have the option to share a unique link for each post to FB/TW.
I followed Waldo’s steps creating the buttons, assigning classes, then added the Embed code. But they don’t seem to be linking out. Thanks in advance!
How would I go about adding the text content of a specific text block on the page into the twitter share message.
I want to add a text div with ID #total-posts into the message that gets generated.
Can anyone help? Thanks!
it could be addblock plus blocking the buttons. I’m having a hard time finding information on how to stop adblockplus from making those disappear…
Hi @sabanna I have used the same code here, but I am facing a problem. When I hover over the block where I have applied the code, the color of the block should change but somehow it seems broken. Can you take a look-
The above screenshot is the issue
This solution is great! Thanks a lot for sharing. But I’m wondering if this solution is GDPR compliant, since I live in the EU. Is there any information about this? I did some research but I couldn’t find reliable info on this topic yet. Maybe it is compliant, since the buttons are custom made and not using the prebuild scripts from the social media platforms… does anyone have more insights about this? Thanks a lot!