Как вернуть счетчик Twitter в Social Likes
Social Likes — это красивые кнопки «лайков» со счётчиками в едином стиле для социальных сетей: Facebook, Twitter, Вконтакте, Одноклассники, Мой мир, Google+ и Pinterest от Артёма Сапегина.
Но, к сожалению, с версии 3.0.15 счётчик Twitter был полностью отключен в плагине по причине того, что соцсеть официально умертвила данный endpoint с 20 ноября 2015 года в связи с вводом нового дизайна своих кнопок.
Но, к счастью, есть один способ, чтобы вернуть счетчик на место, воспользовавшись внешним сервисом OpenShareCount.
Как починить
Для начала необходимо войти на сайт OpenShareCount, используя любой (личный или вновь созданный) аккаунт Twitter, чтобы привязать свой сайт (домен).
Лично я завел новый аккаунт, чтобы не палить свою основную учетную запись, так как сервис зарашивает разрешение на изменение моего профиля и публикацию твиттов от моего имени.
Будьте внимательны: к одному аккаунту OpenShareCount можно привязать только один сайт.
Так как мой сайт использует WordPress, то и допиливать Social Likes мы будем под него.
Артём в своём плагине позаботился о разработчиках, за что ему отдельное спасибо. Social Likes можно расширять и дополнять, добавляя свои кнопки и счётчики.
Этим мы и воспользуемся, добавив свою кнопку со счётчиком OpenShareCount, для чего определим в коде переменную var = socialLikesButtons, которую подхватит плагин и сделает за нас всю чёрную работу.
Вставим объект в <head> вашего сайта и скопипастим стили от кнопки Twitter:
function kobzarev_wp_head() { ?>
<style>
.social-likes__widget_opensharecount {
background: #24aadd;
color: #fff;
}
.social-likes__icon_opensharecount:before {
content: '\f108';
}
</style>
<script>
var socialLikesButtons = {
// Название провайдера
opensharecount: {
// URL json-счетчика
counterUrl: 'https://opensharecount.com/count.json?url={url}&callback=?',
// URL для шеринга
popupUrl: 'https://twittеr.com/intent/tweet?url={url}&text={title}',
// Ширина окна
popupWidth: 600,
// Высота окна
popupHeight: 250,
// Функция парсинга json
convertNumber: function( data ) {
return data.count;
},
// Функция форматирования твитта
click: function() {
if (!/[.?:-–—]s*$/.test(this.options.title)) this.options.title += ':';
return true;
}
}
};
</script><?php
}
add_action( 'wp_head', 'kobzarev_wp_head' );
Возникает резонный вопрос, почему я не воспользовался для вставки переменной функцией wp_localize_script(), отвечаю сразу: эта функция в своих недрах вызывает нативную json_encode(), которая заэскейпит весь объект, включая convertNumber. Как от этого избавиться — я не нашел.
Как использовать
Чтобы использовать нашу новую кнопку достаточно добавить новую ссылку в блок social-likes с остальными шерами:
<div class="social-likes"> <div class="vkontakte">Поделиться</div> <div class="opensharecount" data-via="mihdan">Твитнуть</div> <div class="facebook">Нравится</div> <div class="plusone">Плюсануть</div> </div>
Живой пример можете увидеть прямо под этой статьей — кнопка «Твитнуть».
Обновление от 17.02.2016 в 15:00
Как правильно подметил Артём в твиттере, нет особой необходимости создавать полностью новую кнопку, можно переопределить поведение дефолтной твиттеровской. Нам достаточно изменить свойства counterUrl и convertNumber.
@mihdan Тогда можно будет переопределить только counterUrl и convertNumber.
— Artem Sapegin (@sapegin) 17 февраля 2016
Наш код сразу упроститься до нескольких строк и отпадет надобность копипастить стили и остальные свойства для нашей кнопки.
В итоге получаем следующий рабочий код:
function kobzarev_wp_head() { ?>
<script>
var socialLikesButtons = {
// Название провайдера
twitter: {
// URL json-счетчика
counterUrl: 'https://opensharecount.com/count.json?url={url}&callback=?',
// Функция парсинга json
convertNumber: function( data ) {
return data.count;
}
}
};
</script><?php
}
add_action( 'wp_head', 'kobzarev_wp_head' );
Спасибо, протестировал второй вариант с вызовом функции, все работает отлично, хотя и показывает не совсем точное число твитов.
Не за что) Число не совсем точное из-за кеширования в самом сервисе, он запускает свой крон с небольшой задержкой, не в режмие реального времени, так написано у них в хелпе
> OpenShareCount can periodically do the search for you and it will keep track of the number of old search results so the count stays up-to-date over time.
> The Twitter API limits the number of searches that can be done in a set time period on behalf of individual users.
В вашем случае (https://twitter.com/vasilenkolife) счетчик отличается на единицу (3173 в профиле твиттера против 3172 на счетчике)