Постоянные читатели наверное заметили, что я наконец-то обзавелся самыми распространенными социальными кнопочками. (Пощелкайте их кстати 🙂 )
Я поставил фейсбук, контакт, твиттер и гугл плюс.
Прикручивание этих кнопок было не самым простым делом. Ведь надо было не только найти код, но и аккуратненько вставить, чтобы выравнять аккуратненько, да и контакт все время норовил выбиться в отдельную строку.
Однако справился, и сейчас могу ставить эти кнопочки на любой вордпресс сайт менее чем за пять минут.
Одно уточнение, я ставлю кнопки так, чтобы они отображались только в записях. Что в 95% случаев как-раз то, что нужно.
Итак:
Первым делом нам надо зарегаться вконтакте. Это единственная система требующая регистрацию.
Для этого идем на vk.com/developers.php?oid=-1&p=Like
Вбиваем адрес и название, обязательно щелкаем кнопку сохранить. После этого, в нижнем поле с кодом, вместо «API_ID» будет числовое значение, которое нам нужно.
Копируйте, чуть позже мы вставим его в код.
Переходим к самому коду. В шаблонах WP бывает по разному. Где-то есть файл single.php, где-то все делается через index.php. Если есть сингл то будем редактировать его, если нет, то редактируем индекс.
Итак в нашем файле ищем строку с функцией the_content(); иногда в скобках бывает текст, для нас непринципиально.
Сверху от этой функции вставляем:
<?php if ( is_single()){?>
<div style="float: right; text-align: center; margin-left: 10px;">
<p>
<a rel="nofollow" href="http://twitter.com/share?counturl=<?php the_permalink(); ?>" class="twitter-share-button" data-count="vertical" data-via=""></a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</p>
<p>
<g:plusone size="tall"></g:plusone>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</p>
</div>
<? } ?>
Тут мы делаем кнопку твиттера и гугл плюса справа сверху. Как у меня.
А под той функцией ставим код:
<?php if ( is_single()){?>
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?48"></script>
<script type="text/javascript">
VK.init({apiId: API_ID, onlyWidgets: true});
</script>
<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>
<div style=" position:relative; height: 22px; margin:0 auto; width:340px; margin-bottom: 5px; ">
<div style="float: left;">
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button"});
</script>
</div>
<div style="float: right;">
<fb:like href="<?php the_permalink(); ?>" layout="button_count" show_faces="false" font="arial"></fb:like>
</div>
</div>
<?}?>
Заменяем API_ID на код полученный от контакта
И в общем-то все.
Теперь объяснения:
—первая и последняя строка в обоих кусах «<?php if ( is_single()){?>» и «<?}?>» задает выполнение кода при условии, что открыта запись, а не рубрика, архив или тег. То есть если у вас single.php, то скорее всего можно и без этих строк.
— код «<?php the_permalink(); ?>» в твиттере и фейсбуке нужен для того, чтобы определить адрес страницы, чтобы было, что передавать.
Самое сложное для меня было разобраться с стилями. Я с css вообще очень мало работаю…
В общем верхний блок поставил справа и с внутренним выравниванием по центру, чтобы гугловская кнопка ровно под твиттерской сидела.
В нижнем блоке сначала хотел расставить кнопки по краям, но на широких шаблонах слишком много места пустого остается, поэтому я сделал контейнер шириной 340 разместил его по центру, а уже в нем раздвинул кнопки по краям. На моем белом фоне смотрится все равно не очень, но в шаблонах с четкими границами записи — удовлетворительно.
Вот такие социальные кнопки без плагинов за пять минут.
Вообще же плагины для того и пишут, чтобы не лазить в код и не лезть заново при смене шаблона. :))
Но считается, что плагины создают лишнюю нагрузку, и поэтому кому-то будет предпочтительней голый код.
Однако если будут желающие, то попробую написать, там несложно.
И раз уж заикнулся о css, то вот тут ссылочка с примерами css3, глядя на которые, понимаю, что мои жалкие потуги в выравнивании кнопочек и рядом не стояли. ^^ Дизайн это все же не мое, хотя, конечно, было бы круто уметь так же клепать.
Автор: Elsper.ru
я и на главной оставляю и добавляю все коды через виджет текстовый
но иногда и в sidebar.php
иногда и в single.php
по-разному в общем
Согласен насчет плагинов. А еще они меня раздражают тем, что не всегда понятно что там надо делать.
а на тильде можно так сделать? какие изменения надо внести в код?
Амикта, с тильдой не работал