No. 1716
投稿内容カテゴリー
amazon


Photo Express for Google


Palmo (パルモ)「片手でラクラク いつも安定、安全、安心」

1) 2017-10〜2018-07間のブログの画像が表示されない理由が判明しました。投稿記事内の画像リンクの共有設定がなされていないことが原因でした。

2) 現在、私の思い入れの強い記事、気付いた記事から随時リンクの貼り直しをしていっています。(主に飲食系、FSP、FFP系などから)。仕事の都合などで当面画像が表示されないご不便をおかけすることお詫びいたします。

スポンサーリンク
336×280 レクタングル(大)




ブログランキング

その買うを、もっとハッピーに。|ハピタス

『裏』ブログ作成を機に

wordpressで、googlephotoから簡単に画像を取り込むプラグインは無いのか!?と調べてみたらありました。(^ー^)

Photo Express for Google
Browse and select photos from any public or private Google+ album and add them to your posts/pages. This is an unofficial fork of "Picasa and Goo …

こちらを参考に設定を備忘録として残します。

http://blog.pleeds.com/web/wordpress-google-photo

こんな感じで、投稿画面でGoogleフォトの画像がモーダル上に表示されて、クリックで簡単に画像を挿入可能。

Photo Express for Googleモーダル

Photo Express for Googleをインストール

プラグイン新規追加で「Photo Express for Google」を検索し、インストール

Photo Express for Googleをインストール

「プラグインを有効化」リンクをクリック

プラグインを有効化

Photo Express for Googleの設定

Googleフォトの画像を挿入できるように設定。
設定を行わないと、以下のように画像が表示されず、Googleフォトの画像が挿入できない。

Googleフォトの画像が表示されない

Photo Express for Googleの設定画面表示

「設定」 > 「Photo Express for Google」で設定画面を表示。

「Click here to configure private access to Google Photo」リンクをクリック

「Google OAuth Client Details」の設定のStep1の画面が表示される。
9、10に記載されているURLをテキストエディターなどに残しておく。後で使用。
Google OAuth Client Details Step1

Google OAuth Client Details Url

「Google Developer Console」リンクをクリック

Google APIのプロジェクト作成画面が表示される。
プロジェクト名に任意の名称を入力し、同意するの「はい」にチェックを入れて「保存」ボタンをクリック。
プロジェクト名は何でもいい。「Photo Express for Google」で良し。

Google Developer Consoleプロジェクト作成画面

 OAuth同意画面の設定

プロジェクトの作成が完了すると認証情報の画面になり、「OAuth同意画面」のタブが出てくるので、「OAuth同意画面」のタブをクリック。
メールアドレスにはGoogleにログインしたメールアドレスが入力されているので、そのままでOK。
「ユーザーに表示するサービス名」に任意の名称を入力します。
「Photo Express for Google」で。
「保存」ボタンをクリックし、保存。
Google Developer OAuth同意画面

 認証情報の設定

「認証情報」タブをクリックし、「認証情報を作成▼」ボタンをクリック
「OAuthクライアントID」を選択。

Google Developer 認証情報タブ

Google Developer OAuthクライアントID選択

認証情報の入力画面が表示されるので、以下の内容を入力し、「作成」ボタンをクリック

アプリケーションの種類 ウェブアプリケーション
名前 任意の名称。「Google Photo WordPress Plugin」など
承認済みのJavaScript生成元 「Photo Express for Googleの設定画面表示」で保存しておいた9のURL
承認済みのリダイレクトURI 「Photo Express for Googleの設定画面表示」で保存しておいた10のURL

Google Developer 認証情報入力

OAuthクライアントID(OAuth Client ID)とOAuthクライアントシークレット(OAuth Client secret)が表示されるので、テキストエディタなどに保存しておく。
保存したら、この画面(Google API)は閉じてもOK。

wordpressのPhoto Express for GoogleでOAuthの設定

wordpressのPhoto Express for Google設定画面に戻って、先ほどのOAuthクライアントID(OAuth Client ID)とOAuthクライアントシークレット(OAuth Client secret)を。
Photo Express for GoogleでOAuthの設定

入力が完了したら、「Save Details」ボタンをクリック。
「Continue」ボタンが表示されるので、クリック。

Photo Express for Google OAuthのContinueボタン

Photo Express for GoogleのSTEP2の設定

「link」リンクをクリック。
「写真と動画を管理」の許可リクエスト画面表示されるので、「許可」をクリック。
Photo Express for GoogleのSTEP2

Photo Express for GoogleのSTEP2の許可リクエスト画面

ここでエラー画面が表示される場合あり。
「400. That’ an error. Error: redirect_uri_mismatch」のエラー。
これは、「認証情報の設定」のところで「承認済みのJavaScript生成元」「承認済みのリダイレクトURI」を未入力または、間違っている場合にエラーに。
400. That' an error. Error: redirect_uri_mismatch

Successfully・・・が画面に表示されていればOK。
Successfully

%d人のブロガーが「いいね」をつけました。