Custom Facebook Sharing Button

Design help Custom code
1

Hi guys,

I ve used a code from http://wb-social-sharing-concept.webflow.io/ to integrate a custom facebook sharing button to the site I m working on. Works perfect for Chrome and Safari but for Firefox the sharing pop up doesn’t open.
Any advices to fix this? Thanks guys.

Unfortunatly its a bit tricky cause I cant share a read only link or something like that because our company want to keep the project as secret as possible.

Best,
Max

2

Remove the target attribute from the facebook share link. @Waldo

3

@samliew thanks a lot! not it works but the original window is showing that sort of message:

4

Ugh, I just realized that snippet is incomplete.

Take this:

href="javascript:return fbshareCurrentPage();"

or this:

href="javascript:fbshareCurrentPage();void(0);"

Also, feel free to contact me for further code help and/or customization of third-party plugins

2 Likes
5

@samliew Thanks! the second one works perfect!

6

@samliew @Waldo i just realised that it shows a weird image, is there a possibility to change the image when people share the page?

7

Great question @Edelkollektiv you actually just need to update your Open Graph image: Open Graph settings | Webflow University

Facebook also offers a handy debugging tool to scrape the new OG image when it’s ready: Sharing Debugger - Facebook for Developers

1 Like
8

tried everything from http://wb-social-sharing-concept.webflow.io/ for 30 minutes. no luck. i just see an empty space in my website where the share button should be.

In the code I copied from http://wb-social-sharing-concept.webflow.io/ - I changed the class to the link block class I just created; and I also changed the href link per @samliew above — this also didn’t display anything.

9

For anyone having issues in 2020 this is what I set up the other day and it works fine.

Facebook:
Give your Facebook button an ID of facebook-button:
image
Add the follwing code snippet to the body code of the page in question:

<script>
    const facebookButton = document.getElementById('facebook-button');
    facebookButton.setAttribute('target', '_blank');
    facebookButton.setAttribute(
        'href',
        `https://www.facebook.com/sharer/sharer.php?u=${window.location.href}`
    );
</script>

Twitter:
Give your Twitter button an ID of twitter-button:
image
Add the follwing code snippet to the body code of the page in question:

<script>
    const twitterButton = document.getElementById('twitter-button');
    twitterButton.setAttribute('target', '_blank');
    twitterButton.setAttribute(
        'href',
        `https://twitter.com/share?url=${window.location.href}`
    );
</script>

Linkedin:
Give your Linkedin button an ID of linkedin-button:
image
Add the follwing code snippet to the body code of the page in question:

<script>
    const linkedinButton = document.getElementById('linkedin-button');
    linkedinButton.setAttribute('target', '_blank');
    linkedinButton.setAttribute(
        'href',
        `https://www.linkedin.com/shareArticle?mini=true&url=${window.location.href}&title=${document.title}`
    );
</script>
5 Likes
10

It is possible to insert custom text and tags in this solution?

11

Can you provide an example of what you’re looking to do?

12

Right now the codes above are just sharing links. Could we have some preset message in the post as well?

13

You would have to see which query string parameters the platforms support. I think nowdays they get more or less all the info from the OG meta tags rather than you explicitly setting query string parameters.