WordPressにtwitter、Facebook、はてブのシェアボタンをオリジナルデザインで設置する

Posted on

Sponsored Link

twitterFacebookはてブ

WordPressにはWP Social Bookmarking Lightというソーシャルボタンを設置するのに便利なプラグインがありますが、できるだけプラグインは使わない方向ということで自分で作って設置しましょう。

今回はtwitterとFacebookとはてなブックマークボタンを作りましょう。

tumblrでシェアしてくれる人はブラウザの拡張機能とか使うだろうし、とりあえずこの3つだけ抑えておけばいいんじゃないでしょうか。
あんまりたくさんあってもあれですし。

twitter

公式のでよければここで作りましょう。

Twitter / Twitterボタン

オリジナルデザインにするには設置したい場所にこれを書きます。
だいたいcontent-single.phpのケツとかですかね。

 

<?php the_title(); ?>で表示してるページのタイトル、<?php the_permalink(); ?>でURLを取得してくれます。

<a href="&quot;http://twitter.com/share?text=<?php">-サイトタイトル&url=<!--?php the_permalink(); ?-->"target="blank">
<img alt="" src="画像のURL" width="横サイズ" height="縦サイズ"/>
</a>

Facebook

公式はこちら。
Like Button – Facebook開発者

Facebookはいいねボタンは作れないけどシェアボタンは作れます。
いいねとかよく意味わからないしこれで十分だと思います。

<a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>" target="blank">
<img alt="" src="画像のURL" width="横サイズ" height="縦サイズ" /></a>

はてなブックマーク

公式はここ。
はてなブックマークボタンの作成・設置について

はてブボタンが一番簡単です。

公式ボタンのコードの画像を変えればいいだけです。

<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加">
<img src="画像のURL" alt="このエントリーをはてなブックマークに追加" width="横のサイズ" height="縦のサイズ" style="border: none;" />
</a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

画像はあんまりぶっとんだデザインにしてもわかりにくいので、なんとなく押したらシェアできそうなボタンにして、他のボタンとデザインを揃えるようにしましょう。

フリーではてブボタン扱ってるとこあんまないけどこことか無難でいいんじゃないですかね。
ミニ・ソーシャル・アイコン -Blog //ヴォルフロッシュ




SHARE:)
このエントリーをはてなブックマークに追加 LINEで送る
Yahoo!ブックマークに登録

 
rss feed follow us in feedly Subscribe with livedoor Reader


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>