アメブロにTwitterやFacebookなどのソーシャルメディアへの
共有ボタンの表示ってどうやるのだろうと・・・
ググってみた。
そこで見つけた
▼記事にGoogle+1・Facebook・Twitter・はてブ共有ボタンを設置する方法(改善版こちらの記事を参考にさせて頂いた。
アメブロにある「フリープラグイン」という機能を使うらしい。
自由にプログラムコードを書けるように少し解放されているみたいだ。
その方法は、
<script src="http://www.google.com/jsapi"></script>
<script>google.load('jquery','1')</script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>
<script type="text/javascript">
$('.articleText').after('<divclass="socialbuttons1"></div>');
$.getScript('http://p.wazameba.com/njs/socialbutton2.js',
function(){socialbuttons({container:'div.socialbuttons1',buttons:['plusone','hatenabm','twitter','fbshare','fblike']})});
</script>
変更したのは、
記事の広告の後ではなく、
記事のすぐ後 広告より前 に
ボタンを設置したかったので
$('.articleText').after
に変更した。
ちなみに、
既にjQueryのプラグインを使っている場合は、上の2行は不要。
<script src="http://www.google.com/jsapi"></script>
<script>google.load('jquery','1')</script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>
備忘録として設定を残しておこう。
以下がその手順
▼フリープラグインのコードを貼り付けて保存
1.サイドバーの設定をクリック
2.プラグインの追加をクリック
3.フリープラグインをクリック
4.プラグインのコードを貼り付け
<script src="http://www.google.com/jsapi"></script>
<script>google.load('jquery','1')</script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script> <script type="text/javascript">
$('.articleText').after('<divclass="socialbuttons1"></div>');
$.getScript('http://p.wazameba.com/njs/socialbutton2.js',
function(){socialbuttons({container:'div.socialbuttons1',buttons:['plusone','hatenabm','twitter','fbshare','fblike']})});
</script>
5.保存ボタンをクリック
▼フリープラグインを有効にする
※既に有効にしている場合は不要
6.サイドバーの設置をクリック
7.フリープラグインをクリックしたまま
使用する機能にドラッグ＆ドロップ
8.フリープラグインが使用する機能に移動したのを確認
9.保存ボタンをクリック
▼ブログの表示を確認
ブログを表示させて確認
10.記事の後ろにボタンが追加できた
