Не отображаются лайки при использовании 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>
Теперь все работает корректно. Как я и обещал, ничего сложного.
Отправка формы без перезагрузки страницы
Часто возникает необходимость отправки формы без перезагрузки страницы. В этом случае на помощь приходит технология ajax и фреймворк jQuery.
Например имеем форму следующего вида:
<form method="" name="osForm" action="" id="osForm"> <input class="osForm_input" tabindex="1" id="name" name="name" type="text" value="*Ваше имя" /> <input class="osForm_input" tabindex="2" id="email" name="email" type="text" value="*Ваш email" /> <input class="osForm_input" tabindex="3" id="address" name="address" type="text" value="*Адрес доставки (индекс,область,город,улица,дом,квартира)" /> <input class="osForm_btn" tabindex="4" type="submit" name="sndbtn" value="Отправить" /> </form>
Чтобы отправить эту форму без перезагрузки страницы, используем javascript:
$('#osForm').submit(function(e){
e.preventDefault();
$.ajax({
url: "sendOrderForm.php",
type: "POST",
data: $('#osForm').serialize(),
success: function(response) {
//обработка успешной отправки
},
error: function(response) {
//обработка ошибок при отправке
}
});
});
sendOrderForm.php — файл, который обрабатывает пересылаемые формой данные. Например он может быть таким:
if (isset($_POST['username'])){
$name = $_POST['username'];
$contacts = $_POST['contacts'];
$message = $_POST['message'];
$from = 'no-reply@yandex.ru';
$mailTo='mail@yandex.ru';
$headers = "From: Иван Петров <$from>\nReply-To: $from\n";
$headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
$message="
<h1>Сообщение с сайта</h1>
<p>Имя: $name</p>
<p>Контакты: $contacts</p>
<p>Сообщение: $message</p>
";
wp_mail($mailTo,"Форма обратной связи",$message,$headers);
}