🐥 💮 ⬅️ 好きvs好き 🆔 👇 👩🏻‍🍳

現在、サイトにソーシャルサービスを統合することは非常に人気があります。 プラスワン など、ソーシャルボタンがつぶやくのを見たと思います。今日、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サービスを追加するには、次のコードを生成して取得します。

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

<!-- 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がこのボタンで提供する分析を追跡することはできません。

好きvs好き

More articles: