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.

Advertisement