このブログではGoogle AdSenseを利用しています。久しぶりに自分のブログを確認したところ、広告が多く、使いにくいと感じました。
自動広告は便利ですが、ブログの構成によっては操作ボタンやメニューの近くに表示され、使いにくいと感じることがあります。そこで広告の数を減らしましたが、収益へ影響する可能性もあるため、広告以外の応援方法も用意したいと考えました。
noteのように読者がチップで応援できるサービスを探したところ、codocを見つけたため、今回導入しました。
codocのサービス内容については、次の公式サイトをご確認ください。
なお、このブログではBloggerテーマの「QooQ」を使用しています。
codocを利用できるブログサービス
今回はBloggerへcodocを導入します。codoc公式FAQでは、FC2ブログ、はてなブログ、Seesaaブログなど、HTMLを自由にカスタマイズできるブログサービスで利用できると案内されています。
Bloggerが利用できるということがここには明示されてなかったので、今回私の方でBloggerでも使用できるかを確認しました。
|
| codoc公式FAQより引用 |
Bloggerの全記事末尾にcodocのチップを自動表示する
codocが発行する貼り付けタグを各記事へ手動で追加することもできますが、毎回の作業は手間がかかり、貼り忘れる可能性もあります。そこで、Bloggerのテーマを編集し、通常の記事ページへ自動的にチップを表示します。
注意：この記事で紹介するコードの挿入位置はQooQを基準にしています。別のテーマではHTMLの構造や目印となる文字列が異なる場合があります。
codocで貼り付けタグを取得する
会員登録などの事前準備については、ここでは省略します。
会員登録が完了したら、codocのウィジェット画面から貼り付け用のタグを作成します。
案内文を変更したい場合は、「説明文」に任意のメッセージを入力します。今回は、次の文言を表示します。
「この記事が少しでも参考になれば、応援していただけると嬉しいです。」
設定できたら「<> 貼り付けタグを表示」を選択します。「JS＋要素」を選び、「クリップボードにコピー」をクリックします。
コピーしたタグを各記事の末尾へ貼り付けても、チップ機能を利用できます。今回は、すべての記事へ自動表示するためにBloggerのテーマHTMLを編集します。
Bloggerテーマをバックアップする
- Blogger管理画面で「テーマ」を開きます。
- 「カスタマイズ」の横にある下向きボタンをクリックします。
- 「バックアップ」を選び、現在のテーマを保存します。
- バックアップが完了したら「HTMLを編集」を開きます。
テーマHTMLを編集する前に、必ずバックアップを取得してください。編集に失敗した場合は、保存したテーマファイルから元の状態へ戻せます。
codocのJavaScriptをheadへ追加する
テーマHTML内で、次の文字列を検索します。
</head>見つかった</head>の直前へ、次のコードを追加します。
<!-- [START] codoc チップ（通常の記事ページのみ） -->
<b:if cond='data:blog.pageType == "item"'>
<script
charset='UTF-8'
data-css='rainbow-square'
data-usercode='ここを自分のユーザーコードに変更'
defer='defer'
src='https://codoc.jp/js/cms.js'></script>
</b:if>
<!-- [END] codoc チップ -->data-usercodeの値は、先ほどcodocでコピーしたタグに書かれている自分のユーザーコードへ置き換えてください。
https://codoc.jp/js/cms.jsはcodoc共通のプログラムURLです。自分のブログURLへ変更する箇所ではありません。
script部分の意味
まず、次のコードはBlogger独自の条件分岐です。
<b:if cond='data:blog.pageType == "item"'>
条件に合う場合だけ出力するコード
</b:if>data:blog.pageType == "item"は、現在のページが通常の記事ページかどうかを判定しています。条件を満たした場合だけ、b:if内のコードがHTMLへ出力されます。
この条件を付けることで、トップページ、記事一覧、検索結果、ラベル別一覧、固定ページではcodocのJavaScriptを読み込まず、通常の記事ページでだけ読み込みます。
なお、b:if自体がJavaScriptを実行するわけではありません。表示しているページの種類を確認し、中にあるコードを出力するかどうかを切り替えています。
その他の主な項目は次のとおりです。
src：読み込むcodocのプログラムURLです。通常は変更しません。data-css：codocで選択した表示デザインです。発行されたタグと同じ値を使用します。data-usercode：codocユーザーを識別する値です。自分のタグに記載された値へ変更します。defer='defer'：HTMLの解析が終わるまで、JavaScriptの実行を待つための指定です。BloggerテーマはXML形式なので、元のdeferをdefer='defer'へ変更しています。
記事本文の直後へチップの表示用タグを追加する
次に、テーマHTML内で以下を検索します。
<data:post.body/><data:post.body/>は、Bloggerに保存されている記事本文を、その位置へ出力するためのテンプレートタグです。
QooQでは、このタグが2か所にあります。今回は、通常の記事ページに使われている次のまとまりを探します。
<div class='post-body' id='single-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>id='single-content'が通常の記事本文を見分ける目印です。上記のまとまりを閉じる最後の</div>の直後へ、次のコードを追加します。
<b:if cond='data:blog.pageType == "item"'>
<div
class='codoc-entries'
data-support-message='ここを表示したい案内文に変更'
data-without-body='1'
id='codoc-entry-ここを自分のエントリーIDに変更'></div>
</b:if>data-support-messageは読者へ表示する案内文です。codocでコピーしたタグの値を使用するか、任意の文章へ変更します。
idは、codocでコピーしたタグにあるid='codoc-entry-...'の値全体をコピーするのが確実です。
記事本文部分の完成形
少しわかりにくい表現をしてしまったので、最終的な配置を示します。
<div class='post-body' id='single-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:blog.pageType == "item"'>
<div
class='codoc-entries'
data-support-message='ここを表示したい案内文に変更'
data-without-body='1'
id='codoc-entry-ここを自分のエントリーIDに変更'></div>
</b:if>チップの表示用タグは、<data:post.body/>そのものの直下ではなく、記事本文を囲むdivが閉じた後へ配置しています。これにより、本文用のCSSがcodocの表示へ影響する可能性を抑えられます。
自分用に変更する項目
| 項目 | 変更内容 |
|---|---|
data-usercode |
codocで発行された自分のユーザーコードへ変更します。 |
id='codoc-entry-...' |
codocで発行された自分のエントリーIDを含む値全体へ変更します。 |
data-support-message |
読者へ表示したい案内文へ変更できます。 |
data-css |
codocで選んだデザインの値を使用します。 |
src='https://codoc.jp/js/cms.js' |
codoc共通のURLなので変更しません。 |
class='codoc-entries' |
codocが表示場所を識別するためのクラス名なので変更しません。 |
data-without-body='1' |
今回取得したチップ用タグの設定をそのまま使用します。 |
動作を確認する
テーマを保存したら、通常の記事を開いて次の点を確認します。一通り確認を実施して問題なさそうでした。
- 記事本文の下にcodocのチップ欄が表示されること
- チップボタンをクリックするとcodocの購入画面が開くこと
- トップページや記事一覧にはチップ欄が表示されないこと
- スマートフォンでも表示が崩れていないこと
補足：もう1つの<data:post.body/>について
QooQでは、<data:post.body/>がもう1か所あります。
<div
class='post-body entry-content'
expr:id='"post-body-" + data:post.id'
itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/>
</div>このコードは、<b:includable id='mobile-post' var='post'>というモバイル表示用のブロック内にあります。
現在このブログでは独立したモバイル専用テンプレートを使用していないため、こちらではなく、先ほど説明したid='single-content'側へcodocの表示用タグを追加しています。
通常表示ではチップ欄が出るのに、モバイル専用表示では出ない場合は、記事URLの末尾へ?m=1を付けて表示を確認してください。独立したモバイルテンプレートが使われている場合は、こちら側にも表示用のcodoc-entriesを追加する必要があります。
参考：同じcodoc-entryを複数の記事で使用できるか
今回使用する貼り付けタグには、data-usercodeとcodoc-entry-...という識別情報が含まれています。
data-usercode：codocユーザーを識別する値codoc-entry-...：表示するエントリーまたはウィジェットを識別する値
今回は、同じチップ用タグをすべての記事ページで使用します。codoc公式FAQでは、チップ用ウィジェットまたは一度作成したチップ機能用記事のタグは、1か所だけでなく複数ページへ貼り付けられると案内されています。
|
| codoc公式FAQより引用 |
そのため、今回のようにチップ機能を全記事へ共通表示する用途では、同じチップ用タグを使用できます。
0 件のコメント:
コメントを投稿