Are you looking for the most lightweight social share buttons for your WordPress website without any plugin? In this article, you’re going to learn how to install the fastest social share buttons that never slow down the load of pages on your website. On the other hand, it includes all of the known social media platforms.
Watch this video on lightweight social share buttons for WordPress
Install social share buttons on WordPress without any plugin
In April of 2023, I published an article on how to install social share buttons on WordPress without any plugin. If you study this article, you realize that there are still some resources that should be run for these social share buttons to appear and be functional on your website. Since website optimization is a high priority at LELB Society, which is a bilingual academy of English and Persian with over 270 registered members, I thought there could be even more room for further optimization.
Installing the most lightweight social share buttons
The CSS codes to target various elements of social media platforms and style them individually could make webpages load slowly. As a result, I decided to remove this fairly heavy load of HTTP requests and CSS codes from our web server and put it on the shoulders of AddToAny share buttons without calling for any external JavaScript.
AddToAny is one of the best and oldest providers of free online tools for websites and online applications. Its social share and follow buttons are installed on a great number of websites because they are simple, lightweight and stylish. However, as mentioned earlier in this article, I’m not going to show you how to install AddToAny social share buttons by using its external JavaScript. This is because any external JavaScript can tremendously increase the number of HTTP requests, thus slowing down your website to a noticeable extent.
PHP and HTML code to install the most lightweight social share buttons
Believe it or not, the only code you need to use on your website to install the fastest social share buttons is provided for you below. This code has been tested, optimized and currently installed on our WordPress membership website, and you can try it by scrolling down this page to reach the bottom of this article. I’m going to explain different parts of this code so that you could modify that according to your own needs.
<?php $url = urlencode(get_the_permalink()); $title = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8'); ?>
<div class="social-share"><a title="Share this page with your friends." target="_blank" href="https://www.addtoany.com/share#url=<?php echo $url;?>">Share This Page</a></div>Explaining the different parts of the code
With these guidelines, you can personalize social share buttons according to your own needs and interests.
- The first section or paragraph of the above code is a php code which is intended to get the permalink of any page that you’d like to share.
- The <div class=”social-share”> … </div> is used to assign a css class to this html code so that you could style it with css. The css code is also provided below.
- <a title=”Share this page with your friends.” is used to put a title on the installed lightweight social share buttons, which is visible by hovering the cursor of your mouse on the social share button.
- target=”_blank” is used to open the AddToAny share buttons page in a new window or tab. This method is highly recommended because the user will stay on your website after sharing your pages.
- href=”https://www.addtoany.com/share#url=<?php echo $url;?> opens a new window or tab to AddToAny share buttons page and fetches the url of the page that needs to be shared with the php code in the first paragraph.
- Share This Page is the visible text on the lightweight social share buttons on your website. You can also add icons from Font Awesome or emojis from Emojipedia to your lightweight social share buttons.
Where to add this code?
As a website developer, you need to install this code, which is responsible for lightweight social share buttons, at the bottom of your pages and posts. On WordPress, you need to go to the dashboard area as an admin. Then navigate to Appearance and Theme File Editor. This code should be added to the end of page.php and single.php files of your currently active theme.
How to get social share buttons from AddToAny
The above code should work on any html-based website. However, you can obtain fastest social share buttons from AddToAny website on your own in the following steps:
- Go to AddToAny website.
- On the main menu, select ‘Get’, and then select ‘Any Website’.
- Select the type of Share Buttons from the drop-down menu.
- In the Buttons row, click on ‘More’, and select ‘Share’.
- Do not select ‘Get Button Code’. Instead, choose ‘More Options’.
- The only field that must be completed is ‘Page url’, which should be the url of your homepage, e.g. https://www.lelb.net/.
- Make sure to choose ‘No script (basic links)’ option before hitting the ‘Get Button Code’.
The only problem of this method is that it can share only the homepage or any specified page url of your website. However, the code developed and provided by me can literally share any page that any user is browsing. I should add that I personally believe installing fancy and heavy social share buttons is certainly not one of the best practices. These days, I can see many popular websites without any social share buttons at all.
How to style social share buttons with CSS
Now it’s time you used the following CSS code to style your lightweight social share buttons on your website. Please note that the following CSS code has already been optimized and minified on this free CSS Minifier Tool. You just need to copy and paste this code into the Additional CSS section of your WordPress Customizer or in your child theme if you’re using any.
.social-share{color:#fff;font-weight:700;font-size:26px;background:#99004d;border:4px solid #603;border-radius:15px;text-align:center;max-width:210px}.social-share a,.social-share a:hover{color:#fff}
