EJPスタッフブログ

ソフトウェアやボードゲームの開発を行うEJP株式会社のスタッフブログです。

トップ > flickr > Awesome Flickr GalleryでWordPressに画像ギャラリーを追加する。

Awesome Flickr GalleryでWordPressに画像ギャラリーを追加する。

flickr gallary photo Wordpress プラグイン ワードプレス

こんにちは。

ずっと、WordPressのウィジェットとして、Flickrのギャラリーを表示するプラグインを探していたのですが、ようやく良さげなものを見つけたので、設定方法を紹介します。

Awesome Flickr Galleryのインストール

プラグインの名前は「Awesome Flickr Gallery」です。 WordPressのプラグイン検索からインストールすることが可能です。

インストールすると、再度バーにメニューが追加されます。

スクリーンショット 2013-03-15 1.18.58

メニューの「Default Setting」を選択して、設定を進めていきますが、以下の情報が必要になってきます。

  1. Flickr API Key
  2. Flickr API Secret
  3. Flickr User ID

Flickr API Key／Flickr API Secret

これは以下のリンクからFlickrの自分のアカウントにログインして取得可能になっています。 「http://www.flickr.com/services/api/keys/」 FlickrにログインするとAPI Keyの作成にともなって、各種情報の選択が必要になってきます。

まずは、サイトが商用か、非商用かを選択する必要があります。

非商用の場合

      • Your app doesn't make money.
    →要するにあなたのアプリ（サイト）は有償かどうかを確認しています。
      • Your app makes money, but you're a family-run, small, or independent business.
    →広告収入などがあるかもしれないが、個人運営の小規模なサイトかどうかを確認しています。
      • You're developing a product which is not currently commercial, but might be in the future.
    →現在は非商用の製品であるが、将来としては商用化するかもしれない製品を開発しているかを聞いています。
    • You're building a personal website or blog where you are only using your own images. →サイトは自分の写真や個人的なブログであるかを確認しています。

商用の場合

 

    • You or your agency works for a major brand.
      • →あなたはメーカーやブランドとして作業しているか確認しています。
    AND one of the following: →次のいずれかであるか。
    • You want to make a profit.
      • →これにより、利益が必要であるかを確認しています。
    • You charge a fee for your product or services.
      • →あなたが作成した製品やサービスは有料であるかどうかを確認しています。
    • You will bring Flickr content into your product and intend to sell those services.
      • →Flickrのコンテンツを使用したサービスの販売を行うかを確認しています。

今回は、個人で小規模のブログなので、「非商用」を選択します。

アプリケーションの名称（ウェブサイトならばサイト名など）と、説明を記載します。 それから、各種規約への同意のチェックボックスにチェックをいれて、「SUBMIT」を押下します。

これで、次の画面で「Key」と「Secret」が生成されるので、「Awesome Flickr Gallery」の設定画面で入力します。 設定画面の「Flickr API Key」に「Key」を、「Flickr API Secret」に「Secret」を、「Flickr User ID」にユーザー名を設定します。

これでひとまず設定を「Save changes」で保存してみます。

詳細設定へ

ここまで進むと、設定画面の上部にメッセージが表示されます。 スクリーンショット 2013-03-15 1.46.57

「W3 Total Cache」などのキャッシュ作成プラグインを作成している場合は、キャッシュをクリアする必要があるようなメッセージが出力されています。 また、実際にプラグインを使いはじめるには「Grant Access」ボタンを押下して権限の不要が必要になっています。

まずは、「Grant Access」で権限を付与します。 むむむ？？？

Flickrのサイトに飛びましたが、コールバックURLが設定されていないというような警告メッセージが表示されました。

どうやら、Flickrキーの作成がまだ中途半端だったのかもしれません。 Flickrのサイトで、ログイン後、右上に表示される自分のアカウントにカーソルを当てて表示される「Settings」に移動します。 「Sharing & Extending」タブをクリックします。 「Your API keys」の項目に表示されているリンクをクリックしてKeyの設定を実施します。

そこで、先ほど作成したKeyが表示されていると思いますので、タイトルをクリックします。

って、いろいろいじりましたが、違うようです。。。 よく、確認したら、「Flickr User ID」に誤って「Screen Name」を設定していました。 ユーザIDとは別なようです。

自分のユーザーIDは以下のサービスで簡単に調べられました。 「http://idgettr.com/」

それからそれから、「Flickr API Secret」についてはPrivateな写真を載せる場合に必要なようです。。 その為、とりあえずギャラリーの表示に関しては入力不要なようです。

では、「Flickr API Secret」は削除して改めてセーブします。 設定画面の最下部にキャッシュのクリアボタンもあるので押下しておきます。

Advanced Settings

これはCustom CSSを設定できるようですが、ひとまず未設定で運用してみます。

スクリーンショット 2013-03-15 2.28.08

あとは挿入したい場所に　［AFG_gallery］（表示上かっこを全角にしています。半角にしてください） 　タグを入れればOKです！！ ウィジェットに入れたい場合は、テキストウィジェットを選択して、［AFG_gallery］を入れるだけで大丈夫です。

あとは表示を色々いじって成形してみましょう！！