現在、サイトにソーシャルサービスを統合することは非常に人気があります。
プラスワン など 、ソーシャルボタンが
つぶやくのを見たと思います。 今日、Ubuntu.comに行き、次の写真を見ました
。 これが最後のストローであり、問題を整理する時間を見つけられなかった人々を助けるためにこの記事を書くことにしました。 ご覧のとおり、ブラウザはローカライズを
ru_Ruとして定義し、それに応じて
Facebookボタンの
「like」署名を
「like」に置き換えました。 もちろん、このようなケアには感謝していますが、写真でわかるように、これは外観と機能に悪影響を及ぼします。 そのため、カウンター自体を見る方法がありません。カウンター自体には、好きな人の数が表示されます。 私はこれを何度も見たように、問題は本質的にグローバルであり、少なくとも審美的に満足のいくものではありません。
問題は、最初に
facebookを使用してボタンコードを生成するときに、ローカライズを選択する方法がないことです。 この問題を解決するには、2つのオプションがあります。
- 異なる言語で署名を表示する場合、ブロックのサイズが異なることを設計とレイアウトで考慮してください
- en_USのローカライズを強制し、常に次のような署名を検討します
私の意見では、2番目の解決策は、署名のあるボタンがきれいで非常に直感的に見えるため、より優れています。 同時に、レイアウトと設計に費やす労力が少なくなります。 署名を英語で実装するために、私はすぐに
facebookのプラグインドキュメントに目を向けました。 ドキュメントには、プラグインのローカリゼーションを設定するための2つのオプションが記載されています。これは、
ロケールパラメーターを
IFRAMEに渡すか、
XFBMLマークアップを使用するときにスクリプトでローカライズを指定すること
'//connect.facebook.net/en_US/all.js'; xfbmlの場合 。 そして
src="http://www.facebook.com/plugins/like.php?locale=en_US&..." IFRAMEの場合 。 ここではすべてが非常に簡単です。 しかし、何をすべきか、別のオプションを使用する必要があります。 たとえば、
HTML5を使用し
てボタンコードを挿入する場合
HTML5のボタンコードを生成すると、次のコードが取得されます。
< 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/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
行
js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; facebookサイトで生成されたコードにはすでに
ru_RUローカライズが
含まれていることが
わかります。
en_USに置き換えて、の
ような署名の付いたきれいなボタンを取得し
ます 。
これを行うことができます。 ただし、多くの場合、複数のソーシャルサービスをホストする機能を表すプラグインを使用します。 たとえば、
AddThisと
ShareThis 。
AddThisでこの問題を解決した方法を説明します
。ShareThisでも同様のソリューションになると思います。
Facebookボタンを使用して
AddThisサービスを追加するには、次のコードを生成して取得します。
<div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_counter addthis_pill_style"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f424c4c2820f671"></script>
<!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_counter addthis_pill_style"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f424c4c2820f671"></script> <!-- AddThis Button END -->
Facebookを英語にするために必要なことは、ローカリゼーションパラメータを渡すことだけです。
AddThisプラグインのドキュメントに目を向けると、パラメーターを渡すのは非常に簡単であることがわかりました。そのため、
fb:like: < >を
a class="addthis_button_facebook_like" < > a class="addthis_button_facebook_like"ます。 また、属性名は、Webサイトの
facebookプラグインのドキュメントに直接記載されています。 外見的には、すべてが非常に簡単です。必要な属性を探して
facebookサイトにアクセスしますが、そこに見つかりません。 驚くべきことに、属性の説明では必要ありません。 何らかの理由で、開発者は、ローカリゼーションを選択するための属性を個別に示す必要があるとは考えていませんでしたが、それを良心に任せました。 そのため、少し考えてから、次の属性
fb:like:locale="en_US"を指定することにしました
fb:like:locale="en_US" その結果、この明らかではない機会が役立ちました。 これで、
facebookボタンの
IFRAMEの
AddThisスクリプトに目的のパラメーターが渡され、ボタンが英語になります。
AddThisが同じ
IFRAMEを生成する場合、
IFRAMEを最初に使用しない理由の質問にすぐに答えます。
AddThisタグを使用してボタンを取得しない場合は非常に簡単です
。AddThisがこのボタンで提供する分析を追跡することはできません。