Hiển thị ảnh đại diện Gravatar sử dụng JavaScript

Gravatar là chữ viết tắt của “Globally Recognized Avatar“, dịch sang Tiếng Việt gọi là ảnh đại diện được nhận dạng trên toàn cầu. Đây là một hình ảnh có kích thước nhỏ nằm gần tên của bạn trong khi bạn gửi bài viết hoặc bình luận trên blog WordPress hoặc các dịch vụ liên quan.

Ảnh đại diện Gravatar được lưu cho từng email, và chúng ta cần gửi mã md5 của email đó đến Gravatar để lấy ảnh đại diện. Nếu sử dụng PHP, các bạn chỉ cần sử dụng md5() là có thể sử dụng như bài hướng dẫn này.

Bài viết này hướng dẫn sử dụng Gravatar bằng JavaScript, chính xác hơn là jQuery.

Tài nguyên sử dụng

Bạn cần tải về jQuery MD5.JS.

Tải về

Để sử dụng, bạn cần có jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="jquery.md5.min.js"></script>

Giới thiệu Gravatar

Để lấy ảnh đại diện, các bạn gửi mã md5 của email về địa chỉ https://www.gravatar.com/avatar/....

Ví dụ: https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50 sẽ được kết quả.

Gravatar Example

Để chỉnh kích thước, bạn cần thêm biến số ?s=, kích thước hỗ trợ là từ 1px đến 2048px.

Ví dụ: https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=500.

Gravatar Size Example

Trường hợp không có ảnh, bạn cần hiển thị một ảnh mặc định. Gravatar hỗ trợ 7 loại ảnh mặc định:

404
mp
identicon
monsterid
wavatar
retro
robohash
blank

Default
Default
Default
Default
Default
Default

Sử dụng bằng cách truyền vào biến số ?d=, ví dụ: https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?d=retro.

Sử dụng với Javascript

Sau khi chèn jQuery và MD5, các bạn sử dụng như sau.

var userEmail = '[email protected]';
var md5Email = $.MD5(userEmail);
var avtUrl = 'https://gravatar.com/avatar/' + md5Email + '?&d=retro&size=65';
document.write('<img src="' + avtUrl + '" alt="Avatar" />');

Chúc các bạn thành công!