Dynamic share buttons for different social media

Grant1 · April 12, 2019, 1:05pm

This does not work?? Any solutions?

Naama · July 7, 2019, 5:33pm

Hi @sabanna, wonderful post, I often use your great solutions!
I do have one problem - my customer is trying to share a post via email and he gets a blank White page instead of the email application to get opened. This does not happen on my computer. Are you familiar with this problem?

This is my read-only link: Webflow - Coach Gilad Armon

and this is the live website: https://www.alwaysforward.co.il/blog/you-need-inspiration
the email share button is at the bottom:

Thank you so much,
Naama.

sabanna · July 7, 2019, 7:08pm

Hello, @Naama!

The code snippet for the email sharing is supposed simply call the default email client app installed on the user’s system. Looks like your customer’s system might not have a “default email client” on his/her system. I also saw the reports that it is common Windows10 issue (html - href="mailto:" is not working on any of the browsers - Stack Overflow)

Naama · July 8, 2019, 8:55am

Thanks so much @sabanna!

Erin_O_Dwyer · August 25, 2019, 1:40am

@sabanna Could you kindly share how you get the share pages to open in new windows, not new tabs? I’ve tried in both both the designer preview and published versions and set up the exact button class names like you did, copying the code from your examples, but they open in new tabs, not windows.

I believe @alexanderwong found a solution for this, but didn’t specify how in this thread… It would be so helpful to find that small tweak!

Also, I’m having trouble with the Pinterest button working in Safari, but only pulling up a blank page in Chrome. I did look through the thread and changed the code to include “https” instead of “http” but that doesn’t seem to fix it. Thank you in advance for your help!

My read only code: https://preview.webflow.com/preview/eo-nutrition-final-site?utm_medium=preview_link&utm_source=dashboard&utm_content=eo-nutrition-final-site&preview=dc63312fe901717740b5c17b903172c3&mode=preview

The published CMS example page where the buttons are embedded to the left: https://eo-nutrition-final-site.webflow.io/post/7-must-have-tools-for-web-designers

sabanna · August 27, 2019, 2:14pm

Hi, @Erin_O_Dwyer!

With HTML you can’t influence this - every modern browser has complete control over this behavior because it has been misused a lot in the past.

Attribute target="_blank" will make link can open a new browsing context (HTML5). Browsing context in modern browsers is mostly “new tab” instead of “new window”. You have no influence on that, and you can’t “force” modern browsers to open a new window.

Respectfully,
Anna

Erin_O_Dwyer · August 28, 2019, 8:06pm

Hi @sabanna,

Thank you so much for your reply! I appreciate it! I didn’t know that about browsers and html.

Do you have any thoughts on the Pinterest discrepancy?

thank you again!
Erin

darusim_ws · September 8, 2019, 7:17am

Hi @sabanna,

The Pinterest code doesn’t seem to be working. Tried both http and https but no luck.

Can you please help?

Thank you,
Daru

sabanna · September 9, 2019, 1:55am

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

parkerwest · October 16, 2019, 10:22pm

@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>

sabanna · October 17, 2019, 4:53pm

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

<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>

parkerwest · October 17, 2019, 5:33pm

@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!

Erin_O_Dwyer · November 4, 2019, 5:43pm

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!

Gockel · November 10, 2019, 6:16pm

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! - #96 by studioluvie) it doesn’t work anymore. I tried to fix it but without success. Do you have any idea?

Thanks in advance,
Gockel

botski · November 13, 2019, 12:23pm

Great tutorial!

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

Thanks!

sabanna · November 15, 2019, 5:10am

Hi, @botski!

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

botski · November 15, 2019, 1:14pm

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!

sabanna · November 19, 2019, 4:30am

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:

Jamesbond · January 17, 2020, 12:13pm

Hey this works perfectly!

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

parkerwest · January 17, 2020, 6:43pm

Download the font awesome font for desktop.
Download Font Awesome Free or Pro | Font Awesome
Install the font on the site you want to use it these buttons on
Upload custom fonts | Webflow University
Copy the elements you want from my project to the project you want to use.
Copy and paste between sites | Webflow University
Change the size and color using webflow native tools. (see image)

Topic		Replies	Views
FREEBIE: Sharing is Caring :) Show & Tell	42	25212	February 14, 2017
Social sharing buttons + CMS? Custom code	9	9402	February 19, 2017
Sharing buttons of the current page (for blog) Custom code	3	5714	June 20, 2017
Dynamic Page Sharing on Whatsapp Webflow Tips	18	35396	September 16, 2022
Social Share Buttons for Dynamic Content/Posts Product feedback	27	16643	February 14, 2017

Dynamic share buttons for different social media

Related topics