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.
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*/
}
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.
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 the following example I have masked the ID with x-characters:
<script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>
Learn more →<a target="_blank" href="https://www.instagram.com/blaustern_fotografie/">
<i class="fab fa-instagram-square"></i>
</a>
.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.
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.
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.
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.
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.
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.
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — start monitoring for free.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Compare Prisma and Drizzle ORMs to learn their differences, strengths, and weaknesses for data access and migrations.
It’s easy for devs to default to JavaScript to fix every problem. Let’s use the RoLP to find simpler alternatives with HTML and CSS.
Learn how to manage memory leaks in Rust, avoid unsafe behavior, and use tools like weak references to ensure efficient programs.
Bypass anti-bot measures in Node.js with curl-impersonate. Learn how it mimics browsers to overcome bot detection for web scraping.
