EZ-SPARROW > 「simple share buttons adder」と「はてなブックマークボタン」でソーシャルボタンを作成

「simple share buttons adder」と「はてなブックマークボタン」でソーシャルボタンを作成

January 28, 2015

ソーシャルボタンのプラグインとして有名なのは「WP Social Bookmarking Light」だろう。

ただ、サイトのデザインに力を入れてくるとどうしてもサイトに合ったオリジナルのデザインで設置したくなるものだ。

かといって、開発者登録をして本格的に・・・・

というのもちょっと違っている。もっと手軽にやりたい。

という方にお勧めなのが

「simple share buttons adder」というプラグインだ。

このプラグインの優れているところは多数のデザインから

ソーシャルボタンのアイコンを選択できることに加え

オリジナルの画像を使用することもできる点だ。

ただ、メリットばかりではない。

スポンサーサイト

「simple share buttons adder」に「はてなブックマーク」ボタンを設置する

「simple share buttons adder」は日本のソーシャルボタンに対応していない

というデメリットがある。

人気のLINEやはてなブックマークといった類だ。

例えばはてなブックマークに対応したいという場合は

力技になるが、

「Tweet, Like, Google +1 and Share」

というプラグインとの併用がおすすめだ。

このプラグインはオリジナルボタンを追加する機能があらかじめ用意されており

オリジナルボタンだけを表示することも可能だ。

「Tweet, Like, Google +1 and Share」 + 「はてなブックマーク」といったキーワドで検索すれば

情報が得られるが、簡単に手順を説明すると

  1. 画像を準備
  2. はてブのURLを取得
  3. CSSを修正

といった流れだ。

設置サンプルは以下。

 

 

一番左のはてなブックマークは「Tweet, Like, Google +1 and Share」、

あとは「simple share buttons adder」を使用している。

はてなブックマークのURLは http://b.hatena.ne.jp/guide/bbuttonから取得できる。

入力したURLとタイトルは「Tweet, Like, Google +1 and Share」のオプションを利用する。

はてなブックマークボタン参考コード

<a href="http://b.hatena.ne.jp/entry/%%URL%%" class="hatena-bookmark-button" data-hatena-bookmark-title="%%TITLE%%" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="ここに作成した画像URL" alt="このエントリーをはてなブックマークに追加" class="hatena"></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

 

simple share buttons adderをテンプレートファイル内に挿入する

<?php echo do_shortcode('[ssba]');  ?>
<?php if(function_exists('display_social4i'))
echo display_social4i("large","float-right");
?>

 上記のコードで任意の場所に「Tweet, Like, Google +1 and Share」と「simple share buttons adder」の

両方を表示させることが可能だ。

 

RELATED POSTS