Facebook, Twitter, Linkedin sharing buttons - working in 2020

Design help Custom code
1

For anyone looking to create custom social sharing buttons, this is what I set up for a project recently and is working well. Posted here originally but making a new topic where this won’t be buried so far down in comments.

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>
6 Likes
2

This is great! Thank you so much for putting this together! I really appreciate it!

Is there a workaround to have these twice on one page? I would love these to be at the top of a blog and at the bottom. But when I add the ones to the bottom, they don’t work :confused: I’m guessing because there can only be on ID on one page?

3

Hi again @jasondark
If I would like to not share the current page, but write a text with another link. How would the code look like? I’m specifically looking for the Twitter share button.

I’m guessing there is something in here: ‘href’,
https://twitter.com/share?url=${window.location.href}

But I cant figure it out. Hope you can help and that its not too much trouble :slight_smile:

4

Yes, you would have to use something other than IDs for selectors. Maybe use a class name or data attribute. Then you would need to alter the script to reference all the buttons and apply the sharing logic to each.

This is an example for Twitter share buttons using a class name selector instead of ID. The class name is twt-btn:

<script>
    const twitterButtons = document.querySelectorAll('.twt-btn');
    twitterButtons.forEach(btn => {
        btn.setAttribute('target', '_blank');
        btn.setAttribute('href', `https://twitter.com/share?url=${window.location.href}`);
    });
</script>
1 Like
5

Yes you would just alter the href to be whichever URL you want. If you wanted to share these forums for example:

    btn.setAttribute('href', `https://discourse.webflow.com/`);
1 Like
6

@jasondark Do you also working on adding comment to the blog post? I stuck there.

7

I’m not sure what you mean, is it regarding these sharing buttons?

8

It’s a bit unrelated question. I want to add the comment section in my blog post. Do you might know how to do it? The share buttons work well by the way.

9

Maybe search the forums because this topic has been covered quite a bit. Most people seem to use Disqus which you can embed on each blog post.

10

I did it. Thank you!

11

Thank you so much @jasondark!
Really appreciate it! <3

1 Like
12

@jasondark is there a way to change the description & add an image to the post when using this script? It works perfectly so far but it looks kind of ugly and the description is a random piece of text on the page.

thanks in advance!