лайки

Не отображаются лайки при использовании ajax

Тем кто понимает проблему и хочет по-быстрому ее решить, советую перейти к части как решить?. Остальным немного лирики.

Практически на всех проектах мы используем стандартный набор социальных кнопок: vk-like, facebook-like, g+, tweet. И код для всего это тоже используется стандартный.

Добавляется в head вот такой код

<!-- G+ -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<!-- FB -->
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?34"></script>

<!-- VK -->
<script type="text/javascript">
	VK.init({apiId: your_API_ID, onlyWidgets: true});
</script>

А в место? где надо отобразить социальные кнопки, вставляется примерно такой код:

<div class="b_likes">
	<div class="like_itm">
	<?php 
	$pageURL = get_permalink();
	echo '<iframe src="http://www.facebook.com/plugins/like.php?href='.$pageURL.
	'&send=false&layout=button_count&width=110&show_faces=true&action=like
	&colorscheme=light&font&height=21" scrolling="no" frameborder="0" 
	style="border:none; overflow:hidden; width:140px; height:21px;" 
	allowTransparency="true"></iframe>';
	?>
	</div>
	<div class="like_itm"><a href="http://twitter.com/share" 
		class="twitter-share-button" data-count="horizontal">Tweet</a>
		<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
		</script>
	</div>
								
	<divclass="like_itm">
	<g:plusone size="medium"></g:plusone></div>
		
	<divclass="like_itm">
		<div id="vk_like-<?php the_ID(); ?>"></div>
		<script type="text/javascript">
		VK.Widgets.Like(
			"vk_like-<?php the_ID(); ?>"
			, {type: "button"}
			, <?php the_ID(); ?> 
		);
		</script>
	</div>
</div>

Как дошли до жизни такой

Последние веяния интернет технологий говорят нам, что ajax очень круто и для пользователей крайне необходимо. С этим можно согласить или не согласиться, но необратить на эту штуку внимания нельзя. Поскольку sawtech прогрессивная контора, то и нас не миновала чаша сия. И вот мы сделали ajax-подгрузку постов в одном из проектов. Чтобы конечный продукт хорошо продвигался добавили сразу же для каждой записи социальные кнопки и обнаружили, что по какой-то причине не все лайки, загружаемые с помощью axaj хотят отображаться корректно.

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

Как решить?

А решается не сложнее начальной инициации. Для всех кнопок существуют методы повтороной инициации. Для этого надо добавить небольшое кусочки кода рядом с кодом самой кнопки.

<!-- Для твиттера -->
<script type="text/javascript">
	!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],
		p=/^http:/.test(d.location)?'http':'https';
		if(!d.getElementById(id)){js=d.createElement(s);
			js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
			fjs.parentNode.insertBefore(js,fjs);}}
			(document, 'script', 'twitter-wjs');
	twttr.widgets.load();
</script>

<!-- Для G+ -->
<script type="text/javascript">gapi.plusone.go();</script>

<!-- Для FB, если используете XFBML вариант -->
<script type="text/javascript">FB.XFBML.parse();</script>

Я использую iframe загрузку fk-like, поэтому у меня все было нормально с fb изначально, а контакт сам шарит и все обрабатывает без дополнительных тычков.

В итоге, лично я получил вот такой код:

<div class="b_likes">
	<?php $like_url = urlencode( get_permalink() ); ?>
	
	<div class="like_itm">
		<?php 
		$pageURL = get_permalink();
		echo '<iframe src="http://www.facebook.com/plugins/like.php?href='.$pageURL.
		'&send=false&layout=button_count&width=110&show_faces=true&action=like
		&colorscheme=light&font&height=21" scrolling="no" frameborder="0" 
		style="border:none; overflow:hidden; width:140px; height:21px;" 
		allowTransparency="true"></iframe>';
		?>
	</div>

	<div class="like_itm">
		<a href="https://twitter.com/share" class="twitter-share-button" 
		data-url="<?php echo $like_url; ?>" data-text="<?php the_title(); ?> 
		<?php the_permalink(); ?> ">Tweet</a>
		<script type="text/javascript">
			!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],
				p=/^http:/.test(d.location)?'http':'https';
				if(!d.getElementById(id)){js=d.createElement(s);
					js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
					fjs.parentNode.insertBefore(js,fjs);}}
					(document, 'script', 'twitter-wjs');
			twttr.widgets.load();
		</script>
	</div>
									
	<div class="like_itm">
		<div class="g-plusone" data-size="medium" 
		data-href="<?php echo $like_url; ?>"></div>
		<script type="text/javascript">gapi.plusone.go();</script>
	</div>
	
			
	<div class="like_itm">
		<div id="vk_like-<?php the_ID(); ?>"></div>
		<script type="text/javascript">
			VK.Widgets.Like("vk_like-<?php the_ID(); ?>", {
				type: "button"
				, pageUrl: '<?php echo $like_url; ?>'
			}, <?php the_ID(); ?> );
		</script>
	</div>
</div>

Теперь все работает корректно. Как я и обещал, ничего сложного.

Подсчет количества лайков средствами php

В дополнении к голосованию через соц. сети хочу поделиться кодом получения количества лайков с помощью php кода, а не javasript.

Кто не желает читать методы поиска, прошу в самый конец поста, там я выложил код целиком и ссылку на файл. По тексту будет мало кода по причине местного парсера, который пожрет половину кавычек.

А нафига оно мне?

Ответ прост. На всех сайтах где требуются лайки в принципе, мы добавляем 4 социальных сети: facebook (fb), vkontakte (vk), google+ (g+) и twitter (tw). Вариант на js может получать количество всех лайков кроме G+, нехитрый запрос в гугле (Иногда задумываюсь: чтобы мы без него делали? На книжках бы разорились!) дает ссылку на некий ресурс, откуда мы почерпнем необходимые знания, но к сожалению этот вариант вовсе не для js. Дальнейшее гугление ничего не дает и принимается волевое решение: к черту js! давай на php. (в дальнейшем в этой связи были свои разочарования, которые мы с успехом преодолели).

Copy-Past и немного фантазии

Честно сказать как работает код получения g+ лайков, я не сильно и разбирался. Скопировал, вставил в файл php, поправил на свои параметры — все работает, значит, пользуемся на здоровье. Я пытался найти официальную документацию по поводу этого кода, но у меня ничего не получилось, наверное, я просто не старался. Ниже код, который я взял с указанного ресурса.

	function get_plusones($url) {
		$curl = curl_init();
		curl_setopt($curl, CURLOPT_URL, "https://clients6.google.com/rpc");
		curl_setopt($curl, CURLOPT_POST, 1);
		curl_setopt($curl, CURLOPT_POSTFIELDS, '[{
			"method":"pos.plusones.get",
			"id":"p",
			"params":{
				"nolog":true,
				"id":"' . $url . '"
				,"source":"widget",
				"userId":"@viewer",
				"groupId":"@self"
			},
			"jsonrpc":"2.0",
			"key":"p",
			"apiVersion":"v1"
		}]');
		curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
		curl_setopt($curl, CURLOPT_HTTPHEADER, 
			array('Content-type: application/json'));
		$curl_results = curl_exec ($curl);
		curl_close ($curl);

		$json = json_decode($curl_results, true);

		return intval( $json[0]['result']['metadata']['globalCounts']['count'] );
	}

Так вот. Дергать весь остальной код оттуда, я посчитал излишним, мы и сами с усами. Получить контент документа функцией file_get_contents() мы давно умеем, а если не умеем, то читаем документацию, а дальше все аналогично js за исключением разбора json, в php это делается явным образом через json_decode(). Первым сюрпризом для меня было, что fb отдает данные не в json (а может надо было указать формат выдачи в запросе???), а в xml. Но это мы быстро победили. Все остальное было просто забрал json, вытащил нужную инфу и вот. Ну в общем все тут понятно. должно быть. Наверное. Ниже есть место для комментов ежели что.

«Гооооооооооооол! **й штанга…»

Ну что все круто. Погоняли, потестили на рабочем серваке (для справки, мы используем хостинг timeweb). Потащили код к клиенту. (nic.ru) Залили и началось. Сначала выяснилось что curl у него не включен. Фигня, в настройках хостинга включаем как опцию, ладно хоть бесплатно. А потом вообще лажа какая-то ругается на file_get_contents() разными словами. Я его и так и сяк, но время поджимало и решил сделать вообще все через curl, дешево и сердито. Главное, клиент доволен.

Разбор полетов

Как было выяснено в дальнейшем вся лажа была в том, что при получении содержимого через file_get_contents() и если в url используется протокол https, то все «тушите свет» и «крокодил до свидания», скорее всего не включен модуль php openssl. Как это лечить на конкретно взятом хостинге я не могу сказать, не искал, технически достаточно использовать незащищенный протокол http. Стремно, а что делать?! В приложении код через curl.

Все соц сети окромя VK работают по url страницы, для VK нужен уникальный id записи или еще чего-то. Ваша фантазия тут будет уместна.

Код подсчета количества лаков fb.

	function get_fb_likes($url) {
		$curl = curl_init();
		$url = 'http://api.facebook.com/restserver.php?method=links.getStats
		&amp;format=json&amp;urls='.$url;
		curl_setopt($curl, CURLOPT_URL, $url);
		curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
		$curl_results = curl_exec ($curl);
		curl_close($curl);

		// разбор в json
		$res = json_decode($curl_results);

		return $res[0]->like_count;
	};

Код подсчета количества лаков vk. (Не забудьте сменить YOUR_ID на контактовский id сайта)

	function get_vk_likes($id) {
		$curl = curl_init();
		$url = 'https://api.vkontakte.ru/method/likes.getList?type=sitepage
		&amp;owner_id=YOUR_ID&amp;format=json&amp;item_id='.$id;
		curl_setopt($curl, CURLOPT_URL, $url);
		curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
		$curl_results = curl_exec ($curl);
		curl_close($curl);

		// разбор в json
		$res = json_decode($curl_results);

		return intval($res->response->count);
	};

Код подсчета количества лаков twitter.

	function get_twitt_likes($url) {
		$curl = curl_init();
		$url = 'http://urls.api.twitter.com/1/urls/count.json?url=' . $url;
		curl_setopt($curl, CURLOPT_URL, $url);
		curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
		$curl_results = curl_exec ($curl);
		curl_close($curl);

		// разбор в json
		$res = json_decode($curl_results);

		return intval( $res->count );
	};

Не забываем создать id для сайта в vk. В приложенных файлах есть код как подключить и вывести сами кнопки лайков.

скачать файл