Robin Parduez | Blog » wordpress

Load Social Sharing Buttons via Ajax & jQuery

Robin Parduez — Wed, 19 Oct 2011 13:10:22 +0000

I’ve recently been doing a lot of testing to improve page load times using various different techniques. However, I’ve been finding on my own sites and when I visit others, that social media buttons often cause a lot latency on page loading. When it first launched, there were a lot of complaints about the Google+ button slowing down pages significantly. Some SEOs even claimed a drop in rankings, although it’s difficult to verify this. It’s worth noting that Google released an updated version of the button which does load faster.

In the past I’ve covered Google’s take on Page Speed and search rankings, and whether it is becoming a more important feature of the algorithm remains to be seen. Speeding up page load times is good for users, and with rich-media and other bandwidth intensive features on websites continuing to increase, any SEO-friendly way to speed up your pages is a good thing.

Like many other website owners, I have added social interaction buttons to my blog posts, but I have never been happy with the extra lag this causes on page loads.

There are several methods being used by various sites that delay the loading of the social buttons until needed. This can be via the lazy loading technique or by using Ajax to call in the buttons when needed. With this in mind, I have worked on my own solution which I’m going to share with you today.

The following method uses the jQuery framework, and loads the social buttons using an Ajax request when a user hovers over the buttons with their mouse. I have also added a click function for tablets and smartphones, as a mouse hover event is pretty useless on such devices.

View Demo → Download Source Code →

How To Guide

New Improved Code based on feedback in the comments: 30th November 2011

Add the following JavaScript code to the HEAD section of your page:

In your page, add a DIV that contains images of the social buttons as follows (this block will be replaced with the live social buttons when the user hovers over the buttons or clicks for touch devices):
```
   
   
  
```
Finally, create an external file that contains the live social buttons that will replace the above button images. Save the file as social-button-loading.html and save it in the root for your site, I.e. www.example.com/social-button-loading.html. This external file should look as follows:
```
   
  
  
```

I hope you find this useful, and I’d love to hear what impact this has on page load times for you, so please drop me some feedback in the comments below.

Feel free to tweak the code and extend the functionality if you find other uses for it. I’m keenly interested in how this impacts on load times and overall SEO health for websites, so please share your results.

SimplePie & jQuery Flickr Photostream

Robin Parduez — Mon, 05 Sep 2011 14:10:29 +0000

If you want to display a number of photos on your website, jQuery Infinite Carousel is a very good option. This carousel works really well when you have a list of images on your page, but it threw up a number of problems when calling images dynamically on page load (I.e. your latest Flickr Photostream).

After making some of my own tweaks, and combining the carousel with SimplePie RSS feed parsing, I’ve now got a very nice carousel slider that works well across most (modern) browsers.

The following code uses SimplePie to parse the Flickr feed, cache the images into a folder, and then dynamically pull the images into the HTML on page load.

I also setup a cronjob to automatically update the cache on a weekly basis (I don’t update my Flickr account anymore than that).

This fixed the issue with the carousel and sped up page loads because the images are called from a cache folder rather than being downloaded each time from the Flickr API.

It’s important that the cronjob is in place; otherwise SimplePie will parse the Flickr feed on each load (or however often you set the cache to expire). I covered this in a previous post regarding parsing of Google Reader shared items.

See demo here →

How to do it

1. Download carousel.js from here and upload to a folder on your server (I.e. www.example.com/js/carousel.js)

2. Download SimplePie here and follow the instructions for installing SimplePie on your server.

3. Create a PHP page made up of the following elements (I’ve commented within the code with some specific instructions) and upload it to your server:

PHP: Place this code at start of HTML page

set_feed_url($url);

// This allows the cronjob to handle image caching rather than slow page loads as SimplePie parses the feed each time
$feed->set_cache_duration(999999999);
$feed->set_timeout(-1);

// Change the location below to where you have placed your cache folder and CHMOD the cache folder to 755 or 777
$feed->set_cache_location($_SERVER['DOCUMENT_ROOT'] . '/folder/cache');
$feed->init();

$feed->handle_content_type();

function image_from_description($data) {
  preg_match_all('/]*)>/i', $data, $matches);
  return $matches[1][0];
  }

  function select_image($img, $size) {
    $img = explode('/', $img);
    $filename = array_pop($img);

    $s = array(
    '_s.', // square
    '_t.', // thumb
    '_m.', // small
    '.',   // medium
    '_b.'  // large
    );

 $img[] = preg_replace('/(_(s|t|m|b))?\./i', $s[$size], $filename);
 return implode('/', $img);
 }
?>

HTML/PHP: The rest of the HTML page looks like this




  
  SimplePie and Infinite Carousel Example
  
  
  
  


  SimplePie and Infinite Carousel Example
  
  
  
  get_items() as $item): ?>
  get_enclosure()) {
    $img = image_from_description($item->get_description());

/* Choose image size you want to link to (full_url) and display in carousel (thumb_url)
    $full_url = select_image($img, 3);
    $thumb_url = select_image($img, 0);
      echo ''."\n";
    }
  ?>

CSS: Create an external stylesheet like this

.infiniteCarousel {
	width:533px;
	position:relative
}
.infiniteCarousel #flickrgallery {
  /* .infiniteCarousel width - (.wrapper margin-left +
  .wrapper margin-right) */
  width:465px;
  overflow:auto;
  height:110px;
  margin:0 34px;
  position:absolute;
  top:0
}
.infiniteCarousel ul a img {
  border:5px solid #fff;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px
}
.infiniteCarousel #flickrgallery ul {
  width:840px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  position:absolute;
  top:0
}
.infiniteCarousel ul li {
  display:block;
  float:left;
  padding:0 10px 0 0;
  height:85px;
  width:85px
}
.infiniteCarousel ul li img {
  -moz-transition:border-color 400ms;
  -webkit-transition:border-color 400ms;
  transition:border-color 400ms;
}
.infiniteCarousel ul:hover li img {
  border-color:#fff
}
.infiniteCarousel ul:hover li:hover img {
  border-color:#fff
}
.infiniteCarousel ul li a img {
  display:block
}
.infiniteCarousel .arrowflickr {
  display:block;
  height:85px;
  width:30px;
  /* Add images for forward/back arrows & use negative text-indent 
  to hide arrow characters - uncomment CSS below as necessary */
  /*background:url("http://www.yourwebsite.com/images/arrows.png") no-repeat;
  text-indent:-9999px;*/
  position:absolute;
  top:0;
  cursor:pointer;
  outline:0;
  border:0
}
.infiniteCarousel .forward {
  background-position:-830px -1020px;
  right:0
}
.infiniteCarousel .back {
  background-position:-830px -1128px;
  left:0
}
.infiniteCarousel .forward:hover, 
.infiniteCarousel .back:hover {
  background-color:#fff
}

4. Create the following cronjob PHP file which will tell SimplePie to parse the feed at the time(s) you specify (For a discussion of cronjob see previous post):

set_feed_url($url);

	// Tells SimplePie to update cache every time PHP file is loaded. Cronjob handles specific times that this page is loaded
	$feed->set_cache_duration(0);
	$feed->set_timeout(5);

	// Change the location below to where you have placed your cache folder and CHMOD the cache folder to 755 or 777
	$feed->set_cache_location($_SERVER['DOCUMENT_ROOT'] . '/folder/cache');
	$feed->init();
	$feed->handle_content_type();
	function image_from_description($data) {
    preg_match_all('/]*)>/i', $data, $matches);
    return $matches[1][0];
	}
	function select_image($img, $size) {
    $img = explode('/', $img);
    $filename = array_pop($img); 
    $s = array(
        '_s.', // square
        '_t.', // thumb
        '_m.', // small
        '.',   // medium
        '_b.'  // large
    );
    $img[] = preg_replace('/(_(s|t|m|b))?\./i', $s[$size], $filename);
    return implode('/', $img);
	}
?>

5. Upload PHP file to your server and setup a cronjob to automatically load the file at set time(s).

WordPress SEO Tweaks Without Plugins

Robin Parduez — Fri, 19 Aug 2011 15:00:38 +0000

If possible I like to tweak WordPress installs and avoid adding extraneous plugins. Generally the more plugins you have, the slower your WordPress site loads, and you can have compatibility issues when you upgrade.

One area for consideration is duplicate content, and there are a number of excellent plugins available for handling duplicate content issues. All in One SEO Pack and Joost de Valk’s WordPress SEO Plugin are very good, however, for my personal requirements both these plugins add a lot of unnecessary functionality.

If you prefer full control over your WordPress source code, by making a few slight tweaks you can handle an SEO duplicate content issue using the Meta Robots tag and have more control over page titles. If you are new to SEO or the Meta Robots tag, you can read more about this element here.

Basically, I prefer to noindex,follow category (is_archive()), tag (is_tag()), search (is_search()) and pagination pages (is_paged()). This enables search engines to crawl the pages for links which are subsequently followed. Therefore, the blog homepage and individual posts are indexed as normal, but duplicate content issues with category and tag pages are avoided. Also other unnecessary pages that you wouldn’t want indexed and returned in search results are noindex,follow.

Meta Robots Tag

The code for enabling this feature is as follows, and needs to be included in your header.php file which can be found in your WordPress admin panel under Appearance > Editor > header.php.

";
    } elseif ( is_archive() ) {
    echo "";
    } elseif ( is_search() ) {
    echo "";
    } elseif ( is_paged() ) {
    echo "";
    } else {
    echo "";
    }
?>

You may choose to tweak the above code to enable indexing of category pages (is_archive()) for example. To do this, you would simply delete the line:

elseif ( is_archive() ) {
    echo "";
    }

Title Tag

Another area for consideration is the page title. Again, there are a lot of plugins that make it easy to control titles for different pages. However, if you prefer manual control, you can add the following code to your header.php file which can be found in your WordPress admin panel under Appearance > Editor > header.php.


    <?php wp_title(''); ?><?php if(wp_title('', false)) {
      echo ' | '; } ?><?php bloginfo('name'); if(is_home()) {
      echo ' | '; bloginfo('description'); }
    ?>

The above code basically includes the blog homepage title at the beginning of the title tag on the homepage, and includes the description taken from Settings > General > Tagline. On individual blog post pages, the post title is included on the left–hand side of the title tag, and the blog name is moved to the right–side of the title.

Title Examples

Homepage:
Robin Parduez | Blog | Front-end Development Tips & Ramblings

Blog post:
WordPress SEO Tweaks Without Plugins | Robin Parduez | Blog

Disclaimer

Please test any code changes that you make to your WordPress installation. Test your blog to ensure the meta robots noindex,follow tag is only applied to category, tag, search, pagination pages and index,follow is applied to the blog homepage and individual post pages. Be sure to test your page titles as well, they should follow the pattern shown in the examples above.

There are of course many more features available if you use an SEO plugin, and for some users a plugin will be suitable. You may also wish to tweak the code examples above to meet your needs.

If you have any comments or suggestions please feel free to give some feedback in the comments section below.

GZIP HTML Content on Shared Hosting

Robin Parduez — Fri, 24 Jun 2011 12:45:22 +0000

If you host your website on a shared Apache hosting account, it’s highly unlikely that you will have access to the httpd.conf file to set default GZIP compression for your website files. A quick and simple alternative is to set GZIP compression on each page so that you can effectively compress the HTML output content on page load. Note: This only works for pages with the .php file extension and only GZIPs the HTML.

The PHP code is placed at the very top of your page, I.e. the very first piece of code to be executed on the page. It is also recommended that the closing PHP tag is on the same line as the HTML doctype for optimal backward compatibility.

The following example shows how to place the PHP GZIP code at the top of your pages. It is always advisable to test this on a non–important page before rolling out across all pages on your site.

Redirect SSL with .htaccess

Robin Parduez — Wed, 16 Feb 2011 12:15:36 +0000

If you use an SSL certificate to secure pages on your website, you may want to setup your server to always display non-secure pages using ‘http’ instead of ‘https’.

In terms of search engine optimisation it is advisable that your server is setup to display a single version of a page to avoid duplication.

In other words, when an SSL certificate is setup, it generally means that every page on the site is available at http://www.yoursitedomain.com and https://www.yoursitedomain.com.

Other than duplicate content, this can also cause the splitting of link equity between two versions of the same page.

This can happen when a user navigates to a secure page on your site (‘https’) and then navigates to other areas of the site whilst still remaining on the secure version of the site (which is the default behaviour on most Apache servers with SSL installed).

The rest of this blog psot explains how to handle SSL redirection using at .htaccess file installed on your server.

How to Create .htaccess Files

To create .htaccess files you will need to use a simple text editor such as Notepad on Windows or TextEdit on an Apple Mac. The .htaccess file should be saved with no file extension and it is important to include the full stop ‘.’ at the beginning of the filename. To do this, click Save As, and name the file .htaccess. If the program tries to save the file as .rtf or .txt, change this option to All Files.

Redirect Folder to HTTPS

Create the following .htaccess file and place it within the folder that you want to serve using SSL. Change the domain name and folder name to match your sites requirements. The .htaccess file will redirect http://www.yousitedomain.com/foldername/ to https://www.yoursitedomain.com/foldername/, it will also redirect any other pages within the folder to the ‘https’ version.

RewriteEngine On 
RewriteCond %{SERVER_PORT} !=443
RewriteCond %{REQUEST_URI} foldername 
RewriteRule ^(.*)$ https://www.yoursitedomain.com/foldername/$1 [R=301,L]

Redirect Non-Secure Pages to HTTP

The following .htaccess file needs to be placed in the websites root folder. Change the domain name to match your sites requirements.

RewriteEngine On
RewriteCond %{SERVER_PORT} ^443$
RewriteRule ^(.*)$ http://www.yousitedomain.com/$1 [R=301,L]

Please Note: When making adjustments to your server settings, please test the above method thorougly to check that it works correctly in all situations. Server’s can be setup with various different configurations. If this is the case the above .htaccess files may not work in their current format. It may be a simple case of changing the port settings in the .htaccess files or you may need to contact your website host for more information.