livedoorblog_logofacebook logo

ライブドアブログに Facebookパーツを設置する方法 で、ライブドアブログにおける Facebook との連携方法を記載しました。


これで、「いいね！」ボタンや Like Button をバンバン利用してもらえるぞ！ と思いますよねぇ。でも、残念ながらスマートフォンサイトにはそのままでは以下のように表示されないんです。


lv_fb_sm06_1

その理由は、PC用のページで設定した head や body の一部内容が、スマートフォン用とは共有されていないためです。


まぁ、それは確かにそうですよね。同じ設定では、どちらかのレイアウトや表示がが大きく崩れたり、思い通りに表示されなくなったりということが起きそうです。


特に、Facebook の設定では javascript をそのまま記載しなければいけないので、これが敷居をさらに高くしています。


しかぁーし、あるんです表示させる方法が！ というか、探して見つけました！ 以下にその方法を記載します。


ライブドアグログ スマートフォンサイトに Facebook のパーツを表示させる方法

それほど難しくはありませんが、ひとつ前提として「HTMLエディタ」を使う必要があります。


「HTMLエディタ」を設定する方法は以下です。

  1. ブログ管理画面から「ブログ設定」⇒「投稿設定」を開きます。

    2. lv_fb_sm01_1

  2. "投稿フォームの形式" で、「HTMLエディタ」のボタンをクリックします。

    3. ※既に設定されている場合は、何もしなくて OK です。

    lv_fb_sm02_1

これで、事前準備は終わりです。


次に記事の編集画面に移り、「HTML編集タグ」をクリックします。すると、HTMLタグが付いた編集画面に切り替わります。


lv_fb_sm03_1

そして、Facebook のパーツ (「いいね！」ボタン、Like Box など) を埋め込んだ箇所の直前に JavaScript のコードをコピペします。


lv_fb_sm05_1

これで終了です！ スマートフォンからウェブページを確認すると、「いいね！」ボタンが表示されています！


lv_fb_sm07_1

同じように、Like Button やコメントもこの方法で表示させることができます。もし、ライブドアブログを利用されていて、「スマートフォンサイトにも Facebook パーツ載せたいんだよな〜」という方は、ぜひお試しあれ！


【補足】
このような設定をしなくても、「いいね！」ボタンはスマートフォンデザイン設定の「レイアウト」から「ソーシャルボタン」の設定で設置可能です。


スポンサーリンク