頑張らない!でも諦めない!必死にならずにええかげん

Gravatar™プロフィールウィジェットをJetpackを利用して表示する

      2014/11/22

Gravatar™プロフィールは利用しているでしょうか。
プロフィールと言えばGoogle+などが普及していますが、
Gravatarにアイコン画像などを登録している場合は、
WordPressのウィジェットを利用してプロフィールを表示することができます。

はじめに

GravatarプロフィールはWordPressを利用しているとよく目にするプロフィールです。
WordPress.orgのコミュニティーでディスカッションするときに、
表示されるアイコンもGravatarです。

当然、WordPressのコメントを行う時にも利用することができます。
そうしたGravatarのプロフィールをウィジェットで表示することができます。

環境

  • WordPress: 3.7.1
  • JetPack: 2.5

2014/01/21現在のJetPackバージョンは2.7ですが、
以下の相性の問題がありましたので、2.5を採用しています。
JetPackのカスタムCSSエディタのACE Code Editorが表示されない場合

利用方法

Gravatarプロフィールウィジェットを利用するには、JetPackを有効化する必要があります。

詳細は以下でご紹介しています。
23.追加ウィジェット-Jetpack by WordPress.com

JetPackを有効化し、追加ウィジェットの機能を有効にすると、
[外観]-[ウィジェット]を選択して「ウィジェット」を表示します。

ウィジェットの使用できるウィジェットのエリアに対して、
「Gravatarプロフィール(JetPack)」が表示されます。

01_Gravatarプロフィールウィジェット

Gravatarプロフィールウィジェット

表示されているウィジェットをサイドバーなどの表示したいエリアに対してドラッグします。

02_Gravatarプロフィールウィジェット設置

Gravatarプロフィールウィジェット設置

ドラッグしたウィジェットを編集し設定を行います。

03_Gravatarプロフィールウィジェット設定

Gravatarプロフィールウィジェット設定

Gravatar プロフィール (Jetpack)

Gravatar プロフィールの概要は以下の通りです。

Gravatar ミニプロフィールを表示

Gravatar プロフィールの表示にはGravatarに登録する必要があります。
一応、Gravatarの説明は以下で確認できます。
Gravatar – グローバルに認識されるアバター (Globally Recognized Avatars)

設定

設定項目を順を追って記載します。

タイトル

タイトルにはウィジェットタイトルを入力します。
入力した文字がそのままウィジェットのタイトルとして表示されます。

04_設定・タイトル

設定・タイトル

ユーザーを選択するか、「カスタム」を選んでメールアドレスを入力します。

Gravatorの仕組みとしてアイコンを取得する基準となるものが、メールアドレスです。
Gravatorにアイコンを登録した際に利用したメールアドレスに基づいてプロフィールが取得されます。

この設定ではWordPressに登録済みのユーザーのメールアドレスを基準に、
Gravatorプロフィールにリンクされます。

また直接、メールアドレスを入力してリンクさせることも可能です。

その為、選択したユーザーのメールアドレスがGravatorに登録されていない場合には、
以下のようにエラーが発生し、表示されます。

05_設定・ユーザー選択

設定・ユーザー選択

パーソナルリンクを表示

パーソナルリンクではGravatorプロフィールに設定されているWebSiteが表示されます。

06_設定・パーソナルリンク表示

設定・パーソナルリンク表示

アカウントリンクを表示

アカウントリンクを表示ではGravatorプロフィールで認証済みアカウントとして
登録されているサービスのアイコンが表示されます。

Gravatorプロフィールで認証済みアカウントの詳細については以下でご紹介しています。
Gravatarアカウントに外部プロフィールやWordPress(XML-RPCのAPI)を認証する

実際に連携可能なアカウントをすべて設定すると以下のように表示されます。

07_設定・アカウントリンク表示

設定・アカウントリンク表示

各認証済みサービスからのリンク先表示

ウィジェットに表示した各認証済みアカウントのリンク先は、
各サービスのプロフィールになります。

※ただし、vimeo、Youtubeでは生成されるプロフィールページのURLが誤って生成されます。

Blogger

認証済みサービスから生成されるリンク
blogger.com (http://www.blogger.com/profile/09066484306000446097)

08_Bloggerプロフィール

Bloggerプロフィール

Bloggerで利用されているプロフィールサービスの
Bloggerプロフィールまたは、Googleプロフィール(Google+)のどちらかにリンクされます。

Blogger™に割り当てたBloggerプロフィールをGoogle+プロフィールに変更する手順
Blogger™に割り当てたGoogle+プロフィールをBloggerプロフィールに戻す手順

またプロフィール公開がうまくいかない場合の対応については以下でご紹介しています。
Blogger™に割り当てたBloggerプロフィールの公開がうまくいかない場合

Facebook

認証済みサービスから生成されるリンク
algorhythnn (https://www.facebook.com/algorhythnn)

09_Facebookプロフィール

Facebookプロフィール

Flickr

認証済みサービスから生成されるリンク
algorhythnn (http://www.flickr.com/people/algorhythnn/)

10_Flickrプロフィール

Flickrプロフィール

foursquare

認証済みサービスから生成されるリンク
foursquare.com (http://foursquare.com/user/76830536)

11_foursquareプロフィール

foursquareプロフィール

Goodreads

認証済みサービスから生成されるリンク
goodreads.com (http://www.goodreads.com/user/show/27919474-algorhythnn)

12_Goodreadsプロフィール

Goodreadsプロフィール

Google Profiles

認証済みサービスから生成されるリンク
Googleプロフィール(Google+)に常にリンクされます。
profiles.google.com (http://profiles.google.com/101123762590074071270)

13_Google Profiles

Google Profiles

LinkedIn

認証済みサービスから生成されるリンク
algorhythnn (http://www.linkedin.com/in/algorhythnn)

14_LinkedInプロフィール

LinkedInプロフィール

TripIt

認証済みサービスから生成されるリンク
TripIt | Online travel itinerary and trip planner (都合によりURL明記しません)

15_TripItプロフィール

TripItプロフィール

Tumblr

認証済みサービスから生成されるリンク
algorhythnn (http://algorhythnn.tumblr.com/)

16_Tumblrサイト表示

Tumblrサイト表示

Twitter

認証済みサービスから生成されるリンク
@algorhythnn(http://twitter.com/algorhythnn)

17_Twitterプロフィール

Twitterプロフィール

Vimeo

認証済みサービスから生成されるリンク
user24460441(http://user24460441/)

URLが誤って生成され、表示できません。

18_Vimeoプロフィール(エラー)

Vimeoプロフィール(エラー)

正しいVimeoのプロフィールページは以下です。
algo rhythnn on Vimeo(https://vimeo.com/user24460441)

WordPress

認証済みサービスから生成されるリンク
algorhythnn.jp (http://algorhythnn.jp/blg/)

19_WordPressサイト表示

WordPressサイト表示

Yahoo!

認証済みサービスから生成されるリンク
profile.yahoo.com(http://profile.yahoo.com/6R4HPLC6MSUMMN3IAORLL5TXWU)

20_Yahoo!プロフィール

Yahoo!プロフィール

Youtube

認証済みサービスから生成されるリンク
iW1gjw573AD9WVxcLJ0sCg(http://www.youtube.com/user/iW1gjw573AD9WVxcLJ0sCg)

URLが誤って生成され、表示できません。

21_Youtubeチャンネル表示(エラー)

Youtubeチャンネル表示(エラー)

正しいVimeoのプロフィールページは以下です。
h take naka – YouTube (http://www.youtube.com/channel/UCiW1gjw573AD9WVxcLJ0sCg)

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

Gravatar プロフィールウィジェットのご紹介は以上です。

Gravatar プロフィールに登録している必要はありますが、
簡単に設置が行え、Gravatorプロフィールを管理しているすべてのサイトに設置するという利用法をすると、
ウィジェットの一元管理が行えてより効率的にサイト間をリンクさせることができるのではないでしょうか。

参考

Gravatar Profile Widget — Jetpack for WordPress


WordPressはWordPress Foundation の登録商標(第5049965号)です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。

Gravatarは、Automattic Inc.の商標(第5202227号)です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介
すべて展開 | すべて省略

Rakuten Promotion

ページ
すべて展開 | すべて省略

 - jetpack, WordPress , ,

  関連記事

eye_jetpack
(復旧可能)私はこうして「JetPackのサイト統計がリセットされた」

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_local_wordpress
wordpressプラグインのバージョン違いをテスト(動作確認)する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
19_06.scribdドキュメント表示には、Jetpackのscribdショートコード埋め込み

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
WordPressの管理画面へのログインを個別に制御する手順

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_linkedIn
LinkedIn™への共有をJetpack by WordPress.comで行う動作

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_digg
Digg™への共有をJetpack by WordPress.comで行う動作

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
【再投稿】投稿の前後挿入にPost6WidgetArea_v0.6.2-wordpressプラグインを利用

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_local_mysql
ローカル環境へのMySQL設置

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_gravatar
Gravatarアカウントの認証済みサービスのBloggerが利用できない場合の対処法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
Zenbackプラグインで利用のスクリプトコードを取得する

Google or AdMax Promotion(it) 禁断の機能がau公式 …