編集

Blogger『Contempo』にWEB拍手をつけてみる

2022/05/11

WEB拍手をつける


以前あったボタン設定が完全消去されてしまったので、FC2のWEB拍手をつけてみる事にしました。

いろいろ調べてみたけれども、よく分からない。
HTML編集も弄ってみたけど、上手く組み込めない。

という事で、テーマのHTMLを弄らずに組み込む事にしてみました。
方法は2つありますが、その前にWEB拍手の設定。

*まずはWEB拍手の登録と設定。


FC2のサイトでWEB拍手の設定をする。

サイト用の拍手タグ作成で設定します。ブログのURLとタイトルなどを入れていく。
拍手タグをコピーする。
どの方法でやるにも拍手タグが必須です。

** 方法一つめ。ガジェットを作る。


レイアウトから→ガジェットを追加→HTML / JavaScriptを選ぶ。

ガジェットのコンテンツの部分に拍手タグを張り付ける。
ガジェットを『ブログの投稿』の下に置く。


本文と若干距離が出来てしまうのと、『ページナビ』の下部分に拍手が出来てしまうが、貼り付ける事は出来る。


***方法二つめ。 投稿本文に入れる。


設定→投稿テンプレートに拍手タグを入れておく。

これで、投稿するたびに拍手タグが入る事になりますが、編集で消さないようにだけ気をつけなくてはいけない。
この方法は設定後に書く記事にだけ反映されるので、過去記事に反映されないというデメリットがあります。

この方法でやろうかと思いましたが
やっぱり、HTML編集で入れたい。という事で、弄り倒しました。


****方法3つめ。HTML編集する。


※HTML編集の前にテーマ→バックアップは忘れずに。

テーマ→詳細設定→HTMLの編集を開く。
以下を検索
<div class='post-footer float-container'>


4つ見つかりますが、3つ目(下から2つめ)の下に拍手タグを入れる。

これで、記事下の共有リンクの横に入れる事が出来ました。
無理やり入れているので、自己責任でお願いします。


タグが上手く使えなかった


なぜか、一つのブログでWEB拍手から持って来たタグが使えなかった。
なので調べると、Google BloggerにFC2拍手を組み込む方法を見つけた。


<!-- FC2拍手ここから -->
<a expr:href='"http://clap.fc2.com/post/~ユーザ名~/
?url=" + data:post.url 
+ "&amp;title=" + data:blog.title 
+ ":" + data:post.title' 
target='_blank' title='web拍手 by FC2'>
<img alt='拍手する' expr:src=
'"http://clap.fc2.com/images/button/white/~ユーザ名~
?url=" + data:post.url' style='border:none;'/>
</a>
<!-- FC2拍手ここまで -->

このタグを使ってTHMLに入れみた。
ユーザー名はFC2のユーザー名を入れる。
赤文字whiteは色を変えられるとの事だが、私は画像を自分で作ったので画像部分は使ってない。


これだと、ページごとにWEB拍手がどこでされたのかが分かる。が『最初の画面設定』が出来ないなと思った。
ブログで拍手ページを分けたい時はアカウントをまた作るしかないようだけど、それも面倒なので雑記・小説・ちょっと闇まで一緒の画面設定にしてしまう事にする。

案内ページだけは別枠でページ編集で組み込んでいるので、このタグが使えずWEB拍手から手動でタグを拾って来なければならなかった。
上記タグが使えるのはテーマ編集でだけ……ですね。考えて見れば当たり前だけど、うっかり全て同じにして焦った私。