jquery - jqueryを使用してGravatarをロードする

Question

ブログに簡単なコメントフォームを作成しようとしています。ユーザーがメールボックスにこれを書き込んだときに、ユーザーのGravatarを（jQueryを使用して）ロードしたいと思います。

どうやってやるの？

Answer 1

Gravatar の URL は次のようになります。

http://www.gravatar.com/avatar/<md5hashofemail>

URL の残りのオプションは次のとおりです。

したがって、ユーザーの電子メールの md5 ハッシュを返す md5 という関数を含めるだけです。これを行うオンラインはたくさんありますが、https://github.com/blueimp/JavaScript-MD5/blob/master/README.mdがうまく機能すると思います。その後、次のようにします。

// get the email
var email = $('#email').val();
// -- maybe validate the email? 

// create a new image with the src pointing to the user's gravatar
var gravatar = $('<img>').attr({src: 'http://www.gravatar.com/avatar/' + md5(email)});
// append this new image to some div, or whatever
$('#my_whatever').append(gravatar);

// OR, simply modify the source of an image already on the page
$('#image').attr('src', 'http://www.gravatar.com/avatar/' + md5(email));

これは明らかだと思いましたが、後世のために追加します。

ユーザーのメールが非公開で、この ala-stackoverflow をリストに表示している場合は、サーバー上でメールをエンコードして、ソースを見たときにユーザーのメールが公開されないようにすることをお勧めします。

Answer 2

関数を提供する私のフィドルをチェックしてください

get_gravatar_image_url (email, size, default_image, allowed_rating, force_default)

電子メールの提供のみが必須です。残りはデフォルト値を使用します。

Joseph Myersの事実上の標準MD5 ジェネレーター JS ファイルも必ず含めてください。

<script src="http://www.myersdaily.org/joseph/javascript/md5.js"></script>