facebook-page-plugin_ecmg

ワードプレス

「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWordPressウィジェットに設置しよう

facebook-page-plugin_00

どん!

ね・・あれ、見たことない?

あ!知ってる!毎日見る!露出度ハンパないよねー

・・名前なんやったっけ?

くォラァっ!!!・・・あ、「ページプラグイン」ってゆーんすけど・・ 知りません?

facebook-page-plugin_00

ごめん、ピンとこーへんわ

残念ながら、名前はあまり知られていない。しかしその容姿は端麗。あらゆる場所でひっぱりだこ。そんなケナゲな「ページプラグイン」お嬢さまをWEBサイトに設置しましょう。

Facebookページとの連携はメリットが大きい。だってこんな「SNSってどーもニガテ・・」な私のサイトでさえ、購読してくれている人がいるのだから。設置も簡単。じゃあ早速。

Facebookの開発者登録をする

まずはサクッと開発者になりましょう。FacebookページとWEBサイトを連携させる、いろんな時に便利になる登録です。もちろん無料。時間もかかりません。

サラリと終える開発者登録。FacebookのApp ID(アプリID)とApp secretの取得方法・調べ方

今回は上の記事中説明の「開発者登録」まででOK。

実は現在、「ソーシャルプラグイン」と呼ばれている類のものは、開発者登録なしでも作れる状態なんですが・・・

facebook-app-id-app-secret_03-1

ガンガン更新されるFacebookの仕様変更やバージョン管理など、将来的な側面も考慮して、登録しておくことをおすすめします。

ちなみに、下のようなWordPressプラグインなどに必要となる「App ID・App secret」取得には、開発者登録が必須 そんな応用力もあるワケです。

便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cacheの設定方法と有効的な使い方

ページプラグインを作成する

早速作ります。Facebookページ管理者アカウントでログインした状態で下の公式ページへ。

facebook for developers | ページプラグイン 

facebook-page-plugin_02

FacebookページのURL以外は好みに設定してください。項目を埋めたり、チェックを外したりするだけで下に完成図がプレビューされるので、それを見ながら設定します。このサイトで(記事公開時)使用しているのは上の状態。

もうほとんどのWEBサイトがレスポンシブ対応していると思います。その場合は、「plugin containerの幅に合わせる」にチェックを入れておけば、設置場所に合わせて自動伸縮してくれるので便利。つまり、「幅」や「高さ」の設定はコダワリのない限り不要ですね。

「まま、まさかそんなところへ!」というアクロバティックな設置場所であれば、適宜指定してください。WordPressウィジェットへの設置であれば問題なし。

レイアウト例

例えば上の設定だとこんなかんじ。個人的にはシンプルで好みです。

facebook-page-plugin_01

「いいね!」をしてくれている人のサムネイル表示もできます。

facebook-page-plugin_03

「タブ」欄に「timeline」と入力すれば、Facebookページのタイムラインが表示されます。

facebook-page-plugin_04

facebook-page-plugin_05

レイアウト設定のヒント

設定画面内で少し下にスクロールすると、設定のヒントが記載されています。

facebook-page-plugin_06

英語アレルギー族にはビミョーに不親切なんですが、例えば「タブ」欄には・・・

facebook-page-plugin_07

「timeline」のほかにも「events」「messages」を入れ込むことによって、ページプラグインに表示させる内容を変更できることが分かります。カンマ区切りで組み合わせることもできるので、プレビューを見ながら好みのレイアウトにしてください。

レイアウトが決まったら「コードを取得」ボタンをクリック。2つのコードが現れます。

facebook-page-plugin_08

ゴチャゴチャとしてますが、全選択してコピペするだけ。ただ、「設置したいページ」によって、「貼り付ける場所」が変わります。というわけで、2通りに分けて紹介していきます。

1. サイト内のどこにでも自由に設置したい場合

facebook-page-plugin_ins1

まずはトップページ、記事ページ、アーカイブページ、固定ページなどなど・・ほとんどのページに設置したい場合のやり方。というか、これが通常のやり方です。

1つ目のコードを「header.php」へ追記

「外観」⇒「テーマの編集」⇒右カラムから「header.php」を選択。まず1つ目のコードをその中の「body」直下に貼り付けます。bodyタグの場所や表記はテーマによって多少異なると思いますが、例えばこんな感じ 

</head>
<body <?php body_class(); ?>>

 <!-- global menu -->

2行目が<body>。その下のハイライト部分に、1つ目のコード  を追記・保存すればOK

facebook-page-plugin_09

その他のカスタマイズなどで、既に同じ記述がある場合は追記不要です。

【関連記事】安全なカスタマイズのために。

「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡単解説!

2つ目のコードをウィジェットへ追記

もー後は自由。表示させたいページのウィジェットに2つ目のコードを貼り付ければOK。

facebook-page-plugin_11

facebook-page-plugin_10

終了。

2. 一部のページだけに設置したい場合

実は・・「いいね!」ボタンもろもろ、Facebookまわりのものをサイトに設置すると、ページ表示が重くなるんですよね。で、この「ページプラグイン」も例外じゃない。

ページ表示されるたびに、上の呼び出しコードが読込まれ、召喚されるわけです。んで、なんせ重い。太っちょさん。しばらく表示されないことさえある。でもCuteで魅力的。一家に一台。我が家にも置いときたい。近所のタニダさんもヤマネさんも、みんな買ーたゆーてたし。

facebook-page-plugin_ins2

ああ・・やっぱ魅力的や。設置したい。オマエがほしい。
(ちょっとだけ・・イメージと違うお嬢さんやったけど)

だから例えば、【トップページだけでいい】【記事ページだけでいい】など、設置したいページが限られている場合、そのページが表示されたときだけ、コードが呼び出せられればベストなわけです。そして断るまでもなく、上の画像はイメージです。

2つのコードをそのままウィジェットへ!

例として、トップページだけに設置します。2つのコードを順番に貼り付けるだけ。

facebook-page-plugin_08

facebook-page-plugin_12

これでトップページを表示した時だけ、ページプラグインを呼び出すコードを読み込むことになります。「header.php」に追記した場合は、どのページを表示する時も1つ目のコードを読み込みます。不要な時まで出勤してもらう必要はない。ちょっとした軽量化対策です。

終了。

知っておくとオトクなお話

facebook-page-plugin_ins3

ちなみに記事ページのみに設置したい場合、1つ目のコードは不要です。
・・・と言い切りたいところですが、条件があります。

記事ページにいいね!ボタンが用意されているWordPressテーマであること。

まあ多くの場合、記事ページにはデフォルトで用意されていると思います。

実は公式のいいね!ボタンを表示するためにも、今回と同じ、1つ目のコードが必要なんです。つまり、少なくとも記事ページでは・・既に1つ目のコードはどこかに記述されていて、呼び出される仕組みになっている、ということ。だから不要。さらに追記するメリットはありません。

ということで、記事ページのウィジェットには2つ目のコードだけを貼り付ければ設置完了。

facebook-page-plugin_11

facebook-page-plugin_13

で、トップページやアーカイブページには、「いいね!」ボタンを設置していることはあまりありませんよね。その場合は、1つ目のコードも必要になるということです・・・ワカル?・・・説明しててもほんまヤヤコイわこれ。

ウィジェットでのレイアウトが崩れる・・原因と対策

Facebookページで下のような「CTA」を設置している場合の注意点。

facebook-page-plugin_14

この場合、「詳しくはこちら」ボタンでホームページへリンクさせています。Facebookページではこういったいろんなリンクボタンを設置できるんですが、その場合、WordPressウィジェットに設置した瞬間、表示が崩れることがあります。本来ならこう表示されるハズが・・

facebook-page-plugin_15

facebook-page-plugin_16

うぉおズレとる!あぶない!

facebook-page-plugin_ins4

ページプラグイン設定画面では表示されていなかったので気づきにくいんですが・・

facebook-page-plugin_02

実際に設置したときにはじめて、Facebookページで設定していたCTAボタンが表示されるんですね。そしてWordPressウィジェットの多くは、幅300px。幅がキュッ!と縮小され、上のようなザンナイことになってしまうわけです。

ページプラグインでは本来の表示にする

CTAボタンが表示されているところはもともと、「シェア」ボタンなんです。

facebook-page-plugin_17

これであれば文字数も少なくて、ウィジェットにもキレイに収まるんですよね。

じゃあFacebookページのCTAを解除するしかない?

大丈夫。例の設定のヒントセクションを覗いてみると・・

facebook-page-plugin_18

ナルホド。じゃあ出力された2つ目のコードに、こんな記述を追記すれば!

 Before(デフォルト)

facebook-page-plugin_19

 After

facebook-page-plugin_20

facebook-page-plugin_22

facebook-page-plugin_21

ハーイおっけぇい。

ページプラグインでの表示だけ、デフォルトの「シェア」ボタンに変わってくれました

ページプラグインの下のフォローボタンたちは、今回の設定とは関係ありません。


以上、ちょっとだけページ表示速度を気にかけた、2通りの設置のしかたを紹介しました。用途によって、実際の作業は片方だけなのであっという間に設置できます

ページプラグインに表示される「Facebookページの背景画像」は、サイトデザインに合ったものを設定していることが多いはず。設置してもサイト全体の見栄え・バランスも崩れにくいでしょう。視覚的にも違和感なく、Facebookページの存在をアピールできます

SNSではどーも積極的な活動ができない私でも、「このサイトを見て」いいね!してくれている人たちがいる・・・嬉しいですね。紹介したとおり実装も簡単。ぜひ取り入れてみてください。

 こだわるあなたへ。本当はあわせて知っておきたい、状況別最善策。

瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読込み遅延を斬るっ!

 記事下でも、美しくアピール。

サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセンスよく設置する方法

 関連記事

魅力的なブログを今すぐ作れる。ワードプレステーマTCD【MAG】の有効的な活用方法とカスタマイズまとめ

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク
WordPressテーマ「MAG(TCD036)」

ピックアップ記事

  1. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…
  2. 【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  3. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする
  4. アレ?Chromeの表示文字、汚なくなった!? キレイなフォントを1分で取り戻そ…
  5. Twitterのシェア数表示を復活!「widgetoon.js & count.…

関連記事

  1. screenpresso-initial-setting_ec
  2. theme-manual-update_ec

    ワードプレス

    アップデート通知が来ない!?WordPressテーマを手動でアップデートする方法

    アップデート通知、なんでこないの?ある有名なストーリーがあります。…

  3. valuable-content-from-image_ec

    ワードプレス

    『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテンツ

    記事を見栄えよく、伝わりやすくするには?ブログ記事を書き始めると、…

  4. intuitive-custom-post-order_ec

    ワードプレス

    ほら、こんなに直感的。投稿記事の順番を並び替えるWordPressプラグインIntuitive Cu…

    記事の順番だって、自由に決めたい。ブログなどのトップページで表示さ…

  5. insert-card-link_ecmg

    ワードプレス

    クリックひとつで完成。Embedlyで見栄えの良いカード型の記事リンクを貼る方法

    リンク挿入、どうしてますか?記事を書いていると、「以前に自分が書い…

  6. sns-count-cache_ecmg

    ワードプレス

    便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cacheの設定方法と有効…

    必要な設定だけにフォーカス!「ページを表示するたびに、今のシェア数…

スポンサーリンク
魅力的なブログを、今すぐ作る。
tcd-mag

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. retina_ecmg
  2. todoist_ec
  3. extension-tools-for-bloggers_ec
  4. tcd-theme-user-review_ecmg
  5. adjust-the-button_ecmg
  6. tcd-theme-selection_ecmg
  7. business-books_ecmg
  8. display-speed_ec
  9. improvement-flow_ecmg
  10. todoist-extension_ecmg

ピックアップ記事

  1. todoist-class_ecrt
  2. jpg-gif-png_ecmg
  3. blog-contents_ecrt
  4. todoist-basic_ec
  5. widgetoon-js-count-jsoon_ecmg
  6. gif-animation_ec
  7. quicktag_ecmg
  8. tcd-css-customize_ecmg
  9. sns-count-cache_ecmg
  10. reset-button_ecrt

強みを見つけて、活かしていくために。

business-books

タスク管理で、自己管理。

todoist

おすすめ記事

  1. きれいにしっかり画像圧縮。WordPressプラグインCom…
  2. 小規模チーム、家族間の疎通に。Todoistで始める気軽なタ…
  3. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ペー…
  4. 【Retinaディスプレイ対応3】ねえ・・どうする?widt…
  5. メディア問題さん、さようなら。画像サイズを気ままに追加するプ…

魅力的なブログを、今すぐ作る。

tcd-mag

ブログのRetina対応、始めませんか?

retina-os-solution

最近の記事

  1. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  2. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  3. 魅力的なブログを今すぐ作れる。ワードプレステーマTCD【MA…
  4. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…
  5. 移動したいデスカ?TCDテーマMAGでダブルレクタングル広告…

ゆっくり、フシギなGIFアニメ。

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー…
  2. 最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くし…
  3. 【目的別】とっておきのWordPressテーマ比較。TCDテ…
  4. 【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分…
  5. 魅力的なブログを今すぐ作れる。ワードプレステーマTCD【MA…

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
  2. business-books_ecmg

    マーケティング

    【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分の強みを見つけて活か…
  3. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー目線レビュー
  4. tcd-mag_ecmg

    ワードプレス

    魅力的なブログを今すぐ作れる。ワードプレステーマTCD【MAG】の有効的な活用方…
  5. todoist_ec

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
PAGE TOP