新着記事
2008年09月22日

新機能がついたFC2拍手をSeesaaブログに設置

前記事に書いたように、FC2拍手が高機能になった。ブログの記事ごとのURLで指定したタグを作成し、それをそれぞれのページに設置しなくても、ブログ記事ごとに拍手を集計するタグが作成できるようになった。つまりブログの記事用HTMLにタグを挿入してしまえば、各記事での拍手数を解析したり拍手ボタンに表示可能ということだ。しかもFC2ブログ以外のブログにも対応している。

【対応ブログ】livedoor Blog・Seesaaブログ・ヤプログ・JUGEM・忍者ブログ

参考→【拍手】ブログ記事ごとの拍手作成&お礼デフォルトページの設定が可能に! - FC2総合インフォメーション

FC2拍手

【登録・設定】
私の場合は既にFC2アカウントを持っているので、さっそくFC2拍手サービスを追加。手順に従い設定していくが、「拍手管理設定」で迷う箇所があった。
「拍手の設定」を 表示する/表示しない 、「コメントの設定」を 受け付ける/受け付けない 、「コメントを一般に」 公開する/公開しない の選択は問題なし。しかし「プロフィールの設定」での「タイトル」と「説明」の意味に戸惑う。 あれこれやってみてから、これはデフォルトでの「お礼ページ(FC2拍手トップページにあるサンプルボタンをクリックすると表示されるようなお礼ページ)」に表示する「タイトル」と「説明」であることが判明。「お礼ページの編集」ページでカスタマイズしたお礼ページを作成し、それをデフォルトのお礼ページに変更した場合は表示されないページになるので、「プロフィールの設定」は適当に入力しておけば良いみたい。

【お礼ページの作成】
「お礼ページの管理」→「お礼ページの編集」を行う。わからなければマニュアルを見れば、流れがわかりやすい。
問題はお礼ページの編集画面での画像挿入ができなかったこと。マニュアルの該当ページ(→参照)には『お礼画像の一覧から、挿入したい画像のお礼ページを貼り付けるをクリックします。』とあるのだが、その通りやっても貼り付けられなかった。何度試みてもjavascriptエラーを起こし、「ページでエラーが発生しました」になってしまう。挿入ボタンをクリックして開くサブウィンドウの、「お礼画像アップロード」画面でのアクション項目のボタンが、マニュアルページの画像にあるように「お礼画面に貼り付ける」ではなく、「貼り付ける」になっている。挿入ボタンでの画像貼り付けは諦めて、HTMLダグを書いて編集した。
編集しながら同時にプレビュー画面を見ることができて便利。しかもプレビューの表示が早い。
複数のお礼ページが作成可能だが、拍手してもらったときに作成した複数ページが、ランダムで表示されるシステムにはなっていないようである(現在はランダム表示を選択可能/2010年追記)。

※FC2拍手管理ページのマニュアルが、もう少し痒いところに手が届く感じだと良いのだが…。

【拍手用タグの作成と設置】
ブログではないサイトと、ブログの特定記事やトップページだけに設置するボタンの場合

FC2拍手管理ページメニュー画面管理ページメニューの「拍手タグの作成」をクリック。作成ページで記事のURLと記事タイトル(ページタイトル)を入力して作成する。ブログの特定記事に設置する場合は、新しい記事は一度保存してアップしてからになる。サイドメニューやヘッダーに設置して、常にトップページで表示したいのなら、ブログのURLを入力して作成する。

タグの貼り付け場所
・ホームページのページではページ内のボタンを設置したい場所に。
・ブログの場合
特定記事に設置する場合は、記事欄のボタンを設置したい場所にタグをコピーして貼る。
サイドメニューに設置したいのなら、「自由形式」のコンテンツを追加し、コンテンツの編集でタグをコピーして貼る。

ブログの全ての記事に自動で表示されるように設置して、記事別の解析が可能なボタンの場合
ご注意:コンテンツ「記事」のHTMLページを改変しますので、ある程度の知識と経験を必要とします。初チャレンジの人はテスト用のブログを追加し、非公開にした上でやってみることをお勧めします。既にHTMLページにタグを追加している場合は、いままでのソースをメモ帳などにコピペしておきましょう。

FC2拍手管理ページメニューの「拍手タグの作成」の下(ブログ用記事別)をクリックして作成ページを開く。「各サービス」で Seesaaブログを選択、拍手ボタンのデザインを選択し「タグ作成」のボタンをクリック。

タグの貼り付け場所
作成されたタグの上に『「デザイン」→「コンテンツ」→「記事」→「コンテンツHTML編集」で記事部分のHTMLを開き下記タグを挿入してください。』とある。『記事部分のHTMLを開き』という部分でつまづく人がいると思う。拍手ボタンを記事の下に表示させるなら、挿入位置は以下になる。
<% /if -%>
<br /><% if:blog.bookmark_service %>
<script type="text/javascript" language="javascript" charset="utf-8"><!--
seesaa_bookmark_services = "<% blog.bookmark_service %>";
seesaa_article_page_url = "<% article.page_url %>";
seesaa_article_subject = "<% article.subject | jsescape | tag_strip %>";
seesaa_blog_url = "<% site_info.blog_url %>";
//--></script>
<script type="text/javascript" language="JavaScript" charset="utf-8" src="<% site_info.blog_url %>/js/bookmark.js"></script>
<% /if %>

<div class="brbanner">
<br />
<!-- FC2拍手タグここから -->タグ<!-- FC2拍手タグここまで --> 人気blogランキングタグ</div>
<div class="posted">posted by <% article.nickname %> at <% article.createstamp | date_format("%H:%M") -%>
<% if:article_weather -%>
| <% article_weather.state %> <% article_weather.weather_emoji -%>
<% /if -%>

《説明》
スクロールして上記の部分を探す。ソーシャルブックマークアイコン表示を設定していないブログでは、緑色のタグの部分はないので、とにかく
<div class="posted">posted by <% article.nickname %> at <% article.createstamp | date_format("%H:%M") -%>の箇所を探すこと。見つけたらそのすぐ上に、拍手ボタンのタグを貼り付ければOK。

※茶色字の部分<div class="brbanner"></div>のように、ブロック要素で括ってもいい。要素の名称は「brbanner」ではなく、適当に変えてください。このブログではバランス上改行を入れ、「人気blogランキングボタン」と並行して並べてあるので上のHTML(部分)になっている。

《09/25追記》
拍手ボタンとランキングバナーを、ソーシャルブックマークアイコンの上になるように設置場所を変更しました。

関連記事
FC2拍手ブログパーツのカスタムモードをSeesaaブログに設置
FC2拍手のスパムやらbotやら

拍手してくださるとうれしいです→ 拍手する

このエントリーをはてなブックマークに追加
posted by Masako at 17:40 | Comment(0) | TrackBack(1) | Seesaaブログのカスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

web拍手
Excerpt: FC2サービスのweb拍手を導入してみました。 参考先は 終わりのない旅 ー 新機能がついたFC2拍手をSeesaaブログに設置 最初ちょっと悩みました、htmlのそれっぽいところを いくら書き換..
Weblog: カッパ 中つ国を歩く
Tracked: 2009-02-10 13:33
最近のトラックバック