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

#probizblog #создание_сайтов #landing_page #лендинг #landing #посадочнаястраница #landingpage #сайтвизитка #разработкасайтов #продвижениесайтов #smm #seo #web #blog #bestsitecreate #coolsite
Наверняка вы заметили, что в последнее время многие социальные сервисы (Google Buzz, Вконтакте, Мой Мир и т.д.) ввели свои кнопки, чтобы пользователи могли делиться интересными материалами.
На мой взгляд, сейчас в рунете происходит переход от кнопок социальных закладок на кнопки социальных сервисов. Причины этого – социальные сервисы намного более перспективны в плане посещаемости, там огромный потенциал трафика.
Еще одной причиной является то, что большинство сервисов социальных закладок попали под фильтр яндекса, в результате чего у большинства из них в индексе осталось либо несколько страниц, либо 0. В свое время сервисы закладок были очень эффективны, но, к сожалению, сейчас эффект от них намного снизился.
Для чего нужны кнопки социальных сервисов в конце статей? Ответ прост – чтобы дать возможность вашим посетителям делиться понравившимися материалами вашего сайта в социальных сервисах. Это позволит не только бесплатно получать внешние ссылки на ваш ресурс, но и дополнительных посетителей. Посмотрите на англоязычный интернет – там продвижение в социальных сервисах давно стало неотъемлемой частью развития сайта и увеличения посещаемости.
Итак, решено ставить кнопки социалок. Каждый сервис предоставляет готовые коды скриптов. Но использование скриптов имеет два ощутимых минуса.
1. Чем больше скриптов на странице – тем медленнее она загружается. Бывают случаи, когда какой-либо скрипт подтормаживает, что еще больше затягивает скорость загрузки страницы.
Как известно, Google уже официально заявил, что теперь скорость загрузки сайта является важным фактором ранжирования сайта в результатах поиска. Простыми словами – при прочих равных условиях выше будут позиции того сайта, который быстрее загружается. Кстати, вы можете получить хорошие скидки на быстрый и качественный хостинг Fastvps.ru , которым я пользуюсь, подробнее здесь.
2. К сожалению, у социальных сервисов нет стандарта в размерах кнопок (хотя бы по высоте). Если вы добавите несколько кнопок в виде кодов стандартных скриптов, то увидите, что выглядят они аляповато – одни выше, другие ниже, одни пухленькие, другие тощие . Меня, как свободного художника, это очень и очень огорчает.
Одним из плюсов скриптов является то, что можно сделать отображение счетчика добавления материала в тот или иной сервис, но я думаю, в этом особой необходимости нет. Мне хватает кнопки в начале постов с количеством ретвитов.
Я пришел к выводу, что высота кнопок должна быть 18 пикселей. Вы можете использовать мои кнопки либо нарисовать свои, загрузив их на свой хостинг. Если у вас блог WordPress, то загрузите картинки с кнопками в папку wp-content/themes/ваша_тема/images.
Теперь дело осталось за малым – сделать так, чтобы при нажатии на кнопку осуществлялось добавление вашего материала в тот или иной социальный сервис. Приведу готовые примеры кодов со своего блога. Для открытия php файлов используйте стандартный блокнот (или продвинутый блокнот, например, Notepad++).
Эти коды добавляются в файле single.php (в некоторых темах его нет, тогда используйте файл index.php) в папке с темой вашего блога wp-content/themes/ваша_тема/ после этого участка:
<?php the_content(”); ?>
Cсылку @shakinru в коде кнопки Твиттера замените на свою.
Кнопка добавления в Twitter:
1
<noindex><a rel="nofollow" target="_blank" href=" http://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>
Кнопка добавления в ВКонтакте:
1
<noindex><a href=" http://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:
1
<noindex><a rel="nofollow" target="blank" href=" http://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:
1
<noindex><a href=" http://www.google.com/reader/link ?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&srcURL= http://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>
Кнопка добавления в Мой Мир:
1
<noindex><a target="_blank" rel="nofollow" href=" http://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:
1
<noindex><a rel="nofollow" href=" http://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>
Данные коды кнопок лучше добавлять так:
Читайте также: Где брать картинки для сайта - 6 способов
<div class=”buttons”>
коды кнопок
</div>
Это позволит легко задать нужный стиль оформления всему блоку с кнопками через файл стилей style.css.
Красота! Кнопки добавления в социальные сервисы готовы. Но для максимального эффекта мало дать возможность читателям добавлять ваши материалы, нужно дать ссылки на ваши профили в этих сервисах, чтобы ваши посетители при желании могли легко к вам присоединиться. Это увеличит активную аудиторию ваших читателей.
Поэтому добавим кнопки на свои профили в социальных сервисах. Идем в Google, набираем запрос «social icons» и скачиваем понравившийся набор иконок социальных сервисов.
Так как понравившиеся мне наборы не содержали иконок ВКонтакте и ЖЖ, то я сделал их в Фотошопе на основе других иконок и логотипов этих сервисов. Когда будете искать нужные логотипы, то советую искать их в формате PNG – у этого формата отличная поддержка прозрачности, что избавит вас от чистки логотипа от фона. Для поиска логотипов в формате PNG наберите запрос вида «livejournal logo png» в Google Картинках.
Затем загружаем иконки в папку wp-content/themes/ваша_тема/images. Я выбрал иконки размером 32х32 пикселя.
По кусочкам код каждой кнопки давать не буду, а то вижу, что некоторые из вас начинают зевать и скучать . Приведу код сразу всех кнопок, ведущие на профили в социальных сервисах. Не забудьте поменять ссылки с моих профилей на свои.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="buttons">
Приглашаю присоединиться ко мне в следующих сервисах:<br>
<noindex><a href=" http://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=" http://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=" http://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=" http://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=" http://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=" http://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(); ?>).
#probizblog
#followforfollow