Adding Gravitar To Your Website Or Blog (In under 30 seconds)

Michael Deering April 16th, 2008
4 Comments

Bells and whistles are always fun, so when whipping together this blog I wanted to try my hand at adding a few. First “nice-to-have” I went after was adding Gravitar to the comments. I did not really expect to much of a challenge but I had no idea it would be this straightforward.

Extend the string class a little. 

# config/initializers/string_extensions.rb
class String

  def md5
    Digest::MD5.hexdigest(self)
  end

  def uri_encode
    URI.escape(self, Regexp.new("[^#{URI::PATTERN::UNRESERVED}]"))
  end

end
Add a few constants for cleanup. 

# config/initializers/constants.rb
GRAVITAR_BASE_URL = 'http://www.gravatar.com/avatar.php'
GRAVITAR_DEFAULT_IMAGE = "http://#{HOST}/images/default_gravitar.gif" 
GRAVITAR_SIZE = 40
And of course add in your view helper. 

# app/helpers/application_helper.rb
def gravitar_image_tag(email, html_options = {})
  image_tag gravitar_url(email), html_options
end

private
  def gravitar_url(email)
    return GRAVITAR_DEFAULT_IMAGE if email.nil?
    "#{GRAVITAR_BASE_URL}?gravatar_id=#{email.md5}&default=#{GRAVITAR_DEFAULT_IMAGE.uri_encode}&size=#{GRAVITAR_SIZE}" 
  end

That is it… done! Start calling it from your views.


gravitar_image_tag comment.email

Tags

Fight Spam With JavaScript

Michael Deering April 15th, 2008
4 Comments

I’m willing to bet that email harvesting spam crawlers don’t have any capabilities to deal with JavaScript.

As an alternative to the many readable only to a human expressions such as mdeering – at – mdeering – dot – com why not try the following.

If you are visting this site with JavaScript disabled you will see content matching the following image in the “Quick Contact” area in the footer of all this sites pages.

Contact Information With JavaScript Disabled

If you are visiting this site with JavaScript enabled you will see content matching the following image in the “Quick Contact” area in the footer of all this sites pages.

Contact Information With JavaScript Enabled

My application view template renders the following div with the id of ‘quick_contact’ on every page of this site. 

<div class="footer_column">
  <h3>Quick Contact</h3>
  <div id="quick_contact">
    To avoid spam this information is only available to browsers with javascript enabled.
  </div>
</div>

When the page loads the JavaScript function ‘addQuickContactInfo’ is called to populate my contact information.


function addQuickContactInfo() {
// Do the minimum to hide my email with this replace
 var email        = 'spam@example.com'.replace(/(spam|example)/g, 'mdeering');
// Use the same technique as above to hide my phone number
 var phone_number = '555.444.3333'.replace(/555/, '780').replace(/444/, '906').replace(/3333/, '6632');
 this.addClassName('vcard');
// Clear out the static content from the div
 this.update('');
// Next 4 lines just populate the div with the information
 this.appendChild( $div( {'class': 'fn org'}, 'Michael Deering' ) );
 this.appendChild( $div( {'class': 'email'}, $a( {href: 'mailto:' + email}, email ) ) );
 this.appendChild( $div( {'class': 'url'}, $a( {href: 'http://mdeering.com'}, 'http://mdeering.com' ) ) );
 this.appendChild( $div( {'class': 'tel'}, $span( {'class': 'type'}, 'Cell' ), ': ', $span( {'class': 'value'}, phone_number ) ) );
}

Event.addBehavior({
  '#quick_contact':               addQuickContactInfo,
});

I’m using the LowPro and Prototype JavaScript libraries here obviously.

What do you think, did I just send my spam filter into overdrive, or is this a viable alternative to cryptic contact information?

Tags