TumblrにGoogle+コメント欄を設置する方法

Tumblrでは、何故か?DISQUSを導入するのが一般的ではあるが、ここではGoogle+のコメント欄を設置する方法を紹介する。

コメント欄を設置したい場所に以下のコードを埋め込むだけ。

{block:PermalinkPage}

<!-- Google+コメント 開始 -->
<h3 style='margin-top:1.5em;'>コメント</h3>
<div style='margin:1em 0 1em;'>
※モバイル端末でコメント欄がはみ出している場合は、一旦デバイスを傾けてください。最適なサイズに自動調整されます。
</div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div class='g-comments' 
data-first_party_property='BLOGGER' 
data-view_type='FILTERED_POSTMOD' 
data-width='600' 
data-href='{Permalink}'>
</div>
<!-- Google+コメント 終了 -->
<div style="clear: both;"></div>

{/block:PermalinkPage}

メモ

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

↑ Google+のスクリプトが既に定義されている場合は不要。

data-width='600'

↑ 横幅の初期値。 (ピクセル)

パソコンの場合
116433677457_7b803b2e4a_o.png

スマホの場合
216640994815_4c14b1789e_o.png

横幅の初期値は600ピクセルとなり、表示領域のサイズが変わると、ピッタリサイズに自動調整される。なお、コメントがない場合に、下の余白が少々目立つが回避策はない。

admin
カテゴリ:ブログサービス
タグ:Google+ tumblr
2015/02/25 04:02 | コメント (0)
◎この記事へのコメントは 0 件です。コメント欄を表示しますか?
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

このブログについて
jkun-400x400.jpg インターネット, パソコン, スマホ, Windows, Linux, Android, 各種アプリ, ブラウザ, ブラウザ拡張機能, 携帯電話, 社会情勢, 韓ドラ, K-POP 関連の話題を取り上げます。ジャンルとしては幅広く、特定のカテゴリに特化したブログではありません。お時間がありましたら、どうぞお立ち寄りくださいませ。
プロフィール
カテゴリ
ブログ内検索
Powered by さくらのブログ