Add a Facebook Fan Widget Using Valid Code

The code that Facebook provide for adding their Fan Page widget to external sites is not valid for the XHTML 1.0 Strict doctype. Darcy found this out as she attempted to make all of the code on her site valid, and only the widget code remained invalid for the doctype that her Thesis theme uses.

I played around with some code, and came up with something that works in all browsers tested so far, and also passes validation.

It has been tested with the following browsers:

  • Firefox 3.5.7, 3.6
  • IE 6, 7, 8
  • Opera 9.64 (and assumed to work on later versions)
  • Chrome 4.0.249.78
  • Safari 4.0.4

If you find it works in another browser / browser version, please leave a comment and I’ll add it in.

View the code

.htaccess Tweaks to Improve Site Speed

Add the following to the top of your .htaccess for some nice performance boosts, and meet a lot of the Yahoo Best Performance Practices:

# Enable Gzip on textual files.
# Best and easiest form of optimisation - sacrifice CPU cycles to encode for much smaller data transfer - well worth it.
# Don't gzip images - they are already compressed.
# For even more benefit, write alphabetical CSS key:value pairs and HTML attributes! (Google saved about 1.5% data transfer by doing this)

    SetOutputFilter DEFLATE
    # Deactivate compression for buggy browsers
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# BEGIN Expire headers
# Makes cached files stay cached for longer (304 Not modified) = fewer 200 responses.
# Aim for at least 1 month for images, ideally a year (not longer - that'll break RFC specs)

  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType image/x-icon "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType application/x-shockwave-flash "access plus 1 year"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/x-javascript "access plus 1 month"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"

# END Expire headers

# BEGIN Cache-Control Headers
# Only using the private/public values here - not max-age (Expires headers cover the same thing, and are more widely supported)

    Header set Cache-Control "public"

    Header set Cache-Control "private"

    Header set Cache-Control "private, must-revalidate"

# END Cache-Control Headers

# BEGIN Turn ETags Off
# Inherently misconfigured, especially for server clusters

  Header unset ETag

FileETag None
# END Turn ETags Off

# BEGIN Remove Last-Modified Header
# We're using Expires header to check for freshness, so save bytes by not returning this header.

  Header unset Last-Modified

# END Remove Last-Modified Header

Improving WordPress Default Code

The above code works for all sites. The next suggestion comes from the Canonical SEO site, and applies if you’re running WordPress. Swap out the default code added by WordPress in .htaccess:

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress

And replace it with:

# BEGIN WordPress
RewriteEngine on
#
# Unless you have set a different RewriteBase preceding this
# point, you may delete or comment-out the following
# RewriteBase directive:
RewriteBase /
#
# if this request is for "/" or has already been rewritten to WP
RewriteCond $1 ^(index\.php)?$ [OR]
# or if request is for image, css, or js file
RewriteCond $1 \.(gif|jpg|css|js|ico)$ [NC,OR]
# or if URL resolves to existing file
RewriteCond %{REQUEST_FILENAME} -f [OR]
# or if URL resolves to existing directory
RewriteCond %{REQUEST_FILENAME} -d
# then skip the rewrite to WP
RewriteRule ^(.*)$ - [S=1]
# else rewrite the request to WP
RewriteRule . /index.php [L]
#
# END wordpress

Hyphens & Dashes – Using the Correct Character

(Other Useful Character Entities)

‐ = hyphen ()
‑ = non‐breaking hyphen ()

‒ = figure dash ()
– = en dash ( or –)
— = em dash ( or —)

− = minus sign ( or −)
- = default hyphen‐minus (what is shown when you press the key next to zero on the keyboard)

Following is taken from http://www.alistapart.com/articles/emen/:

Hyphens

That hyphen you can insert with the key next to the zero on your keyboard is an ambiguous character suffering from an identity crisis. It can’t decide if it’s a hyphen, a minus, or an en dash—in fact, the Unicode specification describes it as “hyphen‐minus” and defines very specific replacements for each of its personalities.

Use it if you need to insert a hyphen, but never for a minus () or a dash, since it does not have the correct width for either, or the vertical position for the latter (compare “1+4-2=3” to “1+4−2=3”).

The soft hyphen (­ a.k.a. “discretionary hyphen” and “optional hyphen”) is to be used for one purpose only—to indicate where a word may be broken at the end of a line. Otherwise, it is to remain invisible and not affect the appearance of the word.

Some browsers display it no matter where it falls, but this is not the correct behavior. Others in the past have recommended against its use because its behavior was not well‐defined, but the HTML 4.01 spec makes its use and behavior clear and unambiguous.

Three other hyphen characters exist in Unicode, but are unfortunately not defined in the HTML entity set (although they should be):

  1. The non‐breaking hyphen ( not in HTML) does just what its name implies.
  2. The hyphen character ( not in HTML) is meant to be used in place of the hyphen‐minus when a hyphen is exactly the desired character.
  3. The hyphenation point ( not in HTML) is that bullet‐like character you find in some dictionaries to separate syllables. That is its only use, but if you’re creating an online dictionary, using it will make your entries look more professional.
Figure Dash

The figure dash () is so named because it is the same width as a digit, at least in fonts with digits of equal width. The figure dash is used when a dash must be used within numbers, for example with telephone numbers: 634‒5789. Note that this does not indicate a range (use an en dash for that), or function as the minus sign (which has its own glyph).

The figure dash is often unavailable; in this case, one may use a hyphen‐minus instead. In Unicode, the figure dash is U+2012. In HTML, you must use the numeric forms or to type it; there is no equivalent HTML entity. In TeX, the standard fonts have no figure dash; however, the digits normally all have the same width as the en dash, so an en dash can be substituted in TeX.

En dash

The en dash () is used to indicate a range of just about anything with numbers, including dates, numbers, game scores, and pages in any sort of document.

It is also used instead of the word “to” or a hyphen to indicate a connection between things, including geographic references (like the Mason–Dixon Line) and routes (such as the New York–Boston commuter train).

It is used to hyphenate compounds of compounds, where at least one pair is already hyphenated (as in “Netscape 6.1 is an Open‐Source–based browser.”). The Chicago Manual of style also states that it should be used “Where one of the components of a compound adjective contains more than one word,” instead of a hyphen (as in “Netscape 6.1 is an Open Source–based browser”). Both of these rules are for clarity in indicating exactly what is being modified by the compound.

Other sources also specify the use of an en dash when referring to joint authors, as in the “Bose–Einstein” paper. Some also prefer it to a hyphen when text is set in all capital letters.

Some typographers prefer to use an en dash surrounded by full spaces instead of an em dash. Others prefer to insert hair spaces on either side of the em dash, but this is problematic with some web browsers (see the section on spaces for more detail).

Em dash

The em dash () is used to indicate a sudden break in thought (“I was thinking about writing a—what time did you say the movie started?”), a parenthetical statement that deserves more attention than parentheses indicate, or instead of a colon or semicolon to link clauses. It is also used to indicate an open range, such as from a given date with no end yet (as in “Peter Sheerin [1969—] authored this document.”), or vague dates (as a stand‐in for the last two digits of a four‐digit year).

Two adjacent em dashes (a 2‐em dash) are used to indicate missing letters in a word (“I just don’t f——ing care about 3.0 browsers”).

Three adjacent em dashes (a 3‐em dash) are used to substitute for the author’s name when a repeated series of works are presented in a bibliography, as well as to indicate an entire missing word in the text.

More info can be found at http://en.wikipedia.org/wiki/Dash.

Typographical Reference – Character Entities

Some useful character entities to help get everything typographically correct. Use of the decimal notation ensures widest possible compatibility. Named entities probably don’t work in NN & IE browsers less or equal to version 4. They are, however, easier to remember when hand-coding / amending pages.

Useful Typographical Character Entities
Character Decimal Name Notes
Hyphen. See Hyphens.
Non‐breaking hyphen. See Hyphens.
Figure Dash. See Hyphens.
– En Dash. See Hyphens.
— Em Dash. See Hyphens.
‘ Left single quote — compare to typewriter quote → ' (')
’ Apostrophe/Right single quote — compare to typewriter apostrophe/quote → ' (')
“ Opening Quotes — compare to typewriter quotes → " (")
” Closing Quotes — compare to typewriter quotes → " (")
… Horizontal Ellipsis — compare spacing to three periods … → …
Interrobang
Question Exclamation Mark
Exclamation Question Mark

See more info at http://www.fileformat.info/info/unicode/category/Po/list.htm