Combining these buttons with the WordPress codex is pretty easy. Insert a couple snippets of code and you can easily add the URL and post/page title dynamically to the “Tweets” and “Likes”.

The codes from the WordPress codex that we’re going to use are:

<?php the_permalink() ?> and <?php the_title(); ?>

Two lines of code and you’re all set up. Copy and paste the code below, style as needed to position the buttons how you see fit. For the Twitter Tweet button, don’t forget to replace my username with yours.

Facebook Like Button

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>

Twitter Tweet Button

<a href="http://twitter.com/share" class="twitter-share-button" data-text="<?php the_title(); ?>" data-count="horizontal" data-via="robbclarke">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Did you find this useful? Wouldn’t hurt to share it with others would it?

This week I’m proud to announce the launch of the new River Valley Arts Alliance website. The website is build on the WordPress content management system, letting the client update the website at their leisure.

The site features:

• an events calendar
• photo slideshow
• photo gallery
• member application forms
• donation forms
• an artist database
• a microsite for their annual Dooryard Arts Festival

The website is going to be a great resources for keeping up to date with RiVA and the arts community in and around the Saint John River Valley. Be sure to check back frequently as we near the festival dates for Dooryard as more events and festivities are announced.

Search Engine Optimization is one of those things that most people think they can do easily, while this is somewhat true, there are a lot of common mistakes that are made which either hurt you or do absolutely nothing to help your ranking. I’m going to talk a little bit about common misconceptions and mistakes made with Search Engine Optimization (SEO).

You Will Not Be “Number One on Google”

You would not believe how often I receive requests from people that “want to be number one on Google”. It’s not going to happen for a couple of reasons. The first being that the number one ranked site on Google – is Google. Good luck getting ahead of them. The second being that I’m fully aware that you don’t mean that you want to be the first ranked site on Google, you want to be the first ranked site under a certain keyword but you don’t know how to articulate that.

Vague search terms are not your friend. You really need to narrow down what search terms users will find you with. I know that I’m not going to be ranked anywhere near the top on the Google search results for the phrase “web design” but if I narrow it down to “Fredericton Web Design” I’m not doing too bad. It’s in your best interest to focus where you want to be found. A broader, more vague search is going to lead to millions of results but if you narrow your focus then you’re going to find it easier to step into the spotlight.

In August when I launched my friend Nick Forret’s photographer site he wasn’t even registering under the most common search term for local photographers; “Fredericton Photographer” but now, 2 months later, Nick has sky rocketed up to the first page and is quickly overtaking established sites. What’s this doing for Nick? Well, it’s increasing his business for one. People are now able to find him.

This leads me to my next point…

Search Engine Optimization Does Not Happen Over Night

No, it doesn’t. It happens more often than not that people pay to have SEO applied to their site and then they call the next day or week and ask why they “aren’t the first result on Google.” Half of the answer to that is above, the other half is simply because it takes a while for search engines like Google, Bing and Yahoo to crawl your site. It takes time for these bots to travel around the internet and read sites. According to Google “[c]rawls are based on many factors such as PageRank, links to a page, and crawling constraints such as the number of parameters in a URL. Any number of factors can affect the crawl frequency of individual sites.”

Expect the time between crawls to be a week to a month for a low traffic website. Sites with much higher traffic with more incoming links get crawled more frequently and thus have their reports updated quicker.

Flooding Your Site With Keywords Does Not Help Your Ranking

Flooding your <title> tag, alt and title attributes, meta description and content with keywords is not going to help you, if anything it’s going to make search engines avoid you like the plague. Using the same keywords over and over again raises flags with search engines and they see it as spam. The best way to avoid this is to read what’s your writing out loud. Have you used the same word 15 times in the span of three sentences? Does what you’re reading sound really awkward to you? If the answer is yes, then you need to cut back on the keywords. Don’t forget, that content isn’t there just for the search engines to read – there are real people that will hopefully be reading the content on your site as well and if you repeat “Fredericton Web Design” 15 times in a paragraph then they’re going to think that you’re a bit of an oaf. So be smart when writing your content and placing keywords.

Meta Keywords Do Not Do Anything Anymore

This doesn’t count as a full item so it only gets half a point. It’s been speculated for years that search engines don’t see much weight in Meta Keywords and just recently Google announce that they don’t even look at them. It’s true, Google said it themselves. Adding them to your site does absolutely jack. You can thank the porn industry and spam sites for that.

I hope this has helped clear up a few misconceptions about search engine optimization. So next time you’re going to talk to your web guy about being the “first on Google” just stop and think for a second and remember what you just learned.

Thoughts? Feedback? Hate mail?

One common question amongst my students when it comes to their CSS is “How do you keep your code clean?” While there are numerous ways to keep your code clean and very readable, there are two sure fire ways to keep it nice and clean and readable.

Use Shorthand

Get rid of any unnecessary code that is cluttering up your code. Do you use margin-top, border-top, padding-top etc. on a daily basis? If so, lose it.

Incorrect

p {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 4px;
margin-left: 5px; } 

You’ve got five lines of code there when you really only need one that will do the same thing.

Correct

p {margin: 10px 5px 4px 5px; }

You’re able to define information for each of the four sides (top, right, bottom, left) in a single line. The end result is something that’s much easier to read and takes up far less space. Each of the numbers represents the four sides (in this order); top, right, bottom, left.

Here are a few other examples of ways to shorten things up…

/** 3 Values - Middle defines right and left **/
p {margin: 10px 5px 4px; }
/** 2 Values - 1st defines top and bottom, 2nd defines right and left. **/
p {margin: 10px 5px; }
/** 1 Value - Defines all four sides **/
p {margin: 10px; }

Document Your Code

The second really really easy way to keep your code nice and clean is to document everything. This will not only help you for when you’re writing it initially but it will also save you lots of time 8 months down the road when the client asks you for changes and you have to go sifting through your code to find the bit that needs changing.

The easiest way to do this is to use comments.

/** HEADER **/
#header {
width: 800px;
height: 200px;
float: left;
background: url(../images/header.jpg); }
/** NAVIGATION **/
ul#nav {
width: 800px;
height: 50px;
float: left; }
ul#nav li {
float: left;
height: 50px; }

For a team of designers and coders, it’s important to talk to each other regularly so that the markup is created in a consistent way, and also to create site standards. You don’t want to have 3 or 4 different coding styles on the same document, it will just get confusing. For example, if someone comes up with way to markup a tab interface for the site, documentation will keep others from duplicating that effort, preventing unnecessary code in the HTML and CSS.

Documentation, including markup guides and style sheet guides, is not just for group efforts — they are just as important for a one-man design team. After all, a year after working on other things, revisiting one of your own projects can feel quite foreign. Trust me, I’ve been there before. Your future self might appreciate reminder of how your CSS is supposed to work, or what pages already have a treatment for a secondary action form button, and it will save you or someone else from appending redundant and unnecessary rules to your CSS. Without proper documentation you can and will spend lots of unnecessary time sifting through code and comparing different parts so it’s always best to document your code to the best of your abilities. Your comments don’t have to be kept short either, if you need to have a few sentences describing what does what, don’t be afraid to do it.

I hope this helps a little bit the next time you sit down to write some code.

Sick and tired of boring old underlines to show that a bit of text is a link? Here’s a really quick bit of CSS to show a dotted underline on your links (like this).

It’s so easy to do this that it hurts. We’re just swapping the underline for a border.

Dotted Underline on Hover Only

a:link, a:visited {
text-decoration: none; }
a:hover {
border-bottom: 1px dotted #000; }

What this does is remove the underline from the text so that when it’s not being hovered over there’s no underline. On hover, the dotted border appears.

Dotted Underline At All Times

a:link, a:visited {
text-decoration: none;
border-bottom: 1px dotted #000; }

This removes the underline and replaces it with the dotted border at all times.

Obviously a dotted border isn’t the only option out there. Play around with the other options and see what looks good and fits your site the best. Here’s the list of all of the types of borders that you can do.

CSS Border Types

p.solid {border-style: solid; }
p.double {border-style: double; }
p.groove {border-style: groove; }
p.dotted {border-style: dotted; }
p.dashed {border-style: dashed; }
p.inset {border-style: inset; }
p.outset {border-style: outset; }
p.ridge {border-style: ridge; }
p.hidden {border-style: hidden; }

If you want to dynamically generate the URL of the page/post that you are currently viewing then all you need to enter is:

This code generates and displays the current URL, which is great for submitting articles to Digg, Facebook, Twitter etc. etc.

What a big sigh of relief it was when I found that. The funny thing is that it’s been staring me in the face all along.

Various Codes to Generate Different URLs in WordPress

Below is a list of a number of variables used to generate various URLs using WordPress. The variable is on the left and the result is on the right.

admin_email = admin@example
atom_url = http://example/home/feed/atom
charset = UTF-8
comments_atom_url = http://example/home/comments/feed/atom
comments_rss2_url = http://example/home/comments/feed
description = Just another WordPress blog
home = http://example/home
html_type = text/html
language = en-US
name = Testpilot
pingback_url = http://example/home/wp/xmlrpc.php
rdf_url = http://example/home/feed/rdf
rss2_url = http://example/home/feed
rss_url = http://example/home/feed/rss
siteurl = http://example/home
stylesheet_directory = http://example/home/wp/wp-content/themes/largo
stylesheet_url = http://example/home/wp/wp-content/themes/largo/style.css
template_directory = http://example/home/wp/wp-content/themes/largo
template_url = http://example/home/wp/wp-content/themes/largo
text_direction = ltr
url = http://example/home
version = 2.7
wpurl = http://example/home/wp

You can easily display this information by substituting the variable in the following code for the desired URL:

Did that help? Share your thoughts below!

Having to know numerous languages isn’t anything new to website developers so it’s no wonder that bits of code get forgotten about or just plain over looked. I recently came across a handful of pretty useful tags that I wanted to share.

#1 <acronym>

The <acronym> tag is fantastic if you want to define an acronym displayed on your website but don’t want to have it displayed in the content. Simply wrap your acronym in this tag and when hovered over it will display the definition (provided you fill it in).

<acronym title="Search Engine Optimization">SEO</acronym> is essential for building a "findable" website.

Demo
SEO is essential for building a “findable” website.

#2 <abbr>

On a related note, <abbr> is great for displaying the definition of abbreviations that you may be using in the content of your site.

<abbr title="Mister">Mr.</abbr> Robb Clarke

Demo
Mr. Robb Clarke

#3 <wbr>

Ever had a long word hyphenated in a really awkward spot when you view your content? The <wbr> tag solves that problem by allowing you to dictate where the line break, if needed, will happen in that word.

antidisestablishmentarianism

Demo
antidisestablishmentarianism

#4 <ins> and <del>

If you ever need to display editing corrections in your content, the <ins> and <del> are the perfect solution for that. The <ins> tag underlines the word(s) that you wish to insert into the text whereas the <del> strikes through the word(s) that you have deleted/changes. Just wrap the word(s) that you want to add/remove in the appropriate tags.

District 9 was a <del>horrible</del> <ins>great</ins> movie.

Demo
District 9 was a horrible great movie.

None of these tags are going to change the way that you code sites or revolutionize the world of website design but they’re neat little tricks to add and display more information on your website.

Were these useful? Let me know.