エントリー
freoに忍者おまとめボタンを設置する
- カテゴリー:エントリー, ページ
- タグ:freoテンプレート, ソーシャルボタン
最近はソーシャルメディアのボタンが増えて、1つずつ設置するのが面倒なので、「忍者おまとめボタン」を利用する方が便利みたいです。当サイトでも導入してみました。
- 忍者ツールズ のアカウントでログインし(忍者ツールズのアカウントがない場合は新規登録してください)、忍者おまとめボタンのトップ からスタイルを選んで「上記セットで新規作成」か「設置ボタンを1つずつ選択して作成」のボタンを押します。
- 「利用規約に同意して次へ」を押します。
- 「設置するWebサイトを選んでください。」と出たら、「その他のブログ」をクリックします。
- プレビューで位置などを確認後、「コードをコピーする」を押してスクリプトコードをコピーします。
- コードの貼り付け
- エントリーの場合
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}を加入してください。
- エントリーの場合
※基本的には一度設置した管理画面でボタンを変更する時でもコードの張り替えを行う必要はありません。
関連エントリー
- 2023/09/05 freoのプロフィールやコメントでGravatarのアバターを表示する方法
- 2018/05/12 freoのエントリーのタグ投稿を楽にする方法
- 2018/03/16 freoのエントリーとページの編集画面で添付ファイルとイメージの画像を表示する方法
- 2018/03/16 freoのエントリーとページの編集画面でオプションの画像を表示する方法
- 2018/02/09 freoのエントリーとページの管理画面に閲覧制限情報を表示する
- 2017/06/10 freoのコメント登録フォームを折りたたむボタン
- 2017/06/10 freoをスマートフォンから見た時にリストのリンクなどをボタン化する
- 2017/05/23 freoの管理用テンプレートをBootstrap3でカスタマイズ
- 2015/04/05 freoで各記事に設定したフィルター名を表示する
- 2014/08/03 freoの注文管理プラグイン画面で投稿者ユーザーの権限を制限する
コメント
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
コメント登録
- コメントを入力してください。
- 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
木耳 空旭
こちらの記事、大変世話になっております。ありがとうございます。
「freoで幅可変の2カラムのスキンを作るには」
http://cccabinet.jpn.org/view/14
とこちらの「freoに忍者おまとめボタンを設置する」を組み合わせ、おまとめボタンを記事下部に設置しましたら、意図しない表示になりました。
最初の記事のおまとめボタンの位置が、ユーティリティ最下部の長さまで引っ張られてしまうようです。
忍者の問題なのかはちょっとわかりかねました。
設置の仕方の問題でしたらお恥ずかしい限りですが、良い対処法がおありでしたらお教え頂けたらありがたいです。