08 6月 2011

Facebook,Twitter,はてな,mixiのソーシャルボタンをオリジナルにしたいのです

Posted in 制作メモ On 6月 8, 2011

FacebookやらTwitterやらはてなやらmixiやら何やらソーシャルボタン付けたいけれど、
110608_01.jpg
角丸とかフォントとか大きさがまちまちだし幅とるしカウント数いらないし…
記事の下とかにあるならいいけど、
これが記事の上にあったりすると微妙に嬉しくない。
なんとか、
110608_02.jpg
って具合に、アイコンだけ並べておけないだろうか。と思ったわけです。


分けて書こうと思ったけど、あんまりマメ子じゃなくてすぐ忘れるので、一気にダーッとメモします。
≫Facebookのシェアをスマートに！
　≫ボタンをオリジナル（自作）にする簡単なカスタマイズ
　　≫FacebookシェアのオリジナルボタンをMovabletypeに入れる。
　≫Facebookに投稿するコンテンツの見せ方にこだわる
　　≫OGPのmetaタグをMovableTypeに入れてみる
　≫テストユーザーで投稿テストしてみる
≫Twitterのボタンをオリジナルにする
　≫TwitterのオリジナルツイートボタンをMovabletypeに入れる。
≫はてなのブックマークアイコンを入れる
　≫はてなのブックマークアイコンをMovabletypeに入れる
≫mixiのいいねボタンを設置する
　≫mixiチェックのオリジナルボタンをMovabletypeに入れる
≫はてな、Facebook、Twitterのカウント数をチェックする
≫いろいろ説明したけど、まるっとソースをどうぞ。

では、行きます。

Facebookのシェアをスマートに！

シェアボタンつけるのは、簡単なことだと思うんですよ。
今は「いいね」に統合されてますが、オフィシャルの発行ツールがあるので。
≫ Core Concepts Social Plugins
3種類から選べます。
110608_03.jpg
そこで、Facebookのシェアをオリジナルのボタンにする。

ボタンをオリジナル（自作）にする簡単なカスタマイズ


いいねなのかシェアなのかFacebookページなのか何処へ行くのか分からないって問題もありますが…
まずその前に、Facebookのロゴ規定
http://www.facebook.com/brandpermissions/logos.php

「「f」ロゴを使用する際には、ユーザーに求められている動作を明示する必要があります(「Facebookでいいね！してね」や「Facebookでアプリをご利用ください」など)。」

とあります。
ので、大丈夫ですね。
ソースは、

<a href="http://www.facebook.com/share.php?u=ここにhttp://のアドレス" onclick="window.open(this.href, ‘facebookwindow’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1’); return false;"><img src="オリジナルのボタン" width="サイズ" height="サイズ" /></a>

です。
onclick=””は、なくてもイイと思いますが、シェア用の小窓を出すのがよいかと…。

FacebookシェアのオリジナルボタンをMovabletypeに入れる。

MovableTypeの個別ページに入れるのは以下。
テンプレート→アーカイブテンプレート→ブログ記事

<a href="http://www.facebook.com/share.php?u=<$MTEntryPermalink$>" onclick="window.open(this.href, ‘facebookwindow’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1’); return false;"><img src="オリジナルのボタン" width="サイズ" height="サイズ" /></a>

さらに、

Facebookに投稿するコンテンツの見せ方にこだわる

シェアしてもらうなら、タイトルだけでなく、写真や見出しの形式にもこだわりたいもの。
通常は、metaタグで指定しているDescriptionや、<title>タグの中身が挿入されるので、それなりに書いていれば大丈夫。
110608_04.jpg
まずは、Facebook側でどんな情報を拾うのか。
http://developers.facebook.com/tools/lint/
ここにURLを入れると、サイトのタイトルや説明文、画像が確認出来ます。
画像は、投稿画像の中から選択できますが、サイドバーのバナーなんかも選択出来てしまうので、このあたりをもう少しスマートにしたい。
ここをカスタマイズするには、
OGP （Open Graph Protocol）なる仕様があるので、それを追加します。
metaのエリアに以下を追加。

<meta property="og:site_name" content="ここにサイト名" />
<meta property="og:type" content="Object typesから選択" />
<meta property="og:url" content="ここにhttp://のアドレス" />
<meta property="og:title" content="ここに記事のタイトル" />
<meta property="og:image" content="記事のサムネイル画像" />
<meta property="og:description" content="ここに記事の見出し文" />

このページがいったいどういう内容なのかがざっくりプレゼンするわけです。
ちなみに、こちらが仕様
http://ogp.me/
ここの最後のほうに「Object types」というのがあるので、
og:typeのcontentには、
ブログなら「article」とか「blog」とか「website」とか。
カフェのサイトなら「Cafe」、映画サイトなら「movie」と入れるってことですね。

OGPのmetaタグをMovableTypeに入れてみる。

最低限のものを入れたいと思います。type,title,description の3つを入れてみます。
MTを使っている人は、ほとんどがヘッダーなどはテンプレートにしていると思います。
メインページ、カテゴリページ、個別ページでも共通で使えるように記述します。
■まずはタイプ

<meta property="og:type" content="article" />

↑これはどのページでも共通。ここではタイプを「article」にしています。
■タイトル

<meta property="og:title" content="<MTIf name="entry_archive"><$mt:EntryTitle$> | <MTElseIf name="category_archive"><$mt:ArchiveTitle$> | <MTElseIf name="page_archive"><$mt:PageTitle$> | </MTIf><$MTBlogName$>" />

content= の部分は、日本語にすると、「もし個別記事なら≪記事のタイトル≫いれて｜ もしカテゴリアーカイブなら≪アーカイブ名≫いれて｜もしページアーカイブなら≪ページ名≫いれて｜」最後に「ブログ名」
ということで、個別記事ページは「記事タイトル｜ブログ名」、カテゴリページは「カテゴリー名｜ブログ名」、ページは「ページ名｜ブログ名」、どれにも当てはまらない場合、「ブログ名」のみが入ります。
■説明文

<meta property="og:description" content="<MTIf name="entry_archive"><$MTEntryBody word="40" convert_breaks="0"$><MTElse><$mt:BlogDescription encode_html="1"$></MTIf>">

タイトルに同じく「もし個別記事なら≪本文から40文字を改行なしで≫いれ、じゃなければブログの説明文をいれる。

テストユーザーで投稿テストしてみる

Facebookはとにかく実在している人が登録しているハズなので、やたらめったらに偽名でアカウント発行するのは良心が痛みます。
すでに登録していても、友達のニュースフィードに表示されたりするので、テスト投稿を何度も試みるのは結構恥ずかしい…
ってことで、こちらが素敵なツール。
小粋空間さんの「Facebookテストユーザー作成ツール」です。
アプリケーションIDが必要です。
http://www.koikikukan.com/archives/2011/05/23-015555.php

Twitterのボタンをオリジナルにする

オフィシャルのボタンの作成はこちら。
http://twitter.com/about/resources/tweetbutton
110608_05.jpg
惜しい…

のボタンに変更します。
Twitterのロゴ規定
http://twitter.com/about/resources/logos
htmlにいれるには、こちら

<a href="http://twitter.com/share?count=horizontal&amp;original_referer=ここにhttp://のアドレス&amp;text=ここにタイトル&amp;url=ここにhttp://のアドレス&amp;via=ここに自分のTwitterアカウント" onclick="window.open(this.href, ‘tweetwindow’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1’); return false;"><img src="オリジナルのボタン" width="サイズ" height="サイズ" /></a>

facebook同様に、onclick=””は、なくてもイイと思いますが、小窓のほうが馴れ気味。

TwitterのオリジナルツイートボタンをMovabletypeに入れる。

<a href="http://twitter.com/share?count=horizontal&amp;original_referer=<$MTEntryPermalink$>&amp;text=<$MTEntryTitle encode_url="1"$>&amp;url=<$MTEntryPermalink$>&amp;via=ここに自分のTwitterアカウント" onclick="window.open(this.href, ‘tweetwindow’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1’); return false;"><img src="オリジナルのボタン" width="サイズ" height="サイズ" /></a>

はてなのブックマークアイコンを入れる

はてなは超簡単です
http://b.hatena.ne.jp/guide/bbutton
もともと小さいアイコンのみのソースが用意されています。
110608_06.jpg
なので、もしオリジナルのアイコンにするならば、
imgソース（ブルーの部分）をオリジナルのものに変えれば良いわけです。

<a href="http://b.hatena.ne.jp/entry/ここにhttp://のアドレス" class="hatena-bookmark-button" 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><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

はてなアイコンは、はてなのほうで20pxが用意されているので、ここでは直接それを呼び出します。
ってわけです。

はてなのブックマークアイコンをMovabletypeに入れる

<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>" class="hatena-bookmark-button" 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><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

mixiのいいねボタンを設置する

mixiのチェックボタンはDevelopper登録が必要です。
≫mixi デベロッパー登録
画面にしたがって登録すると、最後にmixi チェックキーが発行されます。
あとは、チェックボタンの設置方法はmixiに載っています。
≫mixiチェックボタンの設置
flashに入れる場合や、オリジナルのアイコンを使う場合もちゃんと記述されています。詳しいですね！さすが日本のサービス。
公式のボタンを使わない場合、

<a href="javascript:void(0);" onclick="window.open(‘http://mixi.jp/share.pl?u=ここにhttp://のアドレス&k=ここにmixiのチェックキー‘,’share’,[‘width=632′,’height=456′,’location=yes’,’resizable=yes’,’toolbar=no’,’menubar=no’,’scrollbars=no’,’status=no’].join(‘,’));">mixiチェック</a>

ということなので、

mixiチェックのオリジナルボタンをMovabletypeに入れる

←これを入れたい！

<a href="javascript:void(0);" onclick="window.open(‘http://mixi.jp/share.pl?u=<$MTEntryPermalink$>&k=ここにmixiのチェックキー‘,’share’,[‘width=632′,’height=456′,’location=yes’,’resizable=yes’,’toolbar=no’,’menubar=no’,’scrollbars=no’,’status=no’].join(‘,’));"><img src="オリジナルのボタン" width="サイズ" height="サイズ" /></a>

です。

はてな、Facebook、Twitterのカウント数をチェックする

Google Chromeを使ってるんですが、Chromeの拡張機能で、ソーシャルでどれだけカウントされているのか知りたいって時に便利なもの。
■Twitter、Facebook、はてなの数をまとめて教えてくれる Social!Social!Social!

インストールすると、アドレスバーの隣に「S!」マークとブックマーク数が表示され、現在観ているページの「はてブ数」「Facebookいいね数」「Twitterのツイート数」が分かります。クリックすると、その内訳が出てきます。そしてさらにアイコンの所をクリックすると、はてなはブックマークページへ。twitterはつぶやき機能、それぞれのページへ飛んで詳細が分かります。これひとつでかな〜り嬉しい。
110608_07.jpg
ほかにも、はてなだけなら、カウント数チェック＆ブックマークレット
≫はてなブックマーク GoogleChrome 拡張（オフィシャル）
Twitterだけなら、カウント数のほかつぶやき機能もついた
≫Twitterつぶやきカウンター
Facebookのシェアやいいね数を確認するのは「Facebook Social Plugin」などありますが、ページ遷移する度に出てくるという変な挙動があるので、今のところちょっと微妙です。

まるっとソース

110608_02.jpg
最後に、↑この状態にするべく、コピペ用のMovableTypeソースをまるっと！
赤はMTのテンプレートタグです。青の部分は自身のものに変更してください。

<div style="text-align:right;margin:0 15px 15px 0;">
<ul style="float:right;list-style:none;">
<li style="float:left;padding-right:5px;"><a href="javascript:void window.open(‘http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=’+encodeURIComponent(document.title)+’&amp;u=’+encodeURIComponent(location.href)+’&amp;ei=UTF-8′,’_blank’,’width=550,height=480,left=100,top=50,scrollbars=1,resizable=1′,0);"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" alt="Yahoo!ブックマークに登録" style="border:none;"></a></li>
<li style="float:left;padding-right:5px;"><a href="javascript:void(0);" onclick="window.open(‘http://mixi.jp/share.pl?u=<$MTEntryPermalink$>&k=mixiチェックキー‘,’share’,[‘width=632′,’height=456′,’location=yes’,’resizable=yes’,’toolbar=no’,’menubar=no’,’scrollbars=no’,’status=no’].join(‘,’));"><img src="オリジナルボタンのソース" width="20" height="20" /></a></li>
<li style="float:left;padding-right:5px;"><a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>" class="hatena-bookmark-button" 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><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></li>
<li style="float:left;padding-right:5px;"><a href="http://www.facebook.com/share.php?u=<$MTEntryPermalink$>" onclick="window.open(this.href, ‘facebookwindow’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1’); return false;"><img src="オリジナルボタンのソース" width="20" height="20" /></a></li>
<li style="float:left;padding-right:5px;"><a href="http://twitter.com/share?count=horizontal&amp;original_referer=<$MTEntryPermalink$>&amp;text=<$MTEntryTitle encode_url="1"$>&amp;url=<$MTEntryPermalink$>&amp;via=ツイッターアカウント名" onclick="window.open(this.href, ‘twitter_share’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1’); return false;"><img src="オリジナルボタンのソース" width="20" height="20" /></a></li>
</ul>
</div>

yahooとはてなはサービス側から20px画像が提供されますが、以下3個は自作なので右クリックでどうぞ。

Tags:, , , ,

Comments

  1. By サカイヨシキ

    このページを参考に作らせてもらいました。facebookでタイトルなどが正しく表示されなかったり、twitterで外部jsに書いた場合、タイトルが表示されなかったりするんですが、なにか原因とかわかりますか？

    ちなみにページはこちらです。

    http://lowbite.com/

    このページのLINE UPの11項目にfacebookとtwitterのソーシャルボタンを
    つけてあります。

    突然すいません。お時間あるときにでもご回答いただけたら幸いです。

  2. By なむ

    参考にさせていただきました。
    是非、これのgoogle+バージョンが欲しいです。

  3. By おつゆ

    はじめまして、おつゆといいます。

    この記事に大変助けられました！
    mixiチェックのオリジナルボタンをMovabletypeじゃないサイトに入れるための
    シンプルコードが知りたいです！よかったら教えてください！

  4. By 通りすがり

    使わせて頂きます。ありがとうございました。

  5. By kanon

    こんにちは。
    kanonと申します。
    mixiチェックをオリジナルアイコンにしたくてサイトを拝見させていただきました。
    技術情報ありがとうございます。

    そこで気がついたのですが
    表示サンプルなのですが
    「ここにmixiのチェックキー‘,’share’,」の「‘」「’」が大文字になっていましたので報告します。

    以上、よろしくお願いします。