Tumblr Facebookウィジェットを追加する方法

このエントリーをはてなブックマークに追加
Pocket

Tumblrカスタマイズ Facebookウィジェットを追加する方法

前回のTumblrにTwitterウィジェットを追加では、独自タグなども使用せず簡単に設置することができました。

ここではFacebook Like Boxを追加してみます。

TumblrにFacebookウィジェットを追加する方法

方法は前回と同じでサイドバーにFacebookLikeBoxを設置してみます。サイドバーの作り方はTumblrにサイドバーを作る方法を参考にしてみて下さい。

デフォルトテンプレートにサイドバーを設置するとこんな感じ。
Tumblrにサイドバーを設置する

ここにFacebookウィジェットを設置します。方法はTwitterの場合と同じで非常に簡単。LikeBoxカスタマイズページでウィジェットを作り、コピーしたコードを貼付けるだけ。

Twitterの場合は表示したい場所にコードを貼付けるだけでしたが、FacebookLikeBoxの場合はタグの直後にscriptタグを貼付ける必要があります。
TumblrにFacebookウィジェットを設置する2

<!-- サイドバー -->
<section id="side" style="display:inline-block;width:30% !important;vertical-align: top;">
    
    <!-- ここにLikeBoxのコードを貼付け -->

</section>

TumblrにFacebookウィジェットを設置する
ここではサイドバーに設置しましたが、場所を変えれば投稿ページの下に表示することも可能。