賢威8では決められたタグを設置することで簡単にSNSボタンを表示できます。
1 2 3 4 5 |
<aside class="sns-btn_wrap"> <div class="sns-btn_tw"></div> <div class="sns-btn_fb"></div> <div class="sns-btn_hatena"></div> </aside> |
それぞれのタグは以下のように対応していて、特定のボタンを削除するには上記のタグから対応する<div class=”sns-btn_XX”></div>を削除するだけです。
クラスごとに対応しているSNS
- 「sns-btn_tw」:Twitter
- 「sns-btn_fb」:Fcebook
- 「sns-btn_hatena」:はてなブックマーク
また、SNSボタンではFacebook、はてなブックマークで数値を取得していますが、これは基本的にそのボタンが置かれているページの値がそのまま利用されています。
※Twitterなど数値を取得できないものは代わりのテキストを設置しています。
もし、ボタンが置かれているページとは別のページの値を取得したり、シェアできるようにしたい場合は、以下のようにHTMLタグに「data-url属性」と「data-title属性」を設置して、取得したいページのURLとタイトルを記述します。
次のものは「http://www.cpi.ad.jp/bourne-writing/」を指定してみた例です。
1 2 3 4 5 |
<div class="show-sample"><aside class="sns-btn_wrap p0-b"> <div class="sns-btn_tw" data-url="http://www.cpi.ad.jp/bourne-writing/" data-title="沈黙のWebライティング - Webマーケッター ボーンの激闘 -"></div> <div class="sns-btn_fb" data-url="http://www.cpi.ad.jp/bourne-writing/" data-title="沈黙のWebライティング - Webマーケッター ボーンの激闘 -"></div> <div class="sns-btn_hatena" data-url="http://www.cpi.ad.jp/bourne-writing/" data-title="沈黙のWebライティング - Webマーケッター ボーンの激闘 -"></div> </aside></div> |