Embed Facebook, Twitter, Google Plus Without JavaScript - gHacks Tech News

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.

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
Embed Facebook, Twitter, Google Plus Without JavaScript
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
Advertisement

We need your help

Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.

If you like our content, and would like to help, please consider making a contribution:


Previous Post: «
Next Post: »

Comments

  1. Transcontinental said on November 30, 2011 at 12:28 pm
    Reply

    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 said on November 30, 2011 at 3:36 pm
    Reply

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

    1. Martin Brinkmann said on November 30, 2011 at 4:14 pm
      Reply

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

      1. gadgets said on November 30, 2011 at 4:44 pm
        Reply

        Alright, I will reduce those jscript on my blog which is use for tutorial and demo purpose.

      2. Martin Brinkmann said on November 30, 2011 at 5:12 pm
        Reply

        You should try to benchmark your website’s page loading time, for instance with the help of this tool to see if removing scripts has an effect: http://www.websiteoptimization.com/services/analyze/

  3. SFdude said on November 30, 2011 at 5:06 pm
    Reply

    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.

    1. Martin Brinkmann said on November 30, 2011 at 5:12 pm
      Reply

      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.

      1. SFdude said on November 30, 2011 at 5:48 pm
        Reply

        Martin, I agree.

  4. Waqas said on May 9, 2012 at 3:25 pm
    Reply

    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 said on July 24, 2012 at 3:03 am
    Reply

    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 said on September 6, 2012 at 2:39 pm
    Reply

    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 said on January 23, 2015 at 5:44 pm
    Reply

    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

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

Please note that your comment may not appear immediately after you post it.