プラグインなしでWordPressにブックマークアイコンを追加する

公式のボタン設置はわかるのですが、
WordPressのindex.phpで個別記事に対応させたいのに公式見てもよくわからない…。
そこで設置する方法を調べました。

導入時のバージョン:Wordpress 3.1.3

ソーシャルボタンもいくつか種類が用意されていますので、
公式でカスタマイズした後、ピンク文字のところをWordpress用に書き換えるとスムーズです。

Twitter

公式:Twitter / ツイートボタン
参考:WordPress/Movable Typeに公式ツイートボタンを設置する: 小粋空間

(2012.09.30追記:data-via=”aiooxx”はご自分のTwitterIDに変更お願いします)

<a href="http://twitter.com/share" class="twitter-share-button" data-text="<?php the_title(); ?>" data-url="<?php the_permalink() ?>" data-count="none" data-via="aiooxx" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

はてブ

公式:使いやすくなりました! はてなブックマークボタン
参考:新「はてなブックマークボタン」wordpressに入れる方法 | A!@attrip

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php wp_title(); ?> | <?php bloginfo('name'); ?>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

Evernote

公式:Evernote Site Memory | Evernote Corporation
参考:Evernoteのクリップボタン『Evernote Site Memory』をWordPressブログに設置する方法|MONODEZ

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({title:'<?php the_title(); ?>',url:'<?php the_permalink(); ?>',code:'contents'}); return false;"><img src="http://static.evernote.com/article-clipper-jp.png" alt="Clip to Evernote" /></a>

Tumblr

公式:Tumblr共有ボタン | Tumblr
参考:WordPressにtumblrボタンを入れる | sanojimaru.com

<script type=”text/javascript” src=”http://platform.tumblr.com/v1/share.js”></script>

head内に上記記述が必要です。

<a href="http://www.tumblr.com/share/link?url=<?php echo urlencode(get_permalink(get_the_ID())) ?>&name=<?php echo urlencode(get_the_title()) ?>&description=<?php echo urlencode(mb_substr(strip_tags(get_the_content()), 0, 140))?>" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;">Share on Tumblr</a>

Facebook

公式:Like Button – Facebook開発者/
参考:WordPressのブログにFacebookのLike(いいね)ボタンを付ける方法。 – のらりくらり.com

<iframe src="http://www.facebook.com/plugins/like.php?app_id=210640278975237&amp;href=<?php the_permalink() ?>&amp;layout=standard&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>

横幅は100pxにしてます。サイトに合わせて変更を。
いいね!ボタンは0は横幅違って隙間できてしまうので、右端にして目立たないようにしています。

テストしてみて気づきましたが、Facebookは個人のウォールに表示される画像がフリーダムなことに。
こちらは別設定がいるようなので、次回にします。

追記:Google+1

ついに日本語対応!なので、Google+1も追加しました。
(思ってたよりリリースが早くてびっくり…)
公式:プラスワン ボタン

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'ja'}
</script>

上記をhead 要素内または body 終了タグの直前にいれる。

<g:plusone size="medium" count="false" href="<?php the_permalink() ?>"></g:plusone>

“プラグインなしでWordPressにブックマークアイコンを追加する” への1件の返信

コメントを残す

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