wordpress facebook公式pluginの設定方法

WEB制作, wordpress

wordpressのfacebook公式pluginを導入してみました。
(リアルで友達少ないので、いいねしてくれる人間がほぼ皆無だけどorz)

jetpackの機能使ったら滅茶苦茶簡単に出来ますが、jetpack重いし他のpluginは日本語の情報が少ない・・・

■出来ること

いいねボタン・シェアボタン追加
send(送信)ボタン追加
Recommendations Bar追加
(ページ下部付近までスクロールしたらおススメ記事を表示するやつ)

Comments Box追加
(これは何故かエラーが出て設定できなかった)

記事投稿時にfacebookに自動共有
(APIの使用が変わったらしく断念)

記事を書いてる途中でこんな記事を見つけた。後で試してみる。
自動記事投稿に関してはこちらのブログで解説とコードが公開されています。
サルでもできるかもしれないFacebook連携 | 日記の間 | あかつきのお宿

スポンサーリンク

導入方法

WordPress › Facebook « WordPress Plugins

公式ページからダウンロードして使うか、pluginのインストールページからインストールする。

Like Button ‹ 人生を変える猫の魔法 — WordPress (1)

インストールして有効化をすれば、管理画面のサイドメニューに【facebook】の項が表示されるので、クリックして開く。

Facebook Plugin Settings ‹ 人生を変える猫の魔法 — WordPress

まずはfacebookでアプリケーションの登録と作成を行わなければならないので、表示されたリンク先に行く。

デペロッパー登録をしていればそのまま手順どおりに進んでも問題ない。
登録していなければ、登録しなければならない。

下記リンクがデペロッパー登録に関して詳しく書かれているので登録して無い場合はそちらから。
■開発者登録の手順 – Facebook開発者の為のサポートサイト | fb.developers’+

All Apps

表示されたページの右上あたりに【+ Creat New APP】のボタンがあるのでクリック。

All Apps (1)

新しいアプリを作成するウィンドウが開くので入力欄にそれぞれ入力。

【Display Name】
アプリケーションの表示名、ブログ名とかでもOK。

【Name Space】
画像の例ではエラーで拒否される。
入力文字に制限があるのか、何回か拒否された。

ダメなパターンは

・数字が入っている
・半角大文字が入っている
・_(アンダーバー)が入っている

何回か試して7文字以上の半角小文字アルファベットのみでいけた。

All Apps (2)

画像認証
余談だけど海外の画像認証って滅茶苦茶読み取りづらいですよね?自分だけかな?

11neko

これでアプリケーションは作成完了。
ここから更に細かい設定をしていかないと機能しません。

アプリケーションの設定

11neko (1)

まずはWEBサイトと連携させる為に画面下部にある【+ Add Platform】をクリック。

11neko (2)

【Web Site】を選びます。

11neko (4)

入力フォームが出来るので自分のブログURLを入力する。

11neko (3)

続いて【ADD Domains】に自分のブログのドメインを入力して【Save Changes】
エラーが出て保存が出来ない場合は、【+Add Platform】から、App on Facebookを追加。
入力欄のCanvas URLにブログURLを追加して保存する。

11neko (5)

Open Graphの設定

左メニューの【Open Graph】を開く。

11neko (6)

Objyect Typesのタブを開く。

11neko (7)

既にObject TypesにArticleがあれば何もする必要が無い。

無ければ【+ Add Objyect Type】をクリックし【article】と入力し追加する。

11neko (8)

次にAction Typesのタブに移動。

11neko (9)

【+ Add Action Type】から追加、【Publish】と入力して保存。

11neko (10)

追加後設定を確認。
Action Typesに【Publish】が既にあっても、設定を確認する必要がある。

【Action Types】の【Publish】をクリックし、設定画面を開く。

11neko (11)

ページ下部にチェックを入れる項目があるので次の項目にチェックを入れる。
・Tags
・User Messages
・Explicitly Shared

これでfacebook側での設定は完了です。

ブログ側の設定でAPP IDとApp Secretを使うのでコピーしておくか、ページは開いたままにしておく。

ブログ側の設定

Facebook Plugin Settings ‹ 人生を変える猫の魔法 — WordPress (1)

wordpressのfacebook pluginの設定ページに戻り、【App ID】と【App Secret】を入力して保存する。

Facebook Plugin Settings ‹ 人生を変える猫の魔法 — WordPress (2)

Restrictionsの項にChild-Directed Siteとチェックする所がある。
よく分からないがgoogle翻訳で翻訳したら【あなたのサイトは13歳未満の米国の子供たちに向けられている?】と翻訳された。とりあえず米国の子供向けでは無いが、13歳未満の子供たちにも見れる内容にはなっているのでチェックを入れておいた。マジで英語分からん。

Like Button Settings

これは通称【いいねボタン】と【シェアボタン】のセッティングページ。

Like Button ‹ 人生を変える猫の魔法 — WordPress

【Show on】
いいねボタンを表示させるページの設定。
チェックを入れたら表示をする。

大体の設定は記事ページの【post】のみかな?

【Position】
表示位置の設定
before the postが記事上部
after the postが記事下部
before&after the postが両方

【Share Button】
ここにチェックを入れると、シェアボタンも表示する。

【Layout】
表示のレイアウト
画像はシェアボタンも表示させている例

■standard — Display social text next to the button.
ページの後ろにふんわりエフェクトを追加してくれるcube.js   人生を変える猫の魔法 (1)

■button_count — Display total number of likes next to the button.
ページの後ろにふんわりエフェクトを追加してくれるcube.js   人生を変える猫の魔法 (2)

■box_count — Display total number of likes above the button.
ページの後ろにふんわりエフェクトを追加してくれるcube.js   人生を変える猫の魔法

【Show faces】
レイアウトをstandardにしている場合のみ有効
チェックを入れるといいねした人のfacebookのプロフィール画像が表示される。
ページの後ろにふんわりエフェクトを追加してくれるcube.js   人生を変える猫の魔法 (3)

【Width】
表示領域の横幅

【Action】
likeはいいね
recommendはおすすめ

恐らく文面の違いのみ

【Font】
font-familyの設定

【Color scheme】
デザインの設定

Send Button Settings

メールやfacebookメッセージでの共有ボタンの表示。
表示例は下の画像みたいな感じ。

7回の命の危機を乗り越えたリアルダイハード男が凄い!   人生を変える猫の魔法

Send Button ‹ 人生を変える猫の魔法 — WordPress

【Show on】
表示させるページの設定。

【Position】
表示位置の設定

【Font】
font-familyの設定

【Color scheme】
デザインの設定

Recommendations Bar Settings

人気のブログとかでよく見る、ページの下部でひょこっとおススメ記事を表示してくれる機能。

Recommendations Bar ‹ 人生を変える猫の魔法 — WordPress

【Show on】
表示するページの設定

【Side】
ページの左下部か右下部の表示選択

【Action】
likeかrecommendの選択

【Trigger】
動作パターンの選択。

おすすめは After a visitor scrolls through % of the total page height.
ページのどこまでスクロールしたかでひょこっと表示してくれる。

【Read time】
指定時間後にひょこっと表示させる。

【Number of recommendations】
記事の最大表示数

【Maximum age】
最大何日までの過去の記事を表示させるか。
0だと制限無し。

表示例
wordpress facebook公式pluginの設定方法   人生を変える猫の魔法

Social Publisher Settings

ここの設定で記事投稿時にfacebookに自動投稿できるようになる。

Social Publisher ‹ 人生を変える猫の魔法 — WordPress

ここはちょっとまだよく分かってないです><

3番目の【Authenticate with Facebook to allow your Facebook application to post to your Timeline or Page on your behalf when a post is published X】×ってなってるんでエラーになってるんですよね。ここの解決方法が分からないけど、サルでもできるかもしれないFacebook連携 | 日記の間 | あかつきのお宿さんの方法だったら解決できそうな気がする。

【Publish to my Timeline】
記事公開時にfacebookのタイムラインに公開。
エラーが出てるので設定できず。

【Enable Open Graph features】
グラフを開く機能を利用してfacebookのタイムラインへ投稿

【Facebook Page】
記事公開時にfacebookページへ自動投稿する設定。
Publish to a pageのAdd a Facebook account to your WordPress accountから設定する。

リンクを開くと、プロフィールのページに移動するので一番下までスクロール。

プロフィール ‹ 人生を変える猫の魔法 — WordPress

Associate my WordPress account with my Facebook account and allow new posts to my Facebook Timelineをクリックし認証をする。

これで導入完了です。

あとがき

設定で記事の上下に共有ボタンも追加できますが、ウィジェットも数種類追加されます。
気分的な問題かもしれませんが、他のSNS設置pluginに比べて動作が軽いような気もします。

これで【いいね】が少しでももらえたらいいな・・・

この記事が気に入ったら
『いいね』しよう!