素人でも分かるはてなブログ内にフェイスブックページを表示させる簡単な方法
なんとなく気になっていたフェイスブックを表示させる方法。
すっきりしないと前に進めないタイプなのでやってみた。
最初に言っておきますが、めっちゃ簡単です。５分もあれば出来ると思います。
フェイスブックページを5分で設置しよう
早速ですが、フェイスブックのページプラグインを使います。
リンクはこちら
Page Plugin - Social Plugins - 参考資料 - 開発者向けFacebook
アクセスするとこんなページにいきます。
下にスクロールしてみてください。
そうするとこの画面にいきます。
英語ばかりですがやることは簡単ですよ。
箇条書きにしちゃいます。
この画面の中にあるURLを自分のフェイスブックのURLに変更する
Width(縦幅）、height(横幅)を好きな数値で入力する。
この画像はスマホ用のサイズとしてこの数値も入力しました。横幅を350にするとパンパンになって広告みたいで邪魔だし、縦幅も長過ぎるとそれはそれでスクロールが多くてストレスということで横幅300×縦幅200にしました。
- チェックボックスを設置する。
わたしは画像のとおりでやっていますが、チェックをつけたり外したりすれば内容は理解できるはずなので気になる方は試してみてください。
- 下にあるGet Codeをクリックする。
そうするとこんな画面がでてくるはず。
この上の１のコードは
タグの中に入れるように書いていますから、はてなブログのスマホ用ではどこでも良いことになります。私は他のコードをいじるときにストレスにならないようにフッターの下の方に入力しました。
そして下の2のコードは、設置したい場所に挿入することになっていますから好きな場所に設置して下さい。
スマホページで設置完了
もう出来ました！これがわたしの完成画像です。
作ったばかりで自分しか「いいね」がいません。
この記事を読んで設置できた方は「いいね」をいただけると喜ぶかもしれませんので宜しくお願いします。
スマホページはこれで完了でしたが、
パソコンページはどうする！？
私はパソコン版では横幅は寂しいのでMAX500にして、縦幅は同じく250にしました。
そうするとこうなります。
さいごに
わたしの場合、スマページもパソコンページも中央に寄せています。
カスタマイズ好きのみなさんはおわかりだと思いますが、2のコードの上に
<div align="center">を入力して、下に</div>を入力して完了です。
これでスマホ・パソコンページ両方で設置完了しましたから
しばらくは「やってます感」を味わいつつ記事をかきましょう。
