Как добавить кнопки социальных сервисов на свой блог

Сайт дня (как попасть): SEO копирайтинг - наше слово, ваша прибыль!

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

Наверняка вы заметили, что в последнее время многие социальные сервисы (Google Buzz, Вконтакте, Мой Мир и т.д.) ввели свои кнопки, чтобы пользователи могли делиться интересными материалами.

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

Еще одной причиной является то, что большинство сервисов социальных закладок попали под фильтр яндекса, в результате чего у большинства из них в индексе осталось либо несколько страниц, либо 0. В свое время сервисы закладок были очень эффективны, но, к сожалению, сейчас эффект от них намного снизился.

Для чего нужны кнопки социальных сервисов в конце статей? Ответ прост - чтобы дать возможность вашим посетителям делиться понравившимися материалами вашего сайта в социальных сервисах. Это позволит не только бесплатно получать внешние ссылки на ваш ресурс, но и дополнительных посетителей. Посмотрите на англоязычный интернет - там продвижение в социальных сервисах давно стало неотъемлемой частью развития сайта и увеличения посещаемости.

Итак, решено ставить кнопки социалок. Каждый сервис предоставляет готовые коды скриптов. Но использование скриптов имеет два ощутимых минуса.

1. Чем больше скриптов на странице - тем медленнее она загружается. Бывают случаи, когда какой-либо скрипт подтормаживает, что еще больше затягивает скорость загрузки страницы.

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

2. К сожалению, у социальных сервисов нет стандарта в размерах кнопок (хотя бы по высоте). Если вы добавите несколько кнопок в виде кодов стандартных скриптов, то увидите, что выглядят они аляповато - одни выше, другие ниже, одни пухленькие, другие тощие 🙂 . Меня, как свободного художника, это очень и очень огорчает.

Одним из плюсов скриптов является то, что можно сделать отображение счетчика добавления материала в тот или иной сервис, но я думаю, в этом особой необходимости нет. Мне хватает кнопки в начале постов с количеством ретвитов. Чтобы поставить такую кнопку, почитайте пост 6 сервисов кнопок retweet.

Пару недель назад я стал созревать для того, чтобы усовершенствовать участок с кнопками в конце постов на Shakin.ru. Предпочитаю делать такие вещи на вдохновении. До «рестайлинга» нижняя часть всех статей блога выглядела вот так:

До рестайлинга нижняя часть всех статей блога выглядела вот так

В прошедшую субботу ко мне пришло Ее Величество Вдохновение. Причем пришло рано утром, на два часа раньше того времени, когда я обычно просыпаюсь - в 8 утра (при этом я лег спать в 3 ночи, так как увлекся работой по продвижению одного англоязычного сайта). Это вдохновение было именно для создания кнопок добавления в социальные сервисы.Звучит маниакально, но я проснулся с горящими глазами и страстным желанием сделать красивые и удобные кнопки 🙂 . Через четыре часа работы все было готово. После генеральной приборки этот хаос стал выглядеть вот так:

🔥 Кстати! Я провожу платный курс по продвижению англоязычных сайтов SEO Шаолинь. Следующий поток стартует 13 февраля 2023. Если интересует, можете подать заявку на его сайте seoshaolin.com. Для своих читателей делаю хорошую скидку.

Приглашаю вас подписаться на мои каналы в Telegram:

@shakinru - продвижение в рунете.
@burzhunet - англоязычное SEO.

Также приглашаю вас подписаться на мои группы в ВК:

SEO в рунете
Англоязычное SEO

После генеральной приборки этот хаос стал выглядеть вот так

Кнопки добавления в социальные сервисы мне пришлось обтачивать ~~напильником~~ в Фотошопе - они не совпадали по высоте, а некоторых и не было (пришлось рисовать кнопку Твиттера, Вконтакте и ЖЖ на основе их логотипов). Кнопку Google Buzz тоже пришлось переделать, так как четырехцветный овал находился справа от кнопки, что мне не подходило.

Я пришел к выводу, что высота кнопок должна быть 18 пикселей. Вы можете использовать мои кнопки либо нарисовать свои, загрузив их на свой хостинг. Если у вас блог WordPress, то загрузите картинки с кнопками в папку wp-content/themes/ваша_тема/images.

Теперь дело осталось за малым - сделать так, чтобы при нажатии на кнопку осуществлялось добавление вашего материала в тот или иной социальный сервис. Приведу готовые примеры кодов со своего блога. Для открытия php файлов используйте стандартный блокнот (или продвинутый блокнот, например, Notepad++).

Эти коды добавляются в файле single.php (в некоторых темах его нет, тогда используйте файл index.php) в папке с темой вашего блога wp-content/themes/ваша_тема/ после этого участка:

<?php the_content(''); ?>

Cсылку @shakinru в коде кнопки Твиттера замените на свою.

Кнопка добавления в Twitter:

<noindex><a rel="nofollow" target="_blank" href="https://twitter.com/intent/tweet?text=RT @shakinru <?php the_title(); ?>: <?php the_permalink(); ?>" title="Добавить в Twitter"><img src="<?php bloginfo('template_url'); ?>/images/twitter.gif" alt="Опубликовать в twitter.com" width="78" height="18"></a></noindex>

Кнопка добавления в ВКонтакте:

<noindex><a href="https://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/images/vkontakte.gif" width="84" height="18" title="Поделиться ВКонтакте"></a></noindex>

Кнопка добавления в Facebook:

<noindex><a rel="nofollow" target="blank" href="https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/facebook.gif" width="73" height="18" title="Поделиться в Facebook"></a></noindex>

Кнопка добавления в Google Buzz:

<noindex><a href="https://www.google.com/reader/link?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&srcURL=https://shakin.ru/" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/google-buzz-compact.gif" width="73" height="18" title="Добавить в Google Buzz"></a></noindex>

Кнопка добавления в Мой Мир:

<noindex><a target="_blank" rel="nofollow" href="https://connect.mail.ru/share?share_url=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/moi-mir.gif" width="86" height="18" title="Поделиться В Моем Мире"></a></noindex>

Кнопка добавления в Livejournal:

<noindex><a rel="nofollow" href="https://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" target="_blank" title="Опубликовать в своем блоге livejournal.com"><img src="<?php bloginfo('template_url'); ?>/images/livejournal.gif" alt="Опубликовать в своем блоге livejournal.com" width="73" height="18"></a></noindex>

Данные коды кнопок лучше добавлять так:

<div class="buttons">
коды кнопок
</div>

Это позволит легко задать нужный стиль оформления всему блоку с кнопками через файл стилей style.css.

Красота! Кнопки добавления в социальные сервисы готовы. Но для максимального эффекта мало дать возможность читателям добавлять ваши материалы, нужно дать ссылки на ваши профили в этих сервисах, чтобы ваши посетители при желании могли легко к вам присоединиться. Это увеличит активную аудиторию ваших читателей.

Поэтому добавим кнопки на свои профили в социальных сервисах. Идем в Google, набираем запрос «social icons» и скачиваем понравившийся набор иконок социальных сервисов.

Так как понравившиеся мне наборы не содержали иконок ВКонтакте и ЖЖ, то я сделал их в Фотошопе на основе других иконок и логотипов этих сервисов. Когда будете искать нужные логотипы, то советую искать их в формате PNG - у этого формата отличная поддержка прозрачности, что избавит вас от чистки логотипа от фона. Для поиска логотипов в формате PNG наберите запрос вида «livejournal logo png» в Google Картинках.

Затем загружаем иконки в папку wp-content/themes/ваша_тема/images. Я выбрал иконки размером 32х32 пикселя.

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

<div class="buttons">

Приглашаю присоединиться ко мне в следующих сервисах:<br>

<noindex><a href="https://twitter.com/shakinru" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/twitter-32.png" title="Присоединиться в Твиттере" width="32" height="32"></a></noindex>

<noindex><a href="https://vkontakte.ru/id80770238" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/vkontakte-32.png" title="Присоединиться ВКонтакте" width="32" height="32"></a></noindex>

<noindex><a href="https://www.facebook.com/profile.php?id=100000550459738" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/facebook-32.png" title="Присоединиться в Facebook" width="32" height="32"></a></noindex>

<noindex><a href="https://www.google.com/profiles/116781296520179206529" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/google-buzz-32.png" title="Присоединиться в Google Buzz" width="32" height="32"></a></noindex>

<noindex><a href="https://friendfeed.com/shakinru" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/friendfeed-32.png" title="Присоединиться во FriendFeed" width="32" height="32"></a></noindex>

<noindex><a href="https://shakinru.livejournal.com/" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/livejournal-32.png" title="Присоединиться в Livejournal" width="32" height="32"></a></noindex>

</div>

По аналогии добавить такие кнопки можно и на другие движки, только нужно узнать, какой код выводит адрес страницы (как в WordPress - <?php the_permalink(); ?>).

Приглашаю вас присоединиться ко мне в социальных сервисах:

Желаю Вам хорошего и плодотворного дня!

Глобатор

Постовой (как попасть): Психологические тесты для детей.

Любителям графики пригодятся кисти Photoshop.

Оригинальный фотоблог урбаниста.