Never Integrate Social Media Buttons Like This

There's a clear winning approach when it comes to integrating social media share buttons into your website. Learn how to do it quickly, easily and safely.

Highlights
00:00 Introduction
00:18 Integrating Simple Social Media Links
00:43 Share Buttons for Specific Pages and Posts
02:09 Considerations for Privacy & Performance
05:42 DIY Integration vs. Using Plugins
07:33 Finding Non-Javascript Share Links

Steffen: 0:00

Hey Dominik. What is the best way to integrate social media buttons into your WordPress website?

Dominik: 0:09

Oh, Steffen, hey, that depends, of course, like always. Yeah, so I mean, there are multiple ways to do that right. You can have, like simple links to your social media sites, like to your profile, the company profile, or whatever, in your footer, in your header, and so on. This is like the first thing that you would normally do. That doesn't really require much, because this can just be an anchor tag, a button, anything that will open, most likely, a new window, a new tab for the social media site.

Dominik: 0:42

But you also might want to integrate it on single pages, on single posts, in order for your visitors to share articles more easily or to like a content, like stuff that already has been shared on the social media platforms yeah, and this is usually the the more complicated thing to do and you, most of the time, I would say, people use plugins for that, like there are tons of different plugins that support multiple social media platforms and these you can use and they, a lot of the times, they also require you to have like an app in this social media, a network, or in the social network in order to connect your WordPress and we've talked about this like your WordPress instance to your account, right, but actually this is a lot of the time overkill and there are just links as well.

Dominik: 1:40

Those are usually like a bit hidden and not really present in the documentation, but these provide a big advantage when you want somebody to share content, share your site on a social network, because it doesn't load any, any scripts or any external things, and this is something you always have to keep in mind as well.

Dominik: 2:00

And do you know why? Why? That is why, yes, well, this is also a topic we've talked about quite often already, but you have to take the GDPR into consideration or any other like privacy laws that apply to where your visitors come from. And usually how these plugins or share buttons work is that they take, like some snippet, some html element and load javascript and convert this element into a share button, and this actually loads javascript from the servers of the social network and thus are like, you need your visitor to actually confirm that it's okay for them to do that right. It's not only about cookies, it's also about the request, because you're transmitting an IP address and so on.

Dominik: 2:53

So this is again a bit controversial, probably, and we've gone into that in the past as well, but in general, I would say, every time that you integrate a social media share button via javascript so with the sdks that the social network provides then you need your visitor to confirm this before, or to agree to that before you actually do that right, and there are multiple ways again to do that.

Dominik: 3:21

You might have a cookie notice at the beginning, like a kind of consent management tool to get the the info right upfront. Then you can also say okay, when you click the share button, that only then you will tell the visitor, with clicking that you will be transferred to external website and so on. So again, multiple ways to do that and, from what we have seen, and also because of performance considerations, usually those solutions are the best where you don't actually load any javascript, any sdk, but you open a window or like a new window with the share url that has your url, with the url that you want to share, like already set up, and open in a new window with a small notice actually before you open, that that you will leave your website right.

Steffen: 4:13

So I think share buttons that were coming from the social networks used to be much more popular when you had much more control over what was shared, like, for example, you were able to pre-fill the text box with your own custom text that you want people to share. But most social networks deprecated this kind of feature and just said, okay, no, please use the OMBAT information only, kind of or we're scraping that anyways from your website and let the people themselves decide what kind of content we want to they want to share actually. And since then, yeah, it doesn't make a huge difference anymore If you use the given SDK and buttons from a social network or you build it yourself, because it's just this link that gets opened in a new tab or in a pop-up window. I just found out also that Facebook or Meta added a huge disclaimer to their website when it comes to integrating a like button or also a share button, and there they say, specifically for the like button, that there are changes in regards to people visiting from the European Union, in regards to the GDPR and so on, and that people will not see that button if they did not consent, and so on, but at the same time, still to find that out.

Steffen: 5:35

Likely they might need to do some kind of request and get still some kind of information. So I would still not rely on that. So my recommendation is that I would not use given plugins and given solutions from social networks, but to just integrate it yourself. Get yourself the logos of those social networks, preferably as an SVG, and, yeah, in the easiest case, just like have this share link open in a new tab, and then you don't compromise on speed, on page speed, don't compromise on privacy and it's very maintainable for you and actually quick to build.

Dominik: 6:22

Yes, I totally agree. I mean, there are always also like these guidelines, how a share button should look and so on, right, but you always have some room to play with that, right. And it's usually easier to make this thing yourself and then have just a URL open up, because the moment that you want to integrate, like the SDK and so on, I think it's always a pain to then create these apps in every social network so that you can use their authentication, then you have to allow it to get certain user information and so on.

Dominik: 7:00

And well, even if you don't want to like sign in with or use the login feature, but just for like accessing your app data or your profile data, and that's why usually it's a lot easier to build it from hand it is, however, as I said before, a little difficult sometimes to get some information about that right. A lot of the times, you find information on this on Stack Overflow, if you like search for a non-Java script way to share an article or URL on this network.

Steffen: 7:33

Let's maybe look at that together. On the example of Meta, the way I would typically try to find it out versus through the official documentation so going to the Meta for developers site share button and then here's the share button configurator, and we don't want to use the actual share button, but let's still try to get some code and see what it gives us here and there. With the proposed JavaScript solution, you will see here actually the share link facebookcom, slash share, slash share dot. Php, and then you, and then this is the encoded URL right, and this is what you would need to change the value for the you get param here to and that this should be then your URL right, and then you don't have to use all this wrapping, div and JavaScript and so on, but only create a link opening in a new tab or, if you want to do a more advanced version, to open a pop up with JavaScript yourself and pass that link.

Dominik: 8:40

Yeah, can you. Can you click on the iframe solution for a second?

Steffen: 8:43

Yeah, I don't see it because I did not consent.

Dominik: 8:48

Okay, good, no, because you could also use that to actually have like an overlay on your website, right, so you could make it more seamless even so, that it almost feels like the real, like Facebook integration. You would just, but you could probably also use the same link. I haven't done this for a while, to be honest, and you can probably use the same link that you use in a new window you could also use in a in a small pop over modal box. Good, anything else we forgot about?

Steffen: 9:25

I don't think so. I think that's it about share buttons and integrating them into WordPress websites.

Dominik: 9:31

Yeah, so, and if you want to have more information about, like, a specific social network or have any issues finding the right URLs to integrate, just leave a comment below and we'll see if we can help.

Siegfried, deploy!

Never Integrate Social Media Buttons Like This

Listen to this podcast on