6 ways to integrate social media buttons into your website

Do you want to make visitors of your website aware of your social networking channels? Do you want your article to be shared on the social networks? Then you need clickable social media symbols (icons) and the corresponding like and share buttons for each platform.

In the following article, I would like to show you a few possibilities to make your website fit for social networks.

Embed social media icons as images

You can easily embed the social networking icons as images on your website and then link them to the addresses of your channels. But where do you get them? There are many good websites on the Internet where you can download the symbols in various forms as image files for free.

I recommend the page iconfinder.com, for example.

Here, you can simply enter the name of the desired icon (e.g. “instagram”) and you will get a list of free downloadable image files in very good quality.

A list of other good suppliers of icons or icon sets can be found at buffer.com.

Now I will show you how to embed an icon into your website. We assume that an icon named “instagram.png” is located in the same folder as your HTML file.

Then, you can use the following code snippet:

<a target="_blank" href="https://www.instagram.com/blaustern_fotografie/">
 <img src="instagram.png">
</a>

The a-tag is used to make the icon a link. Of course, you have to replace the address shown above with the address of your own Instagram profile. By setting the property target="_blank", you make sure that the profile opens in a new browser tab.

If the icon is located in a subfolder relative to the HTML file (e.g. “icons”), the path of the image must be adjusted accordingly:

<img src="icons/instagram.png">

Of course, you can resize your icons to fit your needs. I recommend you to define a CSS class for all icons that belong to a common group, e.g. "sm_icon":

<img class=“sm_icon“ src="icons/instagram.png">

In the CSS part of your website you can then customize the size of the icons. But make sure that you do not exceed the resolution of your icon image files, otherwise the images will look blurred.

.sm_icon{
 
  width: 50px;
  /* the height is adjusted automatically*/
}

Choice of the image format: PNG or SVG?

You will notice that the image files are available in different types of file formats, such as JPG, GIF, PNG or SVG. The file types have different characteristics and thus also certain advantages and disadvantages for the use in websites.

We divide them into raster-based formats (JPG, GIF, PNG) and the vector-based format SVG. Raster-based formats have a fixed resolution with a certain height and width in pixels.

With these formats, you must always be careful to select the appropriate resolution depending on the resolution and zoom level of your screen and the size of the image you want to display on the website.

If you exceed the resolution when zooming in, the image will appear blurred or pixelated.

This can happen, for example, if you download an icon with a resolution of 64x64px from Iconfinder and then define a width of 200px in the CSS settings.

With the SVG format, on the other hand, there is no predefined resolution. A vector image can always be scaled to the desired size with no loss of quality.

Thus, all screen sizes and zoom levels can be handled with one and the same file. You can treat vector images just like any other image format and include them as img-tags with the desired height and width in your HTML code:

<img class=“sm_icon“ src="instagram.svg">

If you still have to use a pixel-based format, I recommend the PNG format. Compared to JPG or GIF, it supports transparent image areas, which are often needed for icons and logos.

Embedding social media icons as font

As alternative to image files, icons can also be integrated using a font library. The advantage is that the icons can then be formatted in the same way as normal text.

I will explain the procedure using the library “Font Awesome” as an example:

Create a free user account at https://fontawesome.com/ (this is now a requirement for importing free or paid icons).

• In your account, you will now find the “Kits” section. Your new kit has an ID, which consists of several numbers and letters. After clicking on the kit, you will be presented with the script code that you need to insert between the head tags of your HTML page to import the library.

In the following example I have masked the ID with x-characters:

<script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>

• Then you can search for icons, e.g. “instagram”. For each icon, you will find instructions on how to include it in the HTML code. I have decided for the icon with the name “instagram-square”, which is included as shown below.

<a target="_blank" href="https://www.instagram.com/blaustern_fotografie/">
    <i class="fab fa-instagram-square"></i>
</a>

• You can style your icon with CSS, for example with a different font size or color:

.fa-instagram-square{
    color: green;
    font-size: 18px;
}

Please note that the link to the font awesome script establishes a connection to an external server. This may involve the transmission of personal data of your website visitors to Font Awesome.

Depending on which legal regulations apply (e.g. gdpr), you may have to inform your users about this service. Or you can play it safe and host the library yourself. Information about this can be found here: Hosting Font Awesome Yourself

As an alternative to Font Awesome I can recommend the material icons from Google. The integration of the icons here is very similar to Font Awesome.

Integrate social media buttons (like, share) manually for different platforms

If you want to include like, share, and other interactive buttons from Facebook, Twitter and Co., you have to use special HTML code provided by the individual platforms.

• On the page Facebook for Developers, you can generate the HTML code for the different Facebook buttons.
• On the page Twitter for Websites, you will find instructions for embedding Tweet buttons, Follow buttons or for embedding Tweets.
• Other networks like Instagram, Pinterest, LinkedIn also offer you the possibility to embed buttons or widgets into your website.

Remember that the embedded code may transmit the personal data of your website visitors to the respective platform even without having them registered there! Depending on the legal situation, you have to take certain steps here.

For example, obtain the consent of your visitors or inform them about the use of the external code in a privacy policy. It is also advisable to refer your users to the data protection policies of the individual platforms.

Integrate social media buttons with the help of special providers

Under a post, you will often find a whole range of social media buttons. It is very time-consuming to manually insert the given code of the respective platform for each individual button. Therefore, you can find providers who do this work for you. All you have to do is embed a certain script into your page and define the location where the social media button bar should appear.

An example of this is sharethis. After the free registration you can create a button bar with up to 43 social media buttons!

Once you have made a few individual settings (e.g. language, information displayed on the buttons) and visual adjustments (e.g. color, corners, spacing), you will get a custom script from sharethis, which you can embed in the header area of your page.

This script will of course establish a connection to the sharethis server. You should inform the visitors of your site about this in your privacy policy. You can also redirect them to https://sharethis.com/privacy/.

There you will find an information about which user-related data is collected by sharethis. Please be aware that there is an “Opt-Out” button on this page, which can be used to prevent the display of user related ads based on data collected by sharethis.

Important: You must also inform your users about the privacy policies of the individual platforms such as Facebook, Twitter, etc., because sharethis transfers the users’ data to the respective platforms.

An alternative provider is addtoany. The choice of buttons is even bigger here and you can get the code even without registration.

Regarding data protection, the same recommendations apply as for sharethis. Information about the collection and use of user related data is provided at https://www.addtoany.com/privacy.

There are of course many more providers, such as addthis.

Social media plugins for WordPress

There is even more variety in the area of social media plug-ins for WordPress. You can inform yourself about the different plugins here:

wpbeginner: 10 Best Social Media Plugins for WordPress (2020)

In addition, the providers sharethis and addtoany also offer their services as a WordPress plugin.

Of course, you again have to pay attention to the privacy policy or the agreement of your users when using the social media plugins.

Conclusion

As you can see, it is not difficult to integrate interactive social media buttons into your website. You can insert the buttons manually or rely on the support of various plugin providers. It’s best to choose the option that is easiest for you! If you also pay attention to privacy, you are on the safe side.