facebookのソーシャルプラグイン「LikeBox」の設置&高さ設定の方法

DIGITAL

facebookのソーシャルプラグイン「LikeBox」を設置しました。記事ごとに「LikeBox」を表示する方法と、Boxの高さ設定で手間取ったので、その辺をシェアしたいと思います。

skitchs442Os

詳細は以下に。

まずはコードの取得から

「LikeBox」を設置するには、まずはコードを取得する必要があるので、以下のリンク先よりコードを取得します。


Like Box – Facebook開発者

「LikeBox」のコード取得はこちらから


BOXの高さ設定の場所が分からない

コードを作成するときのプレビューでは、「LikeBox」はfacebook名と、登録して頂いた方のアイコンがちゃんと表示されていたのですが、いざ設置してみると「いいねボタン」が隠れて見えない状態で表示されてしまいました。

Like Box - Facebook開発者

なので、見えるように高さを調整しようと思ったのですが「LikeBox」のコード取得フォームには「BOXの高さ」の入力設定項目がなくて、高さの調整ができません。 なので、作成されたコードに直接、高さの設定数値の2カ所を「270」にして単独記事のソースに張り込んだところ、ちゃんと表示されました(^^)

Like Box - Facebook開発者

Design × Lifehack × CrossOver Lab - facebookとUtreamが連携できるfacebookアプリ「Ustream Live」を導入してみました

ちなみに、単独記事に「LikeBox」を設置する場合は、管理画面→外観→テーマ編集の「単一記事の投稿(single.php)」をクリックして、取得したコードを任意の場所にコピペしてください。

テーマの編集 ‹ Design × Lifehack × CrossOver Lab — WordPress

まとめ

facebook関連のカスタマイズ、やはり人気が出てきていますね(^^)facebook関連といえばコメント欄も先日設置したのですが「LikeBox」と同じようにコードを入手して貼り付けて設置していました。設置したのはいいんですが、なぜか日本語表記にならず…なぜ?

そんなこんなで数日が経ち、先日、Last Day.jpのRayさん(@Sayobs)のところでコメント欄を設置できるプラグインが出ていることが判明(笑)もしこれからfacebookのコメント欄の設置もお考えの方は、Rayさんのブログを参照してくださいませ(^^)


Last Day. jp

いつもお世話になりっぱなしです(笑)


The following two tabs change content below.
アバター画像
1972年生まれ。東京都八王子出身・中野区在住。デジタル機器やデジタルサービスを駆使して、いつでもどこでも人生を謳歌する「デジタル寅さん」として活動中。デジタルの楽しさを知ってもらうためのデジタルサポートを行っています。 その他にはグラフィックデザイナー、料理や食を通じてコミュニケーションを楽しむ研究をしている「食と心の研究家」としても活動。料理コミュニティ「キッチン男子部」の顧問も。

コメント

  1. […] この記事を参照しました facebookのソーシャルプラグイン「LikeBox」の設置&高さ設定の方法 カテゴリー: webサイト構築   タグ: facebook   作成者: sora006   この投稿のパーマリンク […]

  2. […] facebookのソーシャルプラグイン「LikeBox」の設置&高さ設定の方法 This entry was posted in facebook and tagged ガジェット by sora006. Bookmark the permalink. […]

  3. 湯浅恒雄 より:

    おかげ様でHPにlike boxの設置ができたのですが、不思議な現象がありますのでご教示頂ければ幸いです。それは設置後、Facebookページへ投稿するとそれはlike boxには反映されるのですがFacebookページのタイムラインに反映されなくなってしまったということです。何とぞ宜しくお願い致します。

  4. 湯浅恒雄 より:

    昨日お尋ねした不思議な現象は本日見てみると正常に回復しておりました。たまたまFacebookのシステムの不具合が従来より長く続いていたものと思われます。どうもお騒がせ致しました。宜しくお願い致します。

  5. アバター画像 angixxx より:

    湯浅さん
    コメント、ありがとうございます(^^)
    無事に解決できたようでよかったですね!

タイトルとURLをコピーしました