momokuri’s blog

セミリタイアに憧れるアラフォーITエンジニアの雑記ブログ。ブログとyoutubeチャンネルの運営、リーマンの生き方を中心に語ります。

facebookページ開設!ブログパーツを埋め込んでみた

f:id:momokuri777:20180128083008p:plain

ブログの集客をアップするために、facebookページを開設した。

そのfacebookページのブログパーツを埋め込んでみたよ。

 

 

facebookページ

開設したfacebookページはこちら。

www.facebook.com

 

ブログの更新をしたら、こっちにも投稿。

更新情報の通知先として利用する予定。

 

ブログパーツのありか

パーツは、developer向けのfacebookサイト「https://developers.facebook.com/」にある。

f:id:momokuri777:20180128083841j:plain

 

画面上部のグローバルメニュー「ドキュメント」をクリック。

f:id:momokuri777:20180128084548j:plain

 

そして画面左「製品に関するドキュメント」セクションにある「ソーシャルプラグイン」を選択。

f:id:momokuri777:20180128084641j:plain

 

遷移先の左サイドメニューに「ページプラグイン」をクリック。

これで到着。

f:id:momokuri777:20180128084931j:plain

 

ブログパーツのコードを取得する

ページプラグイン画面を下に降りると、以下の設定エリアを見つけることができる。

f:id:momokuri777:20180128085247p:plain

FacebookページのURLだけ指定すれば、基本的にはOK。

パーツのカスタマイズしたいのであれば、以下の項目で設定が可能だ。

  • タブ

表示するタブです(timeline、events、messagesなど)。複数のタブを追加する場合は、コンマで区切って指定します(例: timeline, events)。

デフォルトは「timeline」で、以下のようにfacebookページのタイムラインを表示することが出来る。

f:id:momokuri777:20180128090127j:plain

 

  • 幅(デフォルト:340)

プラグインの幅です(ピクセル数)。最小値は180、最大値は500です。

  • 高さ(デフォルト:500)

プラグインの高さです(ピクセル数)。最小値は70です。

  • スモールヘッダーを使用

サイズの小さなヘッダーを使用します。

f:id:momokuri777:20180128090344p:plain

  • カバー写真を非表示にする

 ヘッダーのカバー写真を非表示にします。

f:id:momokuri777:20180128090515p:plain

  • plugin containerの幅に合わせる

表示枠の幅に収まるようサイズを合わせます。

  • 友達の顔を表示する

友達がいいね!している場合にプロフィール写真を表示します。

 

設定が完了したら「コード取得」ボタンを押す。

そうすると、以下のようにコードが表示される。

f:id:momokuri777:20180128091211p:plain

コードは2種類あって、上の方はブログの<body>タグ内に記述する。

パーツを複数設置したい場合でも、このコードは1つだけ置けばOK。

 

下の方は実際に表示したい箇所にそれぞれ貼り付ける。

 

あっしは記事下のみに表示することにしたので、コードを表示箇所にかためて置いている。

f:id:momokuri777:20180128092223j:plain

 

すると、こんな感じに表示される。(スマホの場合)

f:id:momokuri777:20180128092520j:image

 

この記事が役にたったら、ぜひ「いいね!」してやってください。

facebookページの方もよろしくです。

 

参考サイト

nelog.jp

ブログランキング・にほんブログ村へ にほんブログ村 サラリーマン日記ブログへ にほんブログ村 サラリーマン日記ブログ 40代サラリーマンへ にほんブログ村 ライフスタイルブログへ にほんブログ村 ライフスタイルブログ セミリタイア生活へ にほんブログ村 サラリーマン日記ブログ インドア派サラリーマンへ