稲太の貯蓄日記

自分の旅行体験とお金のやりくりなどが主なブログです

はてなブログでFacebookのpageプラグインの追加とTwitter連携始めました

こんにちは、稲太です。

最近更新できなかった理由…というわけでもないこともないですが。

Facebookのpageプラグインを追加してみたり、Twitterの連携を始めてみたりしていました。

決して、りんなと遊ぶのに夢中になっていた訳ではない

そこで、やったことと、参考にしたところをご紹介します。

ページが重くなる可能性もなきにしもあらず?

連携デビュー

結構みなさん、Facebook連携やらTwitter連携やらやってる人多いなぁと思っていましたが、
ついに、私もデビューしました!!


PCならサイドバーに、スマホなら下の方にあります!

こんな感じです。


りんなと遊びまくってたことバレてますが、おきになさらず。





まあこんな感じです。ドヤァ

こんなことで二日もかかってるなんて…ププッってなってる人もいると思いますが、私的には大変でした。

はじめに

ページの作成に関しては、別の本垢で作っていますが、他の人にバレないようにしています。
情報は色々あったのですが、昔のLikeboxの情報が多くて、今のpageプラグインの情報が少なかったのが気になるところですね。

あと、はてなブログ対応しているところも少なかったような気がしますので、私みたいに探しまわらなくてよいようにまとめておきますね。



Facebook連携について

まず、Facebookのpageを作成します。

f:id:masa9088:20160411223648p:plain


種類は色々あるのですが、個人ブログを設定しました。

ここでは適当に、カテゴリを選びます。(後から変えれます)

f:id:masa9088:20160411223841p:plain

新しいpageが表示されます。

f:id:masa9088:20160411223143p:plain

基本データをクリックして、カテゴリを修正します。

f:id:masa9088:20160411223355p:plain



f:id:masa9088:20160411223521p:plain

あとは、適当に入れておきます。

私の場合はこんな感じです。

f:id:masa9088:20160411224044p:plain


1点注意ですが、身バレしたくない場合は、投稿者の名前は本名以外に修正しておきましょう。

トップページの設定から設定します。

f:id:masa9088:20160411224510p:plain


投稿者の名前を修正しておきます。

f:id:masa9088:20160411224205p:plain


ひとまずここまでOKでしょうか。

Facebookpageをブログに掲載する方法

Facebookの開発者用ページにpage pluginの記事があります。

ページプラグイン - ソーシャルプラグイン - 参考資料 - 開発者向けFacebook

ここで、必要項目を入力すると、作成が可能です。

基本的にここだけしか入れるところはありません。

f:id:masa9088:20160411225251p:plain

サイズはレスポンシブ対応していました。


入力できたら、下部にある Get Codeボタンをクリックし、プログラムを表示します。

f:id:masa9088:20160411225501p:plain

表示されたプログラムソース(上、下)をメモっておきます。

f:id:masa9088:20160411225734p:plain

メモができたら、いよいよはてなブログに設置です。

<PC版>
超簡単です。
サイドバーにコピッたソースを追加するだけです。

サイドバーを開きます

f:id:masa9088:20160411230426p:plain

モジュールを追加します。

f:id:masa9088:20160411230605p:plain

開いた画面で、HTMLを選択し、ソースを貼付けて適用します。

f:id:masa9088:20160411231002p:plain


そうすると…

無事に表示されました。

f:id:masa9088:20160411231120p:plain

私の場合は、プロフィールの画像表示をやめて、代わりにFacebookのpageを表示させています。


<スマホ>
スマホはもっと簡単です。
好きなところ(フッターとか)に上下両方コピペしたらOKです!。


とりあえず、今日はここまでとします。

Twitterはまた次回!

フォローとかいいね!是非気軽にしてね!


広告