エントリー

freoに忍者おまとめボタンを設置する

最近はソーシャルメディアのボタンが増えて、1つずつ設置するのが面倒なので、「忍者おまとめボタン」を利用する方が便利みたいです。当サイトでも導入してみました。

  1. 忍者ツールズ のアカウントでログインし(忍者ツールズのアカウントがない場合は新規登録してください)、忍者おまとめボタンのトップ からスタイルを選んで「上記セットで新規作成」か「設置ボタンを1つずつ選択して作成」のボタンを押します。
  2. 「利用規約に同意して次へ」を押します。
  3. 「設置するWebサイトを選んでください。」と出たら、「その他のブログ」をクリックします。
  4. プレビューで位置などを確認後、「コードをコピーする」を押してスクリプトコードをコピーします。
  5. コードの貼り付け
    • エントリーの場合
      templates/internals/default/default.html または templates/internals/view/default.html の任意の部分にコードを一旦貼り付けます。
      貼りつけたコード(xxx~はコード番号)を
      <div class="ninja_onebutton">
      <script type="text/javascript">
      {literal}
      //<![CDATA[
      (function(d){
      if(typeof(window.NINJA_CO_JP_ONETAG_BUTTON_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx)=='undefined'){
              document.write("<sc"+"ript type='text¥/javascript' src='http:¥/¥/omt.shinobi.jp¥/b¥/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'><¥/sc"+"ript>");
      }else{ 
          window.NINJA_CO_JP_ONETAG_BUTTON_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.ONETAGButton_Load();}
      })(document);
      //]]>
      {/literal}
      </script><span class="ninja_onebutton_hidden" style="display:none;">{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}</span><span style="display:none;" class="ninja_onebutton_hidden">{$entry.title}</span>
      </div>
      に編集(赤字を追加)します。
    • ページの場合
      templates/internals/page/default.html の任意の部分にコードを一旦貼り付けます。
      貼りつけたコード(xxx~はコード番号)を
      <div class="ninja_onebutton">
      <script type="text/javascript">
      {literal}
      //<![CDATA[
      (function(d){
      if(typeof(window.NINJA_CO_JP_ONETAG_BUTTON_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx)=='undefined'){
              document.write("<sc"+"ript type='text¥/javascript' src='http:¥/¥/omt.shinobi.jp¥/b¥/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'><¥/sc"+"ript>");
      }else{ 
          window.NINJA_CO_JP_ONETAG_BUTTON_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.ONETAGButton_Load();}
      })(document);
      //]]>
      {/literal}
      </script><span class="ninja_onebutton_hidden" style="display:none;">{$freo.core.http_file}/page/{$page.id}</span><span style="display:none;" class="ninja_onebutton_hidden">{$page.title}</span>
      </div>
      に編集(赤字を追加)します。

    ※タイトル部分にサイトのタイトルを表示させたい場合は上記の{$entry.title}または{$page.title}の部分に適宜{$freo.config.basis.title}を加入してください。

※基本的には一度設置した管理画面でボタンを変更する時でもコードの張り替えを行う必要はありません。

ページ移動

関連エントリー

コメント

木耳 空旭

こちらの記事、大変世話になっております。ありがとうございます。

「freoで幅可変の2カラムのスキンを作るには」
http://cccabinet.jpn.org/view/14
とこちらの「freoに忍者おまとめボタンを設置する」を組み合わせ、おまとめボタンを記事下部に設置しましたら、意図しない表示になりました。
最初の記事のおまとめボタンの位置が、ユーティリティ最下部の長さまで引っ張られてしまうようです。
忍者の問題なのかはちょっとわかりかねました。
設置の仕方の問題でしたらお恥ずかしい限りですが、良い対処法がおありでしたらお教え頂けたらありがたいです。

  • URL
  • 2013/08/02 18:01:00

ccc

どうやら忍者のcssの設定で「clear:both;」が入っているためそのような現象になるようです。

css/default.cssのユーティリティ⇒div#utilityで変更した

float: right;


position: absolute;
right: 30px;

に変えれば回避されるようです。

ただし、ユーティリティをposition:absoluteで固定した場合ユーティリティが、コンテンツ部分より長い場合はフッターに被ってしまうかもしれません。
参考:スタイルシートによる崩れない 2カラム 3カラム・レイアウト
http://desperadoes.biz/style/dan/

  • 2013/08/02 21:34:00

木耳 空旭

お早いお返事ありがとうございます。
忍者のCSSが原因でしたか。
positionを試してみました。仰るとおりの挙動になりました、本当にありがとうございます。
フッダーに被るのは大変なので、もう少し色々やってみようかと思います。

  • URL
  • 2013/08/02 21:49:00

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム

基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がありますので、その旨ご了承下さい。

ユーティリティ

2024年11月

- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

キーワード検索

キーワード検索フォーム

ユーザー

  • cccのアバター

新着画像

ブログパーツ

Twitter

Twilogを見る

Feed