Кнопки добавления в Livejournal, Mail.ru и другие социальные сети

социальные сети

Так уж повелось испокон веков, что в блогах авторы, как правило, добавляют в конец своих постов и статей предложение не только подписаться на обновление по RSS, но и различные кнопки социальных сервисов. За несколько лет сменилась парочка трендов в этой нише — если сначала все добавляли кнопки социальных закладок, потом были тематические (блоггерские и вебмастерские) новостные социальные сайты, а сейчас все поголовно перешли на социальные сети. Самыми популярными из них есть Вконтакте, Facebook и твиттер. Но ведь добавлять можно не только туда, есть еще ряд «похожих» полезных проектов. Расскажу обо всем этом по порядку.

Итак, для начала можно прочесть статью про добавление кнопки Вконтакте, Facebook и Twitter в wordpress блог. Там я рассказывал о вариантах решения задачи для системы вордпресс, причем что называется «копнул глубже» и рассмотрел откуда можно взять коды кнопок, какие плагины использовать и т.п. Хотя, по сути, все сводится к одной схеме:  социальные сервисы предлагают возможность с помощью специальных ссылок опубликовать содержимое на их сайтах одним кликом.

Поэтому заходим в админку wordpress блога, открываем редактор шаблона файл single.php, находим функцию вывода поста the_content и добавляем после нее код:

<div class="vseknopki">
<noindex>
А еще можно опубликовать статью в своем блоге: <br/>
<a rel="nofollow" target="_blank" href="http://twitter.com/home?status=RT @sashatod <?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> &nbsp;
<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> &nbsp;
<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> &nbsp;
<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> &nbsp;
<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>  
</div>

Внимание, в коде используется мой твиттер @sashatod — нужно заменить на свою учетную запись.

Также здесь, как мы видим, используется 5 картинок, которые предварительно нужно будет загрузить на ФТП блога в директорию используемого шаблона в  папку images. Конечно, ваши картинки должны иметь соответствующие коду названия facebook.gif и размеры width=»73″ height=»18″. За собирание воедино всех кнопок спасибо Шакину. А вообще все это можно менять по вашему усмотрению, в результате должно получиться что-то вроде:

кнопки социальныз закладок

Но в этой теме есть еще одна интересная деталь. Для блога LiveJournal данный код кнопки откроет новую страницу, где будет введен заголовок, а в теле статьи расположена ссылка на ваш пост. Если вы внимательно посмотрите на код ссылки, то в переменную Event передается ссылка на пост, но есть смысл добавить туда и текста:

<a title="Добавить в ЖЖ" href="http://www.livejournal.com/update.bml?event=<?php echo urlencode(strip_tags(get_the_excerpt(), '<a><strong>'));
echo urlencode('<br/><a href="' . get_permalink() . '">Прочитать целиком</a>');
?>&amp;subject=<?php echo urlencode(get_the_title()); ?>" target="_blank" rel="nofollow">
<img border="0" src="<?php bloginfo('template_url'); ?>/images/livejournal.gif" width="73" height="18" alt="Опубликовать в своем блоге livejournal.com"/>
</a>

После этого сохраняем шаблон и тестируем работу всех кнопок, должно работать:) Если есть какие-то вопросы, замечания или пожелания — пишите в комментариях.

P.S. При создании своих сайтов нужно уделять внимание всему — хостинг, домены, дизайн и наполнение очень важны для успешности проекта.

Понравился пост? Подпишись на:

RSS use4blog insideRSS, RSS use4blog insideEmail или twitter!

Поделись хорошей статьей в своем блоге:

Опубликовать в twitter.com        
Все комментарии для статьи Кнопки добавления в Livejournal, Mail.ru и другие социальные сети
  1. nPoXoDuMeTC (02.11.2010)

    Интересно, применю у себя на блоге, обязательно. А то впаянная в блог панель с кнопками стала раздражать… (:

  2. Елена (10.11.2010)

    Здравствуйте!У меня вопрос.Я чайник.Хочу из ЖЖ делать перепост в Ли ру.Скажите как?Как добавить такую кнопку?

  3. Andrey (08.12.2010)

    Спасибо огромное за кнопочки, теперь такие и у меня в блоге будут%)

  4. winter (09.01.2011)

    Огромное спасибо автору поста! Установила и всё получилось.
    А есть у Вас такая же кнопочка для «Одноклассников»? Было бы здорово!

  5. Tod (10.01.2011)

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

  6. Anatoliy (13.01.2011)

    Tod, вставил код в блог. Все работает, вот только какая то странная обводка вокруг картинок появляется, когда курсор наводишь. А также хотелось бы выровнять картинки по центру.
    Как это сделать?

  7. Anatoliy (13.01.2011)

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

  8. Tod (13.01.2011)

    Anatoliy, обводка появляется потому что не задано оформление гиперссылки для свойства focus, нужно убрать рамку для a:focus, насколько я помню.
    По второму вопросу нужно почитать статью вывод текста в блоге только на главной — там есть описание условных операторов.

  9. Anatoliy (14.01.2011)

    Tod, спасибо. С оформлением гиперссылки справился.
    На счет условных операторов — не получается.

    Как я понял надо сделать что то в таком роде:

    <?php
    if (is_single() )
    КОД ВСЕХ СОЦИАЛЬНЫХ КНОПОК

    или это бред полный ? )))

  10. Anatoliy (14.01.2011)

    Tod, все получилось…поудаляй мои 3 последние коменты … код не пропускает в коменте … в итоге каша какая то . Наверно ты специально запретил возможность писать код.

  11. Tod (15.01.2011)

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

  12. Алексей (06.02.2011)

    Для DLE тоже подойдёт?

  13. Tod (07.02.2011)

    Алексей, должно, по идее, это ведь просто HTML код, так что с DLE проблем не возникнет.

  14. Tibalt (10.02.2011)

    Сколько можно таскать эти кнопки с сайта Шакина? Ну ладно делаете хорошее дело, код в один файл разместили, но хоть бы дизайн сменили что-ли. Все блоги как с из под одной гребенки с этими кнопками.

  15. Tod (11.02.2011)

    Tibalt, мне кнопки понравились, вот я и их использую, ничего «уникального» или «защищенного авторским правом» у них нет. Шакин сделал нужно и хорошее дело, ему за это «респект», а использование такого число кнопок это ли не признание его работы:) Собственно, я никого не заставляю их устанавливать, в статье подробно написано как и где изменить картинки можно.

  16. владимир (19.03.2011)

    Тоже поставил такие кнопочки, подсмотрел у Шакина, грамотный мужик.

  17. Vladimir Fedin (02.04.2011)

    Для вордпресса есть плагин Social Share Buttons for WordPress, там все эти кнопки есть. И установка быстрее, и удалять, если что тоже быстрее. Зачем вручную всё делать?

  18. Tod (02.04.2011)

    Vladimir Fedin, это позволит сэкономить ресурсы для блога, так как отображение обычного кода намного проще, чем использование плагина + в таком случае легче менять картинки.

  19. Adrian (13.06.2011)

    А для пользователей Joomla что-нибудь посоветуете? Интересует кнопка, которая даст возможность опубликовать в ЖЖ результаты теста.

  20. Tod (14.06.2011)

    Adrian, к сожалению с Joomla не работал, по поводу тестов ЖЖ — возможно как-то модифицировать последний пример кода там где у меня «расширенная» публикация в ЖЖ идет, добавив вместо текста статьи результат теста.

  21. SubOnAir (16.06.2011)

    Tod, спасибо!!! Все отлично работает!!!

  22. Диман (07.08.2011)

    автору респект отличная тема!!!

  23. Тима (21.08.2011)

    Понравился вариант с постингом в ЖЖ, интересный ход. А можно как-нибудь сделать так, чтобы туда отправлялась статья до тега more? Если да, то как?

  24. Oleg_mirmix (22.08.2011)

    А можно сделать так, чтобы туда отправлялась статья до тега more? И одновременно вставлялась первая картинка поста?

  25. Tod (22.08.2011)

    Oleg_mirmix, по аналогии с приведенным кодом я бы заменил get_the_excerpt на get_the_content, хотя не уверен, что это сработает.

  26. Jawan777 (11.09.2011)

    Так блок :

    <a title="Добавить в ЖЖ" href="http://www.livejournal.com/update.bml?event=<?php echo urlencode(strip_tags(get_the_excerpt(), '‘));
    echo urlencode(‘Прочитать целиком‘);
    ?>&subject=” target=”_blank” rel=”nofollow”>
    <img border="0" src="/images/livejournal.gif” width=”73″ height=”18″ alt=”Опубликовать в своем блоге livejournal.com”/>
    </a>

    нужно вставлять вместо:

    <a rel="nofollow" href="http://www.livejournal.com/update.bml?event=&subject=” target=”_blank” title=”Опубликовать в своем блоге livejournal.com” rel="nofollow">
    <img src="/images/livejournal.gif” alt=”Опубликовать в своем блоге livejournal.com” width=”73″ height=”18″>
    </a>

    ???

  27. Tod (12.09.2011)

    Jawan777, да, все правильно, последний пример кода нужно использовать вместо стандартного для livejournal, указанно ранее.

  28. Alex-4e (12.12.2011)

    Tod, но ведь в таком случае открывается страница с пустыми полями «Тема» и «Сообщение». Как для обычного HTML реализовать заполнение заголовка и размещение ссылки на пост?

  29. Tod (14.12.2011)

    Alex-4e, посмотрел и потестировал еще разок — у меня все автоматически заполняется для всех соц.сетей.

  30. minsk (13.12.2012)

    рабочие вещи написаны! Удобные кнопочки

  31. Анна (14.07.2013)

    Спасибо за полезные советы. Я тоже пользуюсь на сайте кнопками.
    Только сделала их сбоку висящими на одном месте даже при прокручивании контента

  32. Tod (14.07.2013)

    Анна, да, знаю о такой реализации — тоже хочу себе такой вариант установить.

  33. Николай (15.12.2013)

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


Оставить комментарий к статье Кнопки добавления в Livejournal, Mail.ru и другие социальные сети