I like vs like
Now it has become quite popular to integrate social services on sites. I think everyone has seen the social buttons tweet , like , Plus One and many others. Today I went to Ubuntu.com and saw the following picture. 
. This was the last straw and I decided to write this article to help those who did not find the time to figure out the question. As you can see, the browser defined the localization as ru_Ru and in accordance with this, on the facebook button, replaced the signature “like” with “I like” . Of course, I am grateful for such care, but as can be seen in the picture - it adversely affects the appearance and functionality. As a result, I do not have the opportunity to see the counter itself, which displays the number of likes. The problem is global in nature, as I have met more than once, and it always looks at least not aesthetically pleasing.
The problem is that initially when generating a button code using facebook, it’s not possible to choose localization. To solve this problem, I see two options:
In my opinion, the second solution is better, as the button with the signature like looks neat and quite intuitive. And at the same time less energy is spent on layout and design. To implement the signature in English, I immediately turned to the plug-in documentation on facebook . The documentation describes two options for setting the localization for the plugin - this is passing the locale parameter to the IFRAME or specifying localization in the script when using XFBML markup, approximately it looks like this:
When we generate the button code for HTML5 , we get the following code:
In the line
This could be finished. But they often use plug-ins, which present the possibility of hosting several social services. For example AddThis and ShareThis . I will tell how I solved this problem for AddThis , I think for ShareThis it will be a similar solution.
To add the AddThis service with the facebook button, we generate and get the following code:
All that is needed in order to make our facebook English, you need to pass a localization parameter for it. Referring to the documentation of the AddThis plugin, I found out that passing a parameter is quite easy, for this
I will immediately answer the question of why not initially using an IFRAME , if AddThis still generates the same IFRAME . It's very simple if we do not use AddThis tags to get the button, then we will not be able to track the analytics that AddThis provides via this button, and the code for the button via the AddThis plugin is more readable than directly generated by IFRAME .
. This was the last straw and I decided to write this article to help those who did not find the time to figure out the question. As you can see, the browser defined the localization as ru_Ru and in accordance with this, on the facebook button, replaced the signature “like” with “I like” . Of course, I am grateful for such care, but as can be seen in the picture - it adversely affects the appearance and functionality. As a result, I do not have the opportunity to see the counter itself, which displays the number of likes. The problem is global in nature, as I have met more than once, and it always looks at least not aesthetically pleasing.The problem is that initially when generating a button code using facebook, it’s not possible to choose localization. To solve this problem, I see two options:
- Take into account in the design and layout that the block will have different sizes when displaying the signature in different languages
- Force the localization of en_US and always contemplate the signature like
In my opinion, the second solution is better, as the button with the signature like looks neat and quite intuitive. And at the same time less energy is spent on layout and design. To implement the signature in English, I immediately turned to the plug-in documentation on facebook . The documentation describes two options for setting the localization for the plugin - this is passing the locale parameter to the IFRAME or specifying localization in the script when using XFBML markup, approximately it looks like this:
'//connect.facebook.net/en_US/all.js'; for XFBML . And src="http://www.facebook.com/plugins/like.php?locale=en_US&..." for the IFRAME . It's all very simple. But what to do, you need to use another option. For example, if we want to insert a button code using HTML5When we generate the button code for HTML5 , we get the following code:
< 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> In the line
js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; it can be seen that the code that was generated on the facebook site already has localization ru_RU . Replace with en_US and get a neat button with a signature like .This could be finished. But they often use plug-ins, which present the possibility of hosting several social services. For example AddThis and ShareThis . I will tell how I solved this problem for AddThis , I think for ShareThis it will be a similar solution.
To add the AddThis service with the facebook button, we generate and get the following code:
<!-- 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 -->
All that is needed in order to make our facebook English, you need to pass a localization parameter for it. Referring to the documentation of the AddThis plugin, I found out that passing a parameter is quite easy, for this
a class="addthis_button_facebook_like" add the fb:like: attribute to the tag a class="addthis_button_facebook_like" fb:like: < > fb:like: < > . And the attribute name can be found in the documentation directly to the facebook plugin on their website. Outwardly, everything is very easy to follow the necessary attribute to the facebook site and successfully find it there. Surprisingly in the description of the attributes there is no need. For some reason, the developers did not consider it necessary to specify the attribute for the choice of localization separately, but let it be on their conscience. And so, after some thought, I decided to try to specify the following fb:like:locale="en_US" attribute fb:like:locale="en_US" . As a result, this not obvious opportunity helped. Now the AddThis script in the IFRAME for the facebook button will be passed to the desired parameter, and the button will become English.I will immediately answer the question of why not initially using an IFRAME , if AddThis still generates the same IFRAME . It's very simple if we do not use AddThis tags to get the button, then we will not be able to track the analytics that AddThis provides via this button, and the code for the button via the AddThis plugin is more readable than directly generated by IFRAME .
')
Source: https://habr.com/ru/post/138587/
All Articles