2013年10月14日月曜日

「LinkWithin」から「Outbrain」への乗り換えとカスタマイズ(表示タイトルの変更など)


投稿に対して関連投稿を表示するためにLinkWithinを導入したばかりなのですが、早くもOutbrainというサービスに乗り換えてみました。特に大きな理由があったわけではないのですが、サムネイル表示が少しうっとうしい感じだったのでテキスト表示に変更したかったのと(LinkWithinでもCSSで無理矢理指定すればテキスト表示にできると思いますが)、1度間違ったメールアドレスでURLを入力しウィジェットを取得したら以降の変更ができない?ようだったというのが一応の理由です。

OutbrainはLinkWithinとは異なりアカウントの登録が必要なのですが、その分、クリック数などのサイトパフォーマンスを確認することができるようになっています。

以下、BloggerでのOutbrainの設置とカスタマイズについてです。


▼ 登録から設置まで


まずはwww.outbrain.comにアクセス、右上にあるRegisterからアカウントを取得します。その後、ブログを登録→ウィジェットを取得、という流れです。テキストのリンクか、サムネイルのリンクかを選択する事ができます。使っているブログがBloggerの場合、専用のウィジェットとして追加することができます。

各投稿のパーマリンクを入れるように指示されている<div data-src="DROP_PERMALINK_HERE" class="OUTBRAIN">は、<div expr:data-src="data:post.url" class="OUTBRAIN">のように変更(青太字→赤太字)すればパーマリンクを取得することができます。


▼ カスタマイズ


ということで、設置するところまでは画面の通り進めていけば簡単なのですが、好きな位置に好きなように表示するためにはちょっとカスタマイズが必要です。

Bloggerとしてウィジェットを追加した場合、LinkWithinのときと同様に、「もっと読む »」を無視してトップページのそれぞれの投稿毎に表示されてしまいます。もしも、個別の投稿を開いたときだけ表示したいのであれば、こちらのLinkwithinについての投稿と同じ設定で対処できます。

ただし、テンプレートのHTMLに直接追記してトップページに表示されないようにすると、サイトパフォーマンスの確認ができなくなります、たぶん。

・追記(2013-11-28)
設置後、Manage Blogsの「+ Add Blog」から再度ブログの追加画面に行き、Install widget?→「Already have」及び「Blogger」を選択、URLを入力し、「Continue」を押すとOpenIDによるブログの所有についての確認画面になるので、「はい」を押すとサイトパフォーマンスを見れるようになります、たぶん。

ちなみに、「1回」ではなく「常に」の方の「はい」を選ぶとOpenIDの「URL を常に表示できるサイト」に登録され、解除できなくなるっぽいので注意が必要です。

・追記(2014-1-11)
Bloggerを選択するとエラーがでるようになっていました。不具合?


「You might like:」という表示タイトルを変更することも(一応)できます。下記の赤太字のようにCSSを指定し、Outbrainのコードをdiv要素で囲うと「You might like:」を非表示することができますので、上から好きに表示タイトルを追加してください。

.outbrain_custom(←この名前は何でも大丈夫です。) span {
  display: none;
}

CSSを使えば表示タイトル以外にもいろいろとカスタマイズできます。(とりあえず、分かる範囲でいじった結果なので、もっといい方法があるかもしれません。)


▼ その他


一度公開した投稿タイトルを後から変更したときに、新しい投稿タイトルに更新する方法がよく分かりません。


そんなこんなで、おすすめの投稿を表示するOutbrainを導入してみました。


中村 彰宏