Need Help With Share Buttons

Community resources General
1

Hi there

Just a quick one,
Why can’t I find any way to create these cloned links to actually links. I have been searching the internet for days but nowhere can I find anyone who answers this question. The most I found is people suggesting to use a third party which means I cant customize for my site.

Any ideas?

20
201336×1056 229 KB

2

Hey Grant! Hope you’re well.

2 questions:

  1. Can you share your read-only link?
  2. I think I understand what you’re trying to achieve, but can you explain a little further about the desired outcome when clicking on that Instagram icon?

Thanks in advance!

1 Like
3

Hi Thank you very much for the reply,

Read Only Link:
https://preview.webflow.com/preview/classicperspective?utm_source=classicperspective&preview=96793390751291f4a48c8605ddcb08c3

Okay so i understand with instagram there is no way to share, so i will have to change that to email. Sorry for the confussion. So I just need when someone reading the blog pushes the share buttons they are able to share to facebook, twitter, email.

many thanks
Grant

1 Like
4

Thanks for clearing that up! Makes total sense.

Check this out and let me know if it resolves your issue. https://webflow.com/blog/customizing-your-social-sharing-buttons-with-webflow-cms

5

blog posts - For me this code works fine (By embed html)

** remember to declare og:image, title, description (Read her)

Facebook

option 1
Change the img src to your icon path

<a title="share on facebook" class="social-icon facebook"  href="javascript:fbshareCurrentPage()" target="_blank">
  <img height="21" src="https:/facebook-icon.gif" alt="share on facebook button">
</a>

<script language="javascript">
    function fbshareCurrentPage()
    {window.open("https://www.facebook.com/sharer/sharer.php?u="+escape(window.location.href)+"&t="+document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false; }
</script>

option 2
(Official button style) - copy paste the code from her:

image

Option 3:

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

image
image1035×131 12 KB

For cms items -
inside encodeURIComponent -

write the base url (Your domain) +
collection url

image
image443×315 17.8 KB

& slug:

image
image531×452 13.9 KB

Twitter

<a title="Share on Twitter" href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a>
<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

twitter-share-button class will give you this design/style:
image

Or remove this class and use any image/text you want inside the button.

https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview.html

Share by EMAIL

For all windows users - click will open Outlook = nightmare.
Anyway share in this case is “regular” email (Title/subject). Try this:

Related: