Archive for the ‘Resource Depot’ Category

Automatic inclusion of Google Adsense ads in WordPress content.

Creating great content is one of the aims of publishing over the web using platforms such as WordPress. Trying to monetize a blog is another aim and advertisement inclusion is always a problem especially when talking about that of Google Adsense. On this very blog, you found out a tutorial on the easy way of including Google Adsense ads with the use of shortcode in WordPress as well as how to improve the quality of your Google Adsense ads and a guest post by Kurt from Icy Tips on the most performing Google Adsense ads size to use.

Publishing Google Adsense ads in single posts content only.

The use of shortcode is easy for such inclusion and quite handy as it comes through. It actually was the way I used to include my Google Adsense ads in my code. Here’s a newbie tip if you’re going to use the shortcode in your posts. Let’s say that you have decided to publish Google Adsense ads in your posts only. You can use your PHP-fu along with your WordPress-fu to generate your Google Adsense blocks in your posts only. This is how it works out. Make sure you’ve implemented your code as described in the post here: easy way of including Google Adsense ads with the use of shortcode in WordPress.

To make sure you publish only when you’re in a single post you need to write this code in your post:

    if(is_single()) {echo "[adsense]";}

What we are doing here is basically asking the code to check if the current page is a single WordPress post page and publish the shortcode if this is the case. Easy as ever. I usually used this to publish 3 Google Adsense slots (maximum Google Adsense slots you can publish on a page) on my single page posts. When the post was published on the blog’s front page, no Google Adsense ad was visible.

Look Ma! No code!

There’s a way to go one step further! The idea is to publish your WordPress single post Google Adsense ad in your content without having to write anycode while publishing. You might not see why this might be handy but believe me, when you find yourself cleaning up hundreds of posts shortcode inclusion, you quickly try to find another way of doing it (yes, I did clean hundreds of posts manually removing Google Adsense ads in my content). There are 2 ways of doing this.

The first one which I would call the brutal way (maybe slightly more efficient for the non PHP experienced) which calls for direct inclusion of the Google Adsense tag in the code of the single post page, single.php file in the theme folder. You just need to add your Google Adsense slot before or after your content (the the_content() tag) as it pleases you:

Including Google Adsense ads directly in your code.

The classy way of adding Google Adsense slots.

Now the classy way of doing things. It is the way the Google Adsense slots are set on the Web Design Bureau of Mauritius. I wanted to do this just to be able to style the Google Adsense slot right beside the content (the Google Adsense block had to be put right into the content and I did not want to have to put shortcodes all the time). So I had to put it directly into the content. After some research on the code I found out that I could write my own function to modify the code. Basically, I wanted to take all the content sent out by WordPress for my posts and inject my Google Adsense ad into it. Simple. So I had to create a dummy content that could be easily modified. This function must be put in the functions.php file of the WordPress template. Please not that what we are adding here is a filter.

function like_content($content) {
	global $post;
        $original = $content;
		$content = "<div class=\"pub\">";
		$content .= "<script type=\"text/javascript\"><!--
                    google_ad_client = \"pub-XXXXXXXXXXXXXX\";
                    google_ad_slot = \"XXXXXXXXXX\";
                    google_ad_width = 336;
                    google_ad_height = 280;
                    //-->
                    </script>
                    <script type=\"text/javascript\" src=\"http://pagead2.googlesyndication.com/pagead/show_ads.js\">
        </script>
                    ";
		$content .= "</div>";
		$content .= $original;
        $content .= "</div>";
       return $content;
}
add_filter( 'the_content', 'like_content' );

There you go, your Google Adsense slot will always be included directly into your content without having anything to implement. The only thing you will now have to do is to style your content through your CSS file.

One step further: Google Adsense in single posts only.

Now, let’s go even further in this. The idea was to generate a Google Adsense ad slot in the single post content. The function above has the enormous drawback of setting the Google Adsense block in ALL the content. By all, I mean all, i.e. pages and single posts. This was not the main idea was it? So we need to remove the filter from all the “pages” content. For this to happen, we need another filter function which will remove the filter if we are in a page. It looks like this:

function remove_like_content() {
  if (is_page()) {
    remove_filter('the_content','like_content');
  }
}
add_action('wp','remove_like_content');

As you can see, the code analyses if the content is in a page with the is_page() method and then removes the filter from the WordPress loop by adding this Google Adsense slot suppresion.

Let’s talk about this.

I know that this is a bit of a creative way of doing things but the whole concept here is to get the best out of both worlds, Google Adsense‘s best performing ads with WordPress’ flexibility. Do you have any other creative way of including Google Adsense slots in your code? If so, please share.

Dropping unnecessary tags in your HTML code.

This post might be a sequel to my previous post on speeding up a page’s loading time to get better rankings in Google’s search engine results pages (SERPs). It is however not the case here. Most of us write our code, at least our code’s structure, in one go. This is done preferably after having identified all the building blocks of a page or template. But let’s be honest, even if we optimise our code, our CSS and all the scripting that accompany our everyday job it is not easy to dive back into the code and go for seconds in terms of cleaning up.

The good choice.

I admit it. I have not done it all the time, cleaning the code more than necessary. Like everybody who has made mistakes I could easily come up with a thousand reasons for not having done so. The first would be: “It takes too much time on the schedule allotted to such or such project. As I matured I understood the necessity of doing second passes in code cleaning.

  • It helps you check any error that could have been left.
  • It might be a good occasion to compress some elements to speed up the page.
  • It is a good chance to drop the unnecessary tags in your HTML code.

Now you might be asking yourself what this “unnecessary tag in the HTML code” is. Simple. When doing second checks on my code I found out that I somehow found new and improved solutions to the code already written. The I would change these. Most of the time I found myself dropping some tags from my HTML code and exploit the inherited properties of other tags to achieve the same results. This would be beneficial for maintainance, improve page loading time and less code means more content for search engines.

The basic code.

Below is a basic example of code that we usually find in web design. There is nothing wrong with this code, it works perfectly well and is written to be nicely styled in CSS.

<div id="navigation">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about.html">About us</a></li>
        <li><a href="/services.html">Our services</a></li>
        <li><a href="/contact.html">Contact us</a></li>
        <li><a href="/register.html">Register here</a></li>
    </ul>
</div>

As you can see in this code, it is a navigation menu that is implemented into its own wrapping DIV tag which can itself be included in header or sidebar parts in a design. After analysing it and improving its CSS, we would estimate that the code is fine. But there’s one more step to push.

Dropping the tag.

In standard HTML, some tags have block displays and others have inline ones. Those missing any of these can get them through the declaration of these properties in the cascading style sheets.

    <ul  id="navigation">
        <li><a href="/">Home</a></li>
        <li><a href="/about.html">About us</a></li>
        <li><a href="/services.html">Our services</a></li>
        <li><a href="/contact.html">Contact us</a></li>
        <li><a href="/register.html">Register here</a></li>
    </ul>

With this in mind, we can bring some tags to become their own container instead of relying on an extra tag. This is the case with our basic code where we can directly make use of the containing UL tag to hold the rest of the elements, thus making the use of the holding DIV unnecessary. One tag won! This can be done on a lot of tags such as FORM or even SPAN (if there is a use to it…).

Let’s talk about this.

To be honest, as time goes by, this solution becomes a habit and a second nature. I now do not necessarily have to go through my code and drop tags all the time. I usually write a piece of code and stop and ponder over it. If there is a change to be made it is done immediately but this is now rarely the case. So why not go through your code and drop some tags? Do you have similar approaches in your coding skills? Try this trick out and see how much you can take off your code.

Optimising your site to get Google sitelinks.

Google has unveiled a lot on the way its algorithm works and on how the company actually works to promote its own products on the engine. Google Webmaster Central has published an article on the SEO report cards that Google uses to maximize its products’ visibility on its own search engine. There is a lot of things present in there and it all gravitates around tuning up one’s pages for better ranking and increased user interest. One part on which I really perused is the building up of sitelinks.

Sitelinks for the dumb.

Google sitelinks are very easy to spot. They are direct inputs to a site’s inner links, categories, themes… The advantage of such an option is that it allows the user to go directly to some specific part of a site, thus maximising conversion by, for example, removing any redundant step like going through the main page. Sitelinks look like this:

Google sitelinks example

The Google SEO report card defines it as such:

Sitelinks are often a signal to users that they’ve found the result they’re looking for and can help in finding information faster.

How to get sitelinks?

This is the trick question in the whole system. Webmasters can’t choose when sitelinks are shown. Up to now, nobody knows when, how and who triggers the sitelinks. There are different assumptions on the subject but no one really knows if it is human powered or not. However, the report card shows that there is a 56% of changes to have an incoming click through sitelinks on a search engine results page. So what can you do to get sitelinks then?

The SEO report card states that an improved site organisation and good internal linking strategies can improve the chances of getting them. Here are the instructions:

  • use a hierarchical site structure
  • use descriptive anchor text and links pointing to internal pages
  • avoid deep nesting of content behind many subdirectories

Bonus feature.

The bonus given by Google concerning the sitelinks is that they can be optimised for providing relevant information, helping the users find the content they want faster and, a really nice way of putting things, taking up more real estate on the search results page (the result taking more space on the page).

The card coins good sitelinks as “Appealing Google Sitelinks”. These sitelinks are those that really do the job, those that give the relevant information or provide the user with the best options. For those oblivious of the use of Google Webmaster tools, there is an option in it that allows the webmasters to block unappealing sitelinks.

Let’s talk about this…

There you go then. Have your say on sitelinks. I think that some of the information must not be taken as rules of law but believe that they are nice starting points for such optimisations.

Have you been trying to get them for specific sites? Have you been working on them and have you had positive results? Will you be using the Google Webmaster Tools to get those links?

What’s in a name? Domain name and hosting strategies.

There are hundreds of articles on the subject of domain names all over the web. Most of them deal with the choice of the domain names associated to a brand, a company or on why top level domain names are important in the definition of your SEO strategies. Actually, a lot of these articles talk about what could be coined as “the usability of domain names”.

The usability of domain names.

The usability of domain names is the whole marketing jargon buster used to help a client define a domain name. It is here to define branding and visibilityof a brand online. One great resource for that is “Building the Perfect Beast” (pdf document) by Igor International.

The elements are generally:

  • Size of the domain name (the smaller the better, as it seems).
  • Easy to remember (to print in your customers’ minds).
  • Business related (aiming your field).
  • Top level domain (to maximize indexation).
  • Inclusion of keywords (improving ranking through the domain name).

You might be careful.

Some of these advice might have flip sides to them though. The size of the domain name, if coupled with the inclusion of keywords, might not be compatible if you’re trying to become a leader in your field. An example might be DCDM where the name De Chazal du Mée is long and does not give the information that the company is that of chartered accountants.

As such their domain name does not show this aspect either. OK, DCDM is known in Mauritius, what about the international aspect? The branding does not include the fact that the company is big in Africa. Maybe some domain name such as dcdm-chartered-accoutants.tld (top level domain name) would help. To push the envelope a little bit further, the domain name would take care of at least 4 of the elements stated above.

Local you said?

What about local search then? It might seem cool to look for interesting domain names but if the primary audience is local, it would be better not to aim past the target. For example, the Web Design Bureau targets Mauritian web designers. The domain name is therefore a top level one mixed with the “mauritius” keyword. It could have been more specific but this is like that for one specific reason that will not be discussed here.

In a local context it is a good thing to aim for local domain extensions. For example: BBC keeps it domain name centered around the UK www.bbc.co.uk, TF1 in France has a .fr and CNN has a .com (generic extension used in US instead of the .us). None has really gone for the .tv extension but the MBC has tried it out.

What about hosting?

Any domain name with a real website needs to be hosted. Hosting does influence SEO. First of all there is the neighbourhood. On mutualised servers, some domain names can be blacklisted or have bad reputation (the Bureau suffers a bit from hosted porn neighbourhood). Therefore, one should make sure that the site is clearly well hosted.

In the case of multiple websites, one interesting thing is to work on different C class domain IPs. Each site has a unique IP number. If different websites are to be hosted, having really different C class IPs can help when working on different sites’ net linking. Different addresses mean different servers to the robots, so it might really be a win-win strategy to use different hosting companies.

Let’s talk about this…

What concepts did you use to chose your domain name? Why do you have a top level domain or any other level domain name? Do you have a domain name strategy? Are you thinking of changing domains and work on it strategically?

Google’s advanced suggest tool and SEO.

I was hanging about Google making some searches when I got to look for a specific thing involving a “what is” search. Now, everybody knows the game on Google where you use the Google suggest feature to get a good laugh. I however went past the game and found that Google is exploiting this utility more than it has been doing till now.

“What is” v/s “define:”.

As a hardcore Google user I’m used to the tool’s inbuilt utilities such as the “define:” operator to get definitions. This would give these results (the example here is “heavy metal”):

Search for a definition of Heavy Metal on Google

In SEO, one of the first advices we give to clients is to stick to what their target audience usually types in search engines to maximise their visibility. It seems that even Google is now following this advice. With the “what is” game, a new idea must have crept up in the Google engineers’ minds. What if people use more “what is” searches than the “define” operator? This would explain why the automated thesaurus used by Google suggest* is filled with “what is”. This would also mean that the “define” operator is used only by people knowing its existence.

2010, the age of “what is”.

On this basis, Google has made an evolution to the Google suggest feature. If you now type your whole “what is” question, the tool will propose not only the usual “suggest” results but the first available result in its definition list. This would be a full clickable result as below:

Advanced what is feature in Google.

I may be wrong but it is the first time that I’m seeing this new option in Google suggest and this is making me wonder about the coming changes on the search engine as well as in search engine results.

The future of search ?

This specific option might itself suggest the future of search engines as Google sees it. The main idea is that the user does not even have to go to the search engine result page (SERP) to get the different proposals or results if the one suggested by Google suggest satisfies him/her. This would mean the fall of organic ranking in SERPS as well as paid inclusion! And what if the visitor is satisfied with the Google suggest answer itself without clicking on it?

In a far-fetched concept, what if Google opens up this suggestion utility to propose the first result of the SERPS on any search keyword and not only in definitions. This would completely change the face of search engine optimisation (SEO) and get people to fight for the first place. This however, will not be the case (at least not now) because it would be a bullet in the foot of Google’s business model based on paid inclusion. But once again… what if?

Let’s talk about this…

There are many changes coming on Google in 2010 and these might change the way we search. Do you think that people will be using search engines differently in the coming months/years? Do you think that SEO and website marketing will be affected by such changes? Will you be changing your way of building sites (if it’s your field) because of this?

*Google suggest is a pondered utility that builds and proposes search suggestions based on the popularity of previous searches. E.g: typing “face” would suggest “facebook” as one of the first proposals.

Test your web pages in Adobe Browser Lab.

So you’ve spent a lot of time designing your new web pages but are still wondering how they would look like in different browsers. Adobe Browser Lab is the new free tool from Adobe for easier, faster cross browser testing.

Build mega dropdown menus.

Since usability guru Jakob Nielsen recommended the use of mega drop down menus as useful on large scale websites, it has become impossible to ignore the way these menus are built. One of the best tutorials available is that of Soh Tanaka which drives you step by step into the building of mega drop down menus with jQuery.

Web Font Specimen, helping your typography.

Typography is not the easiest part of web design to master. It however is the core of web design. Tim Brown has set up Web Font Specimen which allows web designers to test, via simple files the rendering of the selected fonts on different browsers. A really useful tool!

Mollify, open source web file manager.

Mollify is a great open source web file manager with a sleek user interface and fast loading allowing you to give access to different users on a file hosting server. Access can be managed by different levels of permissions making this tool extremely useful.

Include color blind persons when designing.

In web design, there’s one category of users that is constantly set aside, colour blind persons. We are Colour Blind is a great resource to help you choose the colours and patterns to help you reduce strain for them.

Put a primer coat to your CSS.

Every web designer had his/her way of writing mark-up. If you usually start out writing your mark-up with all your classes and ids, PrimerCSS is the tool for you. Just drop in your mark-up and it’ll extract a primer stylesheet with all of these to get you up and running in no time.

Speed up your web pages via the CSS file.

As a Web designer, there are some rules that you have been acquainted to. One of the first being: “store all layout and graphics in a separate CSS file”. Nothing bad in this one. Knowing that a CSS file is downloaded once or updated if needed in a browser’s cache, this speeds up pages and adds more semantic through the separation of layout and content. All the good basics of CSS.

It happens that the content of a CSS file can easily grow. On some large websites it’s no surprise to see CSS files running over a thousand or two and even more lines. At the end of the day, a CSS file might in itself reach some 80kB or go over that. In France, the recommended “accessible” page weight limit is 27kB. So with an 80kB CSS file you’re just shifting the data bloating problem to another file. Its still here. So, this is my little trick to reduce CSS file weight. This will have, as a consequence, a positive result on your page loading time.

The Tool

One of my favourite editors is PsPad, lightweight, easy to use and packed with a whole bunch of useful elements. One of these is the ability to reformat the CSS/HTML in structured or inline format. A lot of tools do that too but PsPad is just one of those but allows me to manage whole projects in one go making it really handy.

The Trick

The simple trick is to actually structure the data of the CSS file then throw it to the inline version before uploading it to the server. Structuring the data is useful to clean the file. The CSS parser in PsPad realigns the code and structures it with the relevant tabs as well as drops all empty lines and redundant spaces. This increases readability.

Afterwards just reformat the CSS file content into “inline”. Here the tool will reformat the whole content to have each node on one line only per node. The file loses a bit of readability but gets improved in terms of spacing, hence reducing the filesize. Take a look at the 2 screenshots below. The first shows the weight of the layout.css file with structured content and, the second, the same file with inline content. The file size change is rather surprising:

Structured CSS file in PsPad

In line formatted CSS in PsPad

More ?

This small tutorial is but a mere trick to lighten up your file weight. Other solutions exist, solutions that would allow you to get those precious kB off your visitors’ shoulders with a view of proposing fast pages which would help them choose to convert on your site. On of them would be to use CSS shorthand and don’t forget precious tools like YUI. A good mix of those and techniques like the one presented here would surely help your pages load faster.

Improve the quality of Adsense ads.

The title might seem weird to you but let me expose the facts. It does happen that one decides to include Adsense on one’s site. That’s a good idea to base some revenue off one’s site. Trouble is that sometimes you just get some unwanted or completely unrelated Adsense ads on your pages. For example, when testing the Web Design Bureau of Mauritius in the first months, I used to get only a whole lot of furniture ads. When stepping into the detailed view of the site on Google Webmaster Tools, I found out that it was the word “Bureau” that was winning it. Weird to get “pawned” by one’s own site title.

It was necessary to find a parade to this and to improve the Adsense ads. There is a way and a quite simple one as it is. It is given in the Adsense user guide but, hey, like a lot of people, I did not read all online documentation I found as it was just for meddling around. The solution is just to tell the Adsense engine which is the main content of the page and the ads will be modified according to this content. To do this, you need to specify where the content starts and where it ends with these two tags in your code, the first one before your content and the second one after:

<!-- google_ad_section_start -->
<!-- google_ad_section_end -->

Once this is done, you just have to publish your page and the content will be used as a base for publishing your improved Adsense ads. These being closer to your content should be more interesting to the viewers, hence increasing the click rates.

Now for those using WordPress, you can code this directly into your templates or use this great plugin built by Jim Gaudet. It takes 2 minutes to install and it does the job pretty well.

Community managers: the new kids on the block.

Ok, I’m not taking Mauritians for stupid people, never had because I’ve always thought that we are capable of the best. The current post is really social media and web oriented but one must take into consideration the fact that Mauritian companies are still in the Ice Age of technology in terms of web presence as I pointed out in my former post: What Mauritian companies are missing on the web. So here’s another thing that we won’t see THAT soon in Mauritius but can open a lot of doors to the young Internet savvy Mauritians: Community Management.

Community managers fall in the web strategist work category. It is a fairly new job but it is up and coming for two things. Social Media is getting much more importance in the world and there must be a way of managing and directing all these to drive information to companies. To get a an overview of the evolution of social media, have a look at Island Crisis’ article on Twitter and personal information.

So what do community managers do? As Jeremiah Owyang, one of the first and most famous community managers, puts it, the community manager is not a customer or a company advocate. The community manager is the “online champion” of a company who will be driving the web strategies for it. His/her role is to get the company into the various social communities and get the possible customers or product users to interact with the company itself. The idea is to use the web as a vector to get the human being as the centre of a brand or a cause. This is done by building and helping the community to grow around the brand or cause.

The community management skills need to go from a deep understanding of the web and the levers, not to say the social levers, that organise it. The use and even abuse of social media is a great quality (hello “good” Mauritian bloggers). Other tools used for social media monitoring and observatory tracking are important. Managing people, knowing how to listen, interprete and reply in a polite and friendly manner while being authoritarian are all parts of the job. The whole picture is that of the person who’s the centre of it all while making sure that the brand or cause is the core if it all.

So any of the readers feel like they’re ready to become community managers in Mauritius? As I said earlier, it is a budding job having no real root if not necessity. Maybe in some years (again!). Otherwise you might also be interested in Chris Bogran’s excellent review of the Essential Skills of a Community Manager.

What you could do if you won one of our giveaways.

If you were one of our lucky participants, you might use your winner packs to try this superb tutorial on how to create a richly ornate typographic illustration. What about that? Dive in the contest then.

We’re giving away over Rs 6000/$200 of vector and brush packs!

EDIT (17th of August 2009): Due to the lack of contestants, this contest is now open to everybody. We are therefore giving away $200 worth of design stuff by Designious. The rules remain the same and closing date is the 17th of September 2009.

Mauritians rejoice, here is a great giveaway contest for Mauritius only People rejoice. If you are into design and web design, this will be one of the greatest giveaways to have ever been done in this field. The Web Design Bureau of Mauritius is happy to announce that the great folks at Designious are offering 10 vector packs and 10 photoshop brushes packs to you Mauritians. Each pack has multiple elements in it and cost $100 (Rs 320) each. There will be 10 winners to this giveaway, each will win a vector pack and a photoshop brushes pack. How’s that for you? Designious, drop dead designs, will let you chose your prize among the large number of packs available in their online shop.

bird-wings-2_1

koi-fish

Above are some samples of Designious packs. You can see more of them on their website.

So, are you feeling lucky ? Here’s how the contest will be going on.

  1. Leave a comment to this post stating your place of residence and tell us about “how the Internet changes your life”.
  2. The contest is open till the 17th of September 2009. So take your time.
  3. The winners will be drawn randomly and be informed by email, so be sure you are using a valid email address.
  4. Only Mauritians (and citizens as well as those of Rodrigues) are allowed to participate.
  5. Retweet this contest as much as you can and talk about it on Facebook.
  6. You can follow Designious on Twitter also.
  7. You can follow me on twitter as well.

OK people, give these guys a big cheers and get in the ring.