02時37分TweetListPocketこのブログでもFacebookの「いいね!(like)」ボタンを設置する方法は書いたことがあるし、同じように「いいね!」の解説ページは他にもたくさんあるんだけど、各種「share(シェア)」ボタンのオプション設定の解説を日本語で書いてるページはあまり見あたらない。(現在はいいね!数をカウントしている「share+カウント数ボタン」の解説ページはある。Buttonの方にページ移動させられて、shareボタンのヘルプページが見つかりにくいという問題もある模様。いうわけで「shareボタンの設定と設置方法」を書いてみた。ブログやサイトに設置するときに参考にどうぞ。各種sahreボタンの解説shareボタンも「いいね!」ボタンと同じようにヘルプページが存在して、そこに解説が書かれている。現在はヘルプページ自体がなくなって、いいね!(like)ボタンの方にリダイレクトされている模様。Facebookとしてはいいね!の方に統一したいのではないかと思われる。[追記2]どうやら設定方法に大きな変化があったようなので、記述内容を加筆・修正しました。(2012年8月)とはいえ相変わらずドキュメントは英語で日本語化されていないので、コード例を引用しつつ説明してみたい。簡単な設置方法は以下のコードをshareボタンを設置したい場所に書き込むだけ。※最後のものを除きボタンは単なる画像で動作しません。Facebookのアイコンの横に「Share」と書かれたボタンが表示される。以前は全体がボタンのように表示されるタイプだったが、デフォルトの表示形式が変更された様子。コードの例ではaタグの後にFacebookのJavaScriptが読み込まれているが、実際はheadタグなどの好きな部分に1回記述しておけばいい。(これはこれから先に説明するどのボタンタイプでも同じ。)注意点としては実際にshareされるページは「今開いてるページ」なので、ブログのトップページのような「記事が一覧表示されてるページ」では、個別の記事をshareしようとしても正常に機能しない。何らかの問題でURLが取得できないことがあるようで、そのようなとき(ページで)はボタンそのものが出てこないなど正常に表示されないことがある模様。そのような場合は、以下のボタンのようにタグの属性部分にURLの設定を書き込む。buttonタイプ「Share」と書かれた横長のボタンのようなものが表示されるタイプ。type="text/javascript"></script>表示例(google)aタグのtypeに「button」と記述し、share_urlにshareしたいURLを書き込む。後述の「button_count」と似ているが、いくらシェアされていてもカウントが表示されない点が異なる。button_countタイプ「button」タイプの右にカウントが表示されるボタン。type="text/javascript"></script>表示例(google)「button」のボタンにシェア数のカウント数が追加されたもの。ネットで一番見かけるスタンダードなタイプかもしれない。linkタイプFacebookのアイコン+「Share」のタイプ。type="text/javascript"></script>表示例(google)「type」を設定しない場合と同じ。意図的にデフォルトと同じ動作をさせるときに使う設定。iconタイプアイコンだけが表示されるタイプ。type="text/javascript"></script>表示例(google)小さいアイコンのみが表示される。スペースを取らない反面、ただ見ただけでは押して何が起こるかわからないのが問題かもしれない。box_countタイプ横長のボタンと吹き出しでカウント数が表示されるタイプ。type="text/javascript"></script>表示例(google)Shareボタン+吹き出しカウントの大きなサイズのボタンが特徴。目立たせたいときやスペースに余裕があるときに使用するとよさそう。好きな画像やテキストをshareボタンにするFacebookのshareボタンはリンクのみで作ることができるため、JavaScriptを一切使わず任意の画像やテキストを使って同等の機能を再現することが可能になっている。(ただしこの場合は標準のアイコンが表示されないので、必要ならフリーのFacebookアイコンなどを別途用意する必要がある。target="_blank">[任意のテキストや画像タグ]</a>表示例(このページ)この記事をFacebookで共有するリンクに含める記事のURLはURLエンコードするべきと公式のヘルプページには書いてあるものの、テストしてみたところURLエスケープしなくてもとりあえず機能する模様。(もちろんエンコードできるなら指示どおりにした方が間違いない。)逆に記事のタイトルはページがUTF-8でない場合は文字化けして正常に動作しなくなるので、URLエンコード済みのタイトルを記述するか「&amp;t=[記事のタイトル]」ごと削除するようにする。いえ実際はタグ内の「&amp;t=~」を削ってしまってもFacebookが自動でタイトルを取得するので、URLから記事のタイトルを消す方法をとった方がスマートかも知れない。HTMLエラーがないValidなコードにしたい場合Facebookの標準Shareボタンもこの手のサービスにありがちな「ValidでないHTMLタグ」になってしまっている。これはボタンの設定に「type」や「share_url」という存在しない属性が使われているため。name="fb_share"></a>」ならエラーは発生しないが、そうするとShareするURLが設定できなくなってしまう。(href属性では機能しない。)これを解決するには個別(の記事)ページのみに「name="fb_share"」だけを設定したshareボタンを設置するか、通常のリンクを使う前述の「任意の画像やテキストを使うボタン」を利用するしかないと思われる。)この記事へのレスポンスURL:タイトル:HTMLタグ:トラックバック(2)DISQUS角丸を表現するCSS3のborder-radiusのブラウザ対応状況を調べてみたFC2ブログ(FC2ID)の仮登録メールが届かないときは記事への反応この記事へのコメントコメント機能を利用するにはログインする必要があります。「Disqus」または「Twitter」「Google」「Facebook」などのアカウントが使用できます。URLこの記事にトラックバックする(FC2ブログユーザー)スパム対策のため、この記事へのリンクのないトラックバックは受信されません。01時17分FC2ブログにいいね!ではなくシェアボタンを設置する方法。今回はFacebookのシェア(Share)ボタンの設置方法を紹介します。近頃はブログと連携させる機能としてはマストアイティム的な所がありますが今回は「いいね!」ではなく「シェア」をあえてチョイス。Disqusブログロール空気を読まない中杜カズサブログ名の設定は、まだ。「メルペイ残高」はどう使うのがスマートでお得か?3つのルートから考える「コード決済」は進化か退化か。自分でQRコードをスキャンして初めて実感できた“存在意義”IIJmio(みおふぉん)を解約したのでSIMカードを返却。