snsに登録!

昨日、この記事を読んで、なるほど!と思ったんですよ。

 見込み客を自動で集め続ける集客ブログの作りかた|B型起業人

そこにはこう書いてあった!!

ブログで一番大切なのは出口を決めることです。

これはつまり、ブログを読んだ人がどういった気持ちになって、どういった行動を取ってくれるのかを決めるということです。

なるほど!

わたし、結構ここあいまいなままにやっていたかもしれない。

発信したい情報はたくさんあるけれど、という感じですね。

じゃあ、どういう出口がいいのか、というと、

「メルマガ登録」か、「SNSでのフォロー」

ということらしいです。

なるほど、なるほど。

だけど、わたし、メルマガとかやってないんですよね。

となると、SNSでのフォロー、これにターゲットを絞るべきでしょう。

こういう記事を読んだら、とにかく行動だ!ということで、あれこれ考えて、とあるブログにFacebookのブログパーツを設定することにしました。

ブログにFacebookパーツを設置する

わたしは、和菓子ハンターが行く!という、和菓子のブログを運営しています。

ほぼ趣味ブログと化していますが、ここ、Facebookページは作ってあるのに、めんどくさくて、Facebookのいいね!ボタンとか設置していなかった。

ということで、がんばって設置しました。

こんな感じ!下の方ね。

 【モニターレポ】自家製餡の朝焼きみかさとか旨いに決まってるじゃないか!!

ちなみに、Facebookページはこちら。

 和菓子ハンターが行く!|Facebookページ

Like Boxの設置

まずは、和菓子ハンターが行く!のFacebookページのいいね!を増やすために、LikeBoxの設置です。

事前にアプリIDの取得が必要なので、そこはちょっと検索してがんばって取得してみてください。(←つまり、もうやり方を忘れているw)

Facebook developersのLike Box作成ページにアクセスします。

 Like Box|Facebook developers

これの設置はごくごく簡単。

FacebookPageURL:自分で作成している該当のフェイスブックページURL
width:横幅
Hight:高さ(設定しなかったかも?)
ColorScheme:バックを白(light)にするか、濃いグレー(dark)にするか
Show header:ヘッダー表示の有無
Show Faces:いいね!してくれた人のアイコンの表示・非表示
Show Stream:Facebookページへの投稿をLikeBoxに表示させるか否か
Show Border:LikeBox外側の区切り線の表示・非表示

これらを設定した後、GetCodeボタンを押します。

HTML5かXFBMLがいいのかな?アプリIDを選択し、コードを取得し、

<div id=”fb-root”></div>で始まるパーツを<body>タグのすぐあとにはりつけ。

さらに、プラグインを表示したい場所にプラグインのコードを配置すればOKです。

いいね!ボタンの設置

次に、Facebookいいね!ボタンの設置です。

アプリIDはさっき取得したので、今度はいいね!ボタンの作成ページにアクセスします。

 Like Button|facebook developers

こちらも、Configuratorという箇所にいろいろ入力する画面がありますので、そこに入力します。

URL to Like:とりあえず、ブログのURL
Layout Style:アイコンを表示させたい場合は、standardを選択
Color Scheme:ブログパーツの背景色をlight、darkからお好みで
Width:横幅を適当に入力
Font:適当
Verb to display:おすすめボタンが、「いいね!」か「おすすめ」かを選ぶ
Sent Button:送信ボタン・・・これ、何のためにあるのか、イマイチわからん。検索してみると、今後消えるかも、ということで、これはつけないことに。
Show Faces:アイコンの表示の有無

以上を設定して、Get Codeをぽちっとな。

Facebookのウォールへ投稿したかったらXFBML?

それで、いいね!を押したら、コメントつきでユーザーのFacebookウォールに投稿できるようにしたかったわけですが、HTML5にしたらできませんでした。

XFBMLにしたらできるようになった。

こちらも指示されたコードをブログ記事テンプレートへ設置しますが、

<div id=”fb-root”></div>で始まるパーツは、先ほどのLikeBox設置時にすでに設置してあるので省略。

URLを個別ページへ変更

さて、先ほど、URL to Likeには、ブログのURLをとりあえず突っ込みました。

わたしは、MovabelTypeを使っているので、プラグインコードにある、このブログのURLをブログの個別記事をはき出すタグに変更します。

たとえば、

<div class=”fb-like” data-href=”http://wagashi.○.jp/” data-width=”450″ data-show-faces=”true” data-send=”true”></div>
(※最初と最後の<>は全角に変えてあります。)

だったら、

「http://wagashi.○.jp/」の部分を、「<mt:entrypermalink>」に変更します。

これをやらないと、全ページのいいね!ボタンがトップページ用になってしまいますので、注意。

OGPの設定

次に、OGPの設定をします。これをやらないと、ユーザーのウォールへは表示されないので、もう少しがんばりましょう。

これについては、こちらのブログを参考にさせていただきました。

 【最新】facebook いいねボタン設置時のOGP設定方法♪|フリーランスWEBデザイナーの仕事

投稿ボックスが途切れるorz

やれやれできた!と思って見たら、今度は、いいね!ボタンを押してテストしてみると、投稿ボックスが、下に設置しているLike Boxに隠れて途切れてしまいます。

なんじゃこりゃー!!

またまたいろいろ検索してみましたが、横に途切れているものは、cssにちょいっと追加してやったら修正できるようですが、縦に途切れているのは、cssでどうにかするのはちょっと難しそう。

解説記事も少ないし、読んでみてもわからなかった・・・。

なので、力わざで解決しました。

ソーシャルボタンを縦に並べたった!!!
そんで、余白開けたったわ!!!

もう、この時点でわたくしかなり疲れておりましたね、はい。

なぜかソーシャルボタンにはかぶっても消えなかったので、もういいや、これで、みたいな。

ついでに、でかいFeedlyのフォローボタンもつけたわ。

その他のソーシャルボタンの設置方法まとめはこちら。

 はてブ トルネードが起こる前にサイト運営者がやっておくべき3つのこと

ここまでやって、もう疲れたのでこれでいいことにした。

あ、そのうちPocketのボタンもつけとこう!

ということで、Facebookの投稿欄下切れを力業でどうにかしたお話でした。