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

More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)

Transcript

Introduction

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

Integrating Simple Social Media Links

Dominik 0:18

. 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

Share Buttons for Specific Pages and Posts

Dominik 0:43

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

Considerations for Privacy & Performance

Dominik 2:09

, 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

DIY Integration vs. Using Plugins

Steffen 5:42

. 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

Finding Non-Javascript Share Links

Dominik 7:33

.

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 .