ブログ(Blog)

WordPressの設定 その2

その2は、SNSとの連携について・・・

くまはちの覚書です。

ちょっと長文になります。この設定無理かもって思う方は、有料で設定代行します。

likebox2

例えば、facebookのLikeBoxやTwitterのウィジェット・Google+のウィジェットなど・・・

また、facebookは、OGPの設定なども・・・

これらは、まずプラグインを使います。

FacebookのLikeBoxから・・・

Guerrilla’s Facebook Like Box Widgetを使用しています。

プラグイン→新規追加→Guerrilla’s Facebook Like Box Widgetを検索

すると一覧に出てくるので「今すぐインストール」をクリック

数秒後にインストールされています。「有効化」をクリックします。

widget01

左のメニュー「外観」の中に「ウィジェット」が入っています。そこをクリックします。

widget02

するとこの画面になります。

widget03

赤枠の部分がさっきインストールして有効化したウィジェットですよ。

widget04

横にあるメインサイドバーにドラッグします。(あっこれWindowsの方ね。)

ドラッグとは、クリックしたままスライドさせることですよ。

widget05

画像の通り入力したら、保存をクリックして完了です。

どうですか?

くまはちと同じようにFacebookのLikeBoxが表示されていますか?

次にOGPの設定をします。

最初に準備からですよ。

https://developers.facebook.com/

上のアドレスにアクセスします。

dev_ogp01

するとこんな画面が出ます。赤丸の部分ウェブをクリックします。

dev_ogp02

するとこんな画面に・・・えー全部英語やん・・・

赤丸の「OpenGraph」をクリックします。

dev_ogp03

するとこんな画面に・・・赤丸の「Get Started」をクリックします。

dev_ogp04

この画面が出てきておっ日本語で読めるラッキー・・・

赤丸の「日本語」をクリック

dev_ogp05

やった・・・これで普通に読める・・・少しスクロールします。

dev_ogp06

赤丸部分の「アプリダッシュボード」をクリックします。

dev_ogp07

ここで「新しいアプリを作成」ボタンをクリック

dev_ogp08

するとこんな画面が出てきます。アプリ名「OGP」空間名「kumaogp」で作成

dev_ogp09

これで「続行」をクリックします。

dev_ogp10

するとセキュリティチェックが・・・これも入力して終わらせます。

dev_ogp11

するとこんな画面が出てきます。

ここで上の赤枠部分のApp ID:と数字をメモします。

メモ帳にコピペしてもいいですね。

次に自分のfacebookのタイムラインを開きます。

どれでもいいので写真をクリックしてください。

dev_ogp12

その時に表示されるアドレスバーのURLの一部が必要・・・

赤枠で囲んだ部分の数字があなたのfacebookでのIDになります。

これもメモします。

これでWordPressに戻ります。

プラグインをインストールします。

使用するのは、「Open Graph Pro」です。

先ほどの要領でインストールして有効化します。

dev_ogp13

するとそのまま設定画面が・・・ならない場合は、左メニューの設定の中に「Open Graph Pro」があるのでそこをクリックしてください。

Object Typeは、Blogのままで

Admin user IDは、写真を開いて調べたURLの一部を入力

Application IDは、OGPを作成したときのAPP IDを入力します。

どちらも数字のみですよ。

dev_ogp14

ここまで来たら「変更を保存」クリックしてOGPの設定終わりですね。

どうですか?くまはちと同じようにできていますか?

次にTwitterGoogle+のウィジェットを追加します。

新たなプラグインを使わずシンプルにサクっと終わらせましょう。

左メニューの「外観」の中にある「ウィジェット」を開きます。

dev_ogp15

Likeboxの時と同じように右のメインサイドバーにドラッグします。

dev_ogp16

ドラッグしてタイトルとテキストボックスに入力します。

テキストボックスに入れるソースを作成します。

まずは、TwitterからしますのでTwitterを開きます。

くまはちの例に沿って進めてくださいね。

tw_widget01

開くと赤丸の歯車のマークをクリックします。

tw_widget02

すると上の画像のように出ますので「設定」をクリック

tw_widget03

画面の左側に上の画像のように出てくるので「ウィジェット」をクリック

widget06

上の画面になります。

赤枠のテキストボックスにソースが表示されますのでWordPressのウィジェットにコピーペーストします。Likeboxもソースからここに入れても問題ないです。

どうですか?くまはちと同じようにTwitterのウィジェット表示されていますか?

次にGoogle+のウィジェットを作成します。

まず、自分をフォローしてもらうウィジェットは、下記にアクセスします。

Google+ Widgets
http://widgetsplus.com/

g_widget01

赤枠の中のボタンをクリックします。

g_widget02

この画面になります。赤枠の部分にGoogle+でのIDを入れます。

必ず自分のIDを入れてくださいね。同じようになるとくまはちしか出てきませんよ。

g_widget04

Google+でプロフィールを開いた時のアドレスの一部がIDになります。

g_widget03

するとコードが表示されます。

このコードを先ほど貼り付けたTwitterのソースの下に貼り付けます。

どうですか?くまはちと同じようにあなたのGoogle+のADD MEが表示されていますか?

次にGoogle+ページのバッジのウィジェットのソースを作成します。

下記のサイトにアクセスします。

Google+ Badge
https://developers.google.com/+/web/badge/

g_widget05

Google+ページ作成していると選択できるようになっています。

個人ページも作成できます。

Google+にログインした状態でアクセスしてくださいね。

g_widget06

上の画像にあるようにソースをコピペします。

どうですか?

くまはちと同じように表示できていますか?

かなり長文でしたが、facebookTwitterGoogle+の連携設定の覚書でした。