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.

Read also:  Microsoft shuts down CodePlex on December 15th, 2017

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.



sprite

.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.

Summary
Article Name
Embed Facebook, Twitter, Google Plus Without JavaScript
Description
How to embed Twitter, Facebook or Google Plus on your WordPress website without using JavaScript to do so.
Author

Please share this article

Facebooktwittergoogle_plusredditlinkedinmail


Filed under:


Responses to Embed Facebook, Twitter, Google Plus Without JavaScript

  1. Transcontinental November 30, 2011 at 12:28 pm #

    This is an excellent thing, for the webmaster (faster loading pages) and for the user, for faster loading pages as well of course but also for more psychological reasons, when I know number of users who got upset with social networks because having to endure &page delay &tracking when they were neither affiliated nor even logged to the network (in their scripts why not first check if the user is logged in and, if not, stop the script? Don't tell me why!).

    When social networks will have understood that nothing should be done without the user's consent, without his active decision, then the reluctant will start wondering about the best of those networks instead of focusing on the worst.

  2. gadgets November 30, 2011 at 3:36 pm #

    Question : Martin, is it really true Google will punish those sites with tons of js code? Seriously?

    • Martin Brinkmann November 30, 2011 at 4:14 pm #

      External JavaScript in particular slows down a site, and yes, Google is using the page loading time in their algorithm.

  3. SFdude November 30, 2011 at 5:06 pm #

    good post, Martin!

    Alternative, maybe easier solution
    to get rid loading
    those Facebook & Twitter buttons:

    If you use AdBlock Plus in Firefox,
    you can subscribe to the
    "Antisocial " list,
    at:
    https://adversity.googlecode.com/hg/Antisocial.txt

    Check it out.

    • Martin Brinkmann November 30, 2011 at 5:12 pm #

      SFdude, I agree that using a blocker script like AdBlock or NoScript may be the better choice from a user perspective, considering that many sites do embed JavaScript code directly. For me as a webmaster though it makes sense to implement plain links.

      • SFdude November 30, 2011 at 5:48 pm #

        Martin, I agree.

  4. Waqas May 9, 2012 at 3:25 pm #

    Thats really great to have non-JavaScript sharing.but can we track social sharing using his method?. now a days we may want to keep google+ java script for site better result in google search

  5. Domina X July 24, 2012 at 3:03 am #

    Is it just me or is it "not really convenient" to have to decode all those LTs and GTs from your example?

    Anyway, good article. Just wish it would have been a bit more copy-and-past friendly. ;)

  6. David Bradley September 6, 2012 at 2:39 pm #

    This worked first time on my tech site, but for some reason not on my science site, which has WordPress in a sub-directory. I had another try today and lo and behold, it's functioning properly. Not sure what tweak did it, but it's working. A much slicker and faster solution to share buttons without the massive overheads of the likes of AddThis and Shareaholic plugins...thanks Martin!

  7. Lukas January 23, 2015 at 5:44 pm #

    I have found a way to add a twitter feed/wall on any site that dont support javascript/jquery the site i used is feed-generator com and i think this is the best solution right now.

Leave a Reply