Как вернуть счетчик 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.

Наш код сразу упроститься до нескольких строк и отпадет надобность копипастить стили и остальные свойства для нашей кнопки.

В итоге получаем следующий рабочий код:


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' );

Источник: https://www.kobzarev.com/programming/social-likes-twitter-counter/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: