Streaming live at 10am (PST)

Dynamic share buttons for different social media

This does not work?? Any solutions?

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: https://preview.webflow.com/preview/gilad-armon?utm_medium=preview_link&utm_source=designer&utm_content=gilad-armon&preview=0300581809086ef853b83c201ca07e05&pageId=5cb442b937cbae51f10b3481&itemId=5cb442b937cbae68120b34f9&mode=preview

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.

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 (https://stackoverflow.com/questions/34129707/href-mailto-is-not-working-on-any-of-the-browsers)

1 Like

Thanks so much @sabanna!

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

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

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

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

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

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

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!

3 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