Веб-дизайн / [Из песочницы] Мне нравится vs like

Сейчас стало довольно популярно интегрировать на сайты социальные сервисы. Я думаю все видели социальные кнопки tweet, like, Plus One и множество других. Сегодня зашел на сайт Ubuntu.com и увидел следующую картину . Это стало последней каплей и я решил написать данную статью, что бы помочь тем кто не нашел времени разобраться в вопросе. Как можно заметить браузер определил локализацию как ru_Ru и в соответствии с этим заменил на кнопке facebook подпись «like» на «мне нравится». Я конечно благодарен за такую заботу, но как видно на картинке — это отрицательно сказывается на внешнем виде и функционале. Как следствие у меня нет возможности увидеть сам счетчик на котором отображается количество лайкнувших. Проблема носит глобальный характер так, как я такое встречал не один раз, и всегда это выглядит по крайней мере не эстетично.

Проблема состоит в том, что изначально при генерации кода кнопки средствами facebook нет возможности выбрать локализацию. Для решения этой проблемы я вижу два варианта:

• Учитывать в дизайне и верстке то, что блок будет иметь различные размеры при отображении подписи на разных языках
• Принудительно установить локализацию en_US и всегда созерцать подпись like

На мой взгляд второе решение лучше так, как кнопка с подписью like выглядит аккуратно и вполне интуитивно. И при этом тратится меньше сил на верстку и дизайн. Что бы реализовать подпись на английском, сразу обратился к документации плагина на facebook. В документации описано два варианта установки локализации для плагина — это передача параметра locale в 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 и получаем аккуратную кнопку с подписью like.
На этом можно было и закончить. Но часто используют плагины, которые представляют возможность размещения нескольких социальных сервисов. Например AddThis и ShareThis. Я раскажу как я решил эту проблему для AddThis, думаю для ShareThis будет аналогичным решением.
Для добавления сервиса AddThis с кнопкой facebook мы генерируем и получаем следующий код:

 <!-- 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, узнал что передать параметр довольно легко, для этого в тег a class="addthis_button_facebook_like" добавляем атрибут fb:like:<имя атрибута>. А имя атрибута можно найти в документации непосредственно к плагину facebook на их сайте. Внешне все очень просто идем за нужным атрибутом на сайт facebook и успешно его там не находим. Удивительно в описании атрибутов нет нужного. Почему то разработчики не посчитали нужным отдельно указать атрибут для выбора локализации, но пусть это будет на их совести. И так, немного подумав я решил попробовать указать следующий атрибут fb:like:locale="en_US". В результате, эта не очевидная возможность помогла. Теперь скрипт AddThis в IFRAME для кнопки facebook будет передан нужный параметр, и кнопка станет английской.
Сразу отвечу на вопрос почему не использовать изначально IFRAME, если все равно AddThis генерирует тот же самый IFRAME. Все очень просто если мы не будем использовать теги AddThis для получения кнопки, то мы не сможем отслеживать аналитику которую предоставляет AddThis по этой кнопке, ну и код для кнопки через плагин AddThis более читабельный чем непосредственно с генерированный IFRAME.

Автор: CrazyMath