意外と簡単!すぐできる!Facebookページを3ステップで作成してWordPressのブログに設置してみた!

ブログのカスタマイズは超絶苦手なぶっちー(@butti15)です。
前回、100日チャレンジに挑戦中!という記事を書きましたが、100日間でやりたいことの1つにFacebookページを設置したいという目標がありました。

ブログのカスタマイズは本当に苦手で・・・
毎回Googleさんにお世話になりまくっても思うようにカスタマイズできず四苦八苦しており(>_<)
あんまりやりたくないのが山々なのが実情ですw

でも沢山の方にこのブログに遊びに来てほしいし外に向けてどんどん発信していきたいのでどうしても設置したい!
今回も重い腰を上げてFacebookページを作成してブログ(WordPress)のサイドバーに設置してみました。

スクリーンショット 2014-09-30 12.38.05
・・・これが意外と簡単!!
わずか3ステップで簡単にFacebookページを設置することができました!!

これからFacebookページを作成したいなーって考えてる方に向けて、3ステップで簡単に作成できる手順を教えしますね(*^_^*)

スポンサードリンク

3ステップでFacebookページを作成するまでの全体の手順

さぁさぁ、実際にFacebookページを作成してブログに設置してみましょう!
3ステップの全体の手順はこちら。

1.Facebookページの作成
2.Likeボックスの作成・コードの取得
3.WordPressのウィジェットなどにコードを貼り付け・設置

では順に説明していきます!

1.Facebookページの作成

まずはFacebookページを作成しないことには何も始まりません。
さっそく作成してみましょう!

Facebookのサイドバーに「Facebookページの作成」リンクがあるのでそれをクリック。
こちらからでも行けます。
Facebookページを作成
スクリーンショット 2014-09-30 11.23.42
ページの種類をどれにするか聞かれますので「ブランドまたは製品」を選択。

スクリーンショット 2014-09-30 11.25.53
さらに詳細なカテゴリーを聞かれます。
個人のブログですので「ウェブサイト」を選択。
「ブランドまたは製品名」に自分のブログタイトルを入力してください。
ここに入力したものが実際のFacebookページ名となります。

ここではわかりやすく「ぶっちーのブログ」という名のFacebookページを作成してみますw

スクリーンショット 2014-09-30 11.26.46
さらにFacebookページの基本情報の入力画面になりますので、自分のブログのURLや説明文を入力。
後で変更できますので説明文は簡単でも構いません。

スクリーンショット 2014-09-30 11.28.29
基本情報の入力後、Facebookページのプロフィール写真の登録に移ります。
お好みで設定してください。
なお、プロフィール写真のサイズは「180×180」となっています。

スクリーンショット 2014-09-30 11.29.03
お気に入りに追加するかどうか聞かれますのでお好みで追加してください。

スクリーンショット 2014-09-30 11.29.09
最後に広告の支払い方法を追加するかを問われますがスキップで構いません。
個人のブログのFacebookページだとまず必要ないでしょう。

スクリーンショット 2014-09-30 11.29.26
という訳でFacebookページを作成することができました!!
後はお好みでカバー写真(サイズは横851px 縦が315px)を追加したり、お友達をFacebookページに招待してみたりしましょう。

では次に第2ステップであるLikeボックスを作成してコードを取得しましょう!

2.Likeボックスの作成・コードの取得

Likeボックスとはこれです。
スクリーンショット 2014-09-30 11.32.07
Facebookページを作成しても、実際にブログに設置しないことにはイイね!を押してくれませんもんね。
意外と難しそうに見えますがLikeボックスも簡単に作成できます!

LikeボタンはFacebook Like Boxというページで作成します。
英語ですが簡単ですので大丈夫ですよ(*^_^*)
スクリーンショット 2014-09-30 11.32.20
「Facebook Page URL」に先ほど作成したFacebookページのURLを入力します。
Facebookページのトップ画面のURLをそのままコピペしてください。
入力後にEnterを押すとLikeボックスのプレビュー画面が出てきます。

次にLikeボックスのサイズを決めましょう。
「Width」が横幅、「Height」が縦幅です。
僕はGoogle AdSenseの広告とかでよく見られるレクタングルサイズ(横:300 縦:250)で作成しました。

後の設定はお好みで。
「Show Friends’ Faces」
→イイね!してくれたユーザーのアイコンを表示の有無

「Show Posts」
→Facebookページ内のポストをボックス内に表示するか!?

「Show Header
」→ヘッダーの有無

「Show Border」
→ボーダー(罫線)の有無

作成したら「Get Code」ボタンをクリックしてください。
スクリーンショット 2014-09-30 11.32.56
色んな形式のコードが表示されますので「IFRAME」を選択。
作成されたコードをコピーしてください。
これで第2ステップが完了しました♪

3.WordPressのウィジェットなどにコードを貼り付け・設置

あとは作成したLikeボックスをWordPressのサイドバーなどに設置するだけです!
今回はサイドバーに設置する方法を説明します。

WordPressの管理画面にログインして「外観」から「ウィジェット」を選択。
そこから「テキスト」のウィジェットを追加しましょう。
先ほど取得したコードをペーストするだけ。
スクリーンショット 2014-09-30 12.17.58
後は自分のお好みの場所に配置してウィジェットを保存してください。

スクリーンショット 2014-09-30 12.19.58
という訳で3ステップで簡単にFacebookページを作成してLikeボックスをブログに設置することができました!
時間にして20分ほどでできると思います♪
やってみると意外と簡単だった!!

あとがき。先ほどのコードを使えばブログの本文中にも貼れます。色々用途が広がりますね♪

作成するまでは難しそうでずーっと設置するのを躊躇してたLikeボックス。
意外と簡単に作成できて拍子抜けしました(^_^;)

先ほど作成したコードを使えばブログの本文中にもこんな感じで表示することができます。



最後まで読んでくれたみなさんにちょっとしたお願い。
よければそのままのノリでFacebookページのイイネボタンを押してもうととても嬉しいです!
iPhoneやMacやブログ術に関することや、福岡のカフェ・グルメ情報・旅行記などをこのブログを通じてこれからどんどん発信していく予定です。

せっかくのご縁。大切にしていきたいものです(*^_^*)
これからもRe:start!をどうぞよろしくお願いします♪
最後まで読んでくれてありがとうございました!

では、今日はこの辺で。


コメントを残す