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

Pocket使い始めました(アドオン入れて快適!)
ので、ボタンを追加がてら久しぶりにブックマークボタンを見直してみました。
書き換える要素は同じですので、参照サイトは前回の記事よりご確認ください。

非同期のものばかりなので、jsは<body>直前にまとめて記述するようにしています。

導入時のバージョン:Wordpress 3.5.1
前回の記事:プラグインなしでWordPressにブックマークアイコンを追加する

公式サイトでカスタマイズした後、ピンク文字のところをWordpress用に書き換えるとスムーズです。

Twitter

スクリプトの表記が少し変わっていました。
data-via=”aiooxx”はご自分のTwitterIDに変更お願いします。
Twitter / ツイートボタン

<a href="https://twitter.com/share" class="twitter-share-button" data-text="<?php the_title(); ?>" data-count="none" data-url="<?php the_permalink() ?>" data-via="aiooxx" data-lang="ja">ツイート</a>

</body>直前

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Facebook

html5記述に変更しました。
このボタンを使用すると、ポップアップ出てくるようになるんですね、なるほどなるほど。
Like Button – Facebook開発者/

<div class="fb-like" data-href="<?php the_permalink() ?>" data-send="false" data-layout="button_count" data-show-faces="false"></div>

</body>直前

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

はてブ

変更ありませんでした。
はてなブックマークボタンの作成・設置について

<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="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>

</body>直前

<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

Tumblr

こちらも特に変更ありませんでした。
ボタン | Tumblr

<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>

</body>直前

<script src="http://platform.tumblr.com/v1/share.js"></script>

Pocket

公式でカスタマイズの説明あったのでその通りにやってみました。
Pocket for Publishers: Pocket Button
Pocket for Publishers: Pocket Button Documentation

<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en" data-save-url="<?php the_permalink() ?>"></a>

</body>直前

<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>

Evernote

共通ボタンの提供終了していました。いつの間に…
Site Memory [Deprecated] – Evernote Developers

Google+1

何故かエラーでボタンのカウントがされていなかったので、一旦削除しました。
ちょっと原因調べてみます…
+1 Button – Google+ Platform — Google Developer

ソーシャルサービスのガイドラインを調べてみた

今使用しているサービスのアイコンをつくりたく、
各サービスのガイドラインを調べてみたので、まとめてみました。
(私がよく使用しているものだけになっていますので、あしからず!)

ガイドラインの内容についてはリンク先のサイトよりご確認ください。

Facebook

ブランドリソースセンター

Twitter

Twitter / Logos & Brand

Google

Google 使用許諾

Tumblr

Trademark Guidelines | Tumblr

Instagram

Use of the Instagram logo • Instagram Help Center

Yahoo

Yahoo! JAPANのページ全般 ヘルプ – Yahoo! JAPANへのリンクを設定する

Facebook,Twitterはガイドラインもしっかりしてるので、使いやすいですね。
(Facebookはよくロゴ使っているのを見かけるような気はしますが…)
それ以外のところはよくわからないところが多いです :(

今回調べていてロゴの表記と商標の表記も違うものがあったため(大文字・小文字など)、
ブログ内の記述も変更しています。
(調べていったつもりですが、抜けがあったら、すいません…)

個人的にはFirckrのアイコンが知りたかったのですが、
どこにも記載されていない感じが…
他のサービスもまたわかるものがあれば追記します。

追記[2013.04.22]:Pinterest

Brand Guidelines | Pinterest for Business

Facebookページ作るときに参考にしたサイトのまとめ

個人的に全く使ってないFacebookですが(…)
Facebookページ作るときに参考にしたサイトのまとめてみました。

Facebookページをつくりたい

参考:Facebook ページ(旧ファンページ)の作り方 | nanapi [ナナピ]

オリジナルページを作成したい(iframe)

参考:iFrameによるFacebookページ作成法と6つのポイント|Webpark
横幅520px、iframeで読み込みなのでサーバーも必要になります。

Facebookと○○を連動したい

参考:involverの使い方|Facebook研究所
25eggではtwitterとfrickrを連携させています。
involverの無料で導入できるのは2つまでです。

ブログの更新情報をウォールに流したい

参考:RSS GraffitiでFacebookページをグレードアップ | モデルケース|次世代研究所

ウォールにのるテキストと画像を変更したい(OGP設定)

参考:FacebookページにiFrameを組み込もう|Social Media Experience
参考:プラグインを使わずにWordPressにFacebook用OGP(Open Graph Protocol)を設定する | CMS | ウェビンブログ
私の大好きなプラグインなしの設定!
まずアプリを作成して→Wordpressのソース内に書き込みします。

念のため、OGP設定確認しておく

公式:Debugger – Facebook開発者
先ほどのOGP設定デベロッパーサイトで確認を。

ブログやサイトにFacebookページのアピールをしたい

公式:Social Plugins – Facebook開発者
「Like Box」がFacebookページの設定です。
facebookのサイトはブックマークしないと、なかなか辿りつけない…

最後に…

25eggのFacebookページのご紹介

他にも「ifameのスクロールが!」とか「ファン限定ページどうすんの?」とかいろいろありますが、
基本設定はこんなところかなと思います。

プラグインなしで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>