Embed Facebook, Twitter, Google Plus Without JavaScript

Search engines like Google Search use a page's loading time as a signal when they compute that page's ranking in their search engine results. Webmasters have a lot to tweak, from the server backbone to the scripts they use and embed, and the images and media they post; Everything has an impact on the page loading time. Social media buttons have become very popular with webmasters in recent years. The majority implements the buttons either with the help of plugins or by copying and pasting the code that social networks like Facebook offer directly.
The majority of methods use JavaScript to trigger the functionality. The issue here is that external scripts increase the page loading time. If you load to many scripts, your website could be punished for this by the search engines by reducing the page's position in the rankings. Depending on the number of social media buttons that you embed, you could be loading multiple external JavaScript files.
But JavaScript can also be used for tracking purposes. Visitors who load a web page with external JavaScript will always at least pop up in the external service's access logs.
The only positive effect for the webmaster is that users can vote for their articles on the linked social networking sites. But this is also achievable without JavaScript. The benefit of that solution? Faster page loading times and guaranteed no user tracking.
The following solution has been created by Daniel Pataki. It is a solution for WordPress, if you use a different script or software you may need to modify the code accordingly.
The code consists of two parts. First CSS code that you need to add to your blog's stylesheet, and then the code that displays the links to the social networking sites on the website.
CSS Code:
You need the following sprite image that contains all four icons. This speeds up the loading time as only one image needs to be loaded instead of four separate ones. Place it in the /img/ directory of your theme folder or alter the background:url code to place it somewhere else.
.social_icon {
background:url("img/sprite.png");
display:block;
width:33px;
float:left;
margin:0 3px 0 0;
height:32px;
opacity:0.8;
filter:alpha(opacity=80);
}
.social_icon:hover {
opacity:1;
filter:alpha(opacity=100)
}
.social_icon.twitter {
background-position:-33px 0;
}
.social_icon.googleplus {
background-position:-99px 0;
}
.social_icon.print {
background-position:-66px 0;
}
WordPress single.php code
You need to add the following code to WordPress' single.php file.
<div class='social'>
<a href='http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>' class='social_icon facebook' rel="nofollow"></a>
<a href='https://twitter.com/share?url=<?php the_permalink() ?>' class='social_icon twitter' rel="nofollow"></a>
<a class='social_icon googleplus' href="https://plusone.google.com/_/+1/confirm?hl=en&url=<?php the_permalink() ?>" rel="nofollow" ></a>
<a href='javascript:window.print()' class='social_icon print'></a>
<div style='clear:both'></div>
</div>
The functionality should be available immediately. Users who click on a social networking icon are taken to the selected site where they can post about the web page that they have originated from. The page url is automatically included in the post.
I hope this helps some of you out there who want to offer functional social networking buttons without the JavaScript.
Update: Have added rel="nofollow" to all external links.

Martin, I would appreciate that you do not censor this post, as it’s informative writing.
Onur, there is a misleading statement “[…] GIFs are animated images …”. No, obviously you don’t seem to have take much notice of what you were told back in March regarding; Graphics Interchange Format (GIF).
For example, https://www.ghacks.net/2023/03/31/whats-gif-explanation-and-how-to-use-it/#comment-4562919 (if you had read my replies within that thread, you might have learnt something useful). I even mentioned, “GIF intrinsically supports animated images (GIF89a)”.
You linked to said article, [Related: …] within this article, but have somehow failed to take onboard what support you were given by several more knowledgeable people.
If you used AI to help write this article, it has failed miserably.
AI is stupid, and it will not get any better if we really know how this all works. Prove me wrong.. https://www.youtube.com/watch?v=4IYl1sTIOHI
Martin, [#comment-4569908] is only meant to be in: [https://www.ghacks.net/2023/07/09/how-to-send-gifs-on-iphone-two-different-ways/]. Whereas it appears duplicated in several recent random low-quality non relevant articles.
Obviously it [#comment-4569908] was posted: 9 July 2023. Long before this thread even existed… your database is falling over. Those comments are supposed to have unique ID values. It shouldn’t be possible to duplicate the post ID, if the database had referential integrity.
Don’t tell me!
Ghacks wants the state to step in for STATE-MANDATED associations to save jobs!!!
Bring in the dictatorship!!!
And screw Rreedom of Association – too radical for Ghacks maybe
GateKeeper ?
That’s called “appointing” businesses to do the state’s dirty work!!!!!
But the article says itself that those appointed were not happy – implying they had not choice!!!!!!
@The Dark Lady,
@KeZa,
@Database failure,
@Howard Pearce,
@Howard Allan Pearce,
Note: I replaced the quoted URI scheme: https:// with “>>” and posted.
The current ghacks.net is owned by “Softonic International S.A.” (sold by Martin in October 2019), and due to the fate of M&A, ghacks.net has changed in quality.
>> ghacks.net/2023/09/02/microsoft-is-removing-wordpad-from-windows/#comment-4573130
Many Authors of bloggers and advertisers certified by Softonic have joined the site, and the site is full of articles aimed at advertising and clickbait.
>> ghacks.net/2023/08/31/in-windows-11-the-line-between-legitimate-and-adware-becomes-increasingly-blurred/#comment-4573117
As it stands, except for articles by Martin Brinkmann, Mike Turcotte, and Ashwin, they are low quality, unhelpful, and even vicious. It is better not to read those articles.
How to display only articles by a specific author:
Added line to My filters in uBlock Origin: ghacks.net##.hentry,.home-posts,.home-category-post:not(:has-text(/Martin Brinkmann|Mike Turcotte|Ashwin/))
>> ghacks.net/2023/09/01/windows-11-development-overview-of-the-august-2023-changes/#comment-4573033
By the way, if you use an RSS reader, you can track exactly where your comments are (I’m an iPad user, so I use “Feedly Classic”, but for Windows I prefer the desktop app “RSS Guard”).
RSS Guard: Feed reader which supports RSS/ATOM/JSON and many web-based feed services.
>> github.com/martinrotter/rssguard#readme
We all live in digital surveillance glass houses under scrutiny of evil people because of people like Musk. It’s only fair that he takes his turn.
“Operating systems will be required to let the user choose the browser, virtual assistant and search engine of their choice. Microsoft cannot force users to use Bing or Edge. Apple will have to open up its iOS operating system to allow third-party app stores, aka allow sideloading of apps. Google, on the other hand, will need to provide users with the ability to uninstall preloaded apps (bloatware) from Android devices. Online services will need to allow users to unsubscribe from their platform easily. Gatekeepers need to provide interoperability with third-parties that offer similar services.”
Wonderful ! Let’s hope they’ll comply with that law more than they are doing with the GDPR.