アメブロにzenbackを設置する〜「CSS編集用デザイン」対応

zenback_01.png

このブログの各ページにも設置していますが、zenback(ゼンバック)のパーツをアメブロに設置する方法のご紹介です。
zenbackとは

zenbackはブログパーツです。ブログの記事の下や横に、「TwitterやFacebookなどのソーシャルボタン」「その記事に関係する自分のブログ記事」「その記事に関連するキーワード(関連サイト、zenbackキーワーズへのリンク)」「その記事に関係する他のzenbackユーザーのブログ記事」「その記事についての最新のTwitterのつぶやき」「その記事についてのはてなブックマーク」「その記事にFacebookでいいねを押した友達のプロフィール写真とFacebookコメント」を表示します。 (公式サイトより引用)

簡単にできるだろうと軽く考えていたら、意外に手こずってしまいましたorz

zenbackをアメブロに設置する方法は、ググると紹介記事がたくさんヒットしますが、肝心のアメブロの仕様が変更になっているらしく、色々と試してみても全く思った通りに表示されません。
6時間以上、くぁwせdrftgyふじこlp;(#゚Д゚)ゴルァ!!な状態でしたが、何とか解決。

この記事は、アメブロの「CSS編集用デザイン」を利用する場合のカスタマイズ法をまとめたものです。


その方法は以下の通り。



zenbackに新規登録

zenbackのトップページにある「新規登録&コードを取得する」ボタンをクリックして、zenbackのアカウントを作成してください。
すでにzenbackのアカウントをお持ちの方は、次のステップからスタートしてください。

自分のブログをzenbackに追加してコードを取得

zenback_02.png

zenbackの管理画面トップから「新規ブログを追加」ボタンをクリックします。
すると次のような画面が現れますので、自分のアメブロのURLを入力します。

zenback_03.png

画像ではユーザーIDが「xxxxxxxx」になっていますが、その部分をご自分のアメブロのIDに変更してください。

「次へ」をクリックすると、ブログ名の確認画面に遷移します。間違いなければ「次へ」

zenback_04.png

アメブロに貼り付けるパーツに表示したい項目を選びます。後から変更できますし、zenbackの管理画面で変更するだけでコードを貼り付けたパーツに反映されるので、そのまま「次へ」をクリックして問題ありません。

zenback_05.png

追加したブログのコードが表示されます。
コピーしてメモ帳などにペーストしておきます。

zenback_06.png


アメブロに設置する前に

取得したコードを、アメブロのフリープラグインにペーストすると、zenbackのパーツがサイドバーに表示されます。
このサイトでは、zenbackパーツを個別記事ページの記事の下に表示させています。

理由は、一般的にサイドバーはブログ全体の共通パーツという認識をされやすいので、記事それぞれの評判を表示するパーツであるzenbackをサイドバーに表示するのは、訪問者を混乱させるのではないかと思うからです。

なので、zenbackパーツを個別記事のページだけに表示させるカスタマイズと、記事の下のメインエリアに表示させるカスタマイズを行います。
先程zenbackから取得したコードに、赤字の部分を追加して、アメブロの「フリープラグイン」に追加します。

<!-- X:S ZenBackWidget -->
<script type="text/javascript">
var url=location.href;
if (url.match(/^.+\/entry\-[0-9]*\.html[a-zA-Z0-9!-~]*$/g )) {

document.write〜(zenbackで取得したコード)〜unescape("%3E%3C/script%3E"));
}
</script>
<!-- X:E ZenBackWidget -->
<script>
$(function() {
$("#zenback_loady").insertBefore(".articleLinkArea");
});
</script>


上の追加部分は、zenbackを記事ページのみに表示するカスタマイズで、下の追加部分はzenbackパーツをメインエリアに表示するカスタマイズです、
そして、ここが一番苦労した部分ですが、アメブロの「CSS編集用デザイン」向けに、下記の一文を「フリープラグイン」の先頭に追加します。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>

これで、アメブロの新しい「CSS編集用デザイン」でzenbackを表示させることができます。

パーツに表示する内容を変更したいときは

zenbackで表示できるのは以下の内容です。

zenback_07.png

zenbackのダッシュボードでコントロールできます。
必要に応じてチェックを外したり、順番を並び替えてください。
こちらで変更を保存すると、即座にアメブロのパーツに反映されます。
コードの再貼り付けが不要なのはありがたいですね。


参考にさせていただいたページ

このエントリを書くにあたって、参考にさせていただいたのは以下のページです。
ありがとうございました。

コメントをどうぞ

コメントする

※ コメントは認証されるまで公開されません。ご了承くださいませ。

公開されません

(いくつかのHTMLタグ(a, strong, ul, ol, liなど)が使えます)


画像の中に見える文字を入力してください。

About

近藤彰宏のWebサイトにようこそ!

プロフィール

起業コンサルタント

何か自分の得意なことで世の中の役に立ちたい!・・・そんな想いで起業した方、これから起業したいと思っている方をお手伝いします。
コンサルティングのモットーは「誰かの成功法より自分の正攻法」。成功法則オタクを卒業して、自分のやり方を見つけましょう!
起業を志す方に、業務内容に応じたIT活用と、タスク管理術をコンサルティングします

1972年10月生まれ
ゆるワクTVパーソナリティ&放送オペレーター
全脳思考ファシリテーター
趣味はゴルフ・ボウリング・草野球

その他の主催イベントなど

ゆるワクTV

起業家をゲストにお迎えして、ゲストのテーマに沿ってビジネスへの想いを引き出すUstreamトーク番組

全脳思考イントロダクション講座

カリスマ経営コンサルタント神田昌典氏が開発した「全脳思考」
3時間でその思考法を手に入れる講座

中部全脳カフェ

誰でも氣軽に全脳思考を体験できる、講座ではない氣軽な集まり

悠久マスターズ

ゴルフと全脳思考をハイブリッドした、遊びの中から新しいビジネスのヒントを得る体感型セミナー

サイト内検索

カテゴリ

最近のピクチャ

  • ステッドラー トリプラス
  • facebookページSSL対応
  • facebookからのメール
  • Lightbox
  • zenback_01.png
  • fb_likebox_10.png
  • 110914_01.png
  • 110913_01.jpg

Twitter

最近のコメント