Как добавить кнопки социальных сетей для добавления в друзья на сайт без плагина
02 Июль, 2012 
Комментариев 39
Всем привет! Сейчас я покажу, как установить кнопки социальных сетей для добавления в друзья на сайт без плагина. Ранее я рассказывал, как добавить такие социальные кнопки на блог WordPress, используя плагин Social Media Widget. Он выводит блок кнопок “Общайтесь со мной” с помощью виджета в сайдбаре, что обеспечивает доступ к ним с любой страницы блога. Такой вариант мне нравится больше, чем установка соц.кнопок после каждой статьи (не путать с кнопками “Поделиться“). Например, при помощи плагина WP Social Buttons.
Результат работы Social Media Widget можно было долгое время наблюдать в сайдбаре моего блога. Вот как это было раньше:
А вот, как это выглядит сейчас:
Как видите, практически никакой разницы. Так зачем платить больше? В смысле, зачем создавать дополнительную нагрузку на сервер своего хостинга, устанавливая лишний плагин? Хотя, основной причиной того, чтобы добавить кнопки социальных сетей на сайт без плагина было не это. Просто мне понадобилось привязать к кнопке Google+ атрибут rel=”author”. Для этого оказалось проще использовать простой html-код, попутно уменьшив количество плагинов на блоге. Как говорится, двух зайцев одним ударом.
Как установить социальные кнопки для добавления в друзья на сайт без плагина
Сразу оговорюсь, что этот способ дает возможность вставить соц.кнопки в любое место любого сайта, так как это вставка обычного html-кода. Я покажу, как добавить кнопки социальных сетей в сайдбар и после каждой статьи на блоге WordPress.
Надо сказать, что в моем примере на картинке выше, кнопка Твиттера со счетчиком читателей установлена отдельно. Никакого отношения ни к плагину, ни к тому, о чем пойдет речь ниже, она не имеет. Речь пойдет о блоке кнопок, расположенном под ней.
Итак, наша задача вывести на странице сайта изображения иконок соц.сетей и сделать их активными ссылками на одноименные аккаунты. Желательно, чтобы эти ссылки не уводили посетителей с нашего блога, то есть открывались в новой вкладке. Как открыть ссылку в новой вкладке и как сделать картинку ссылкой, читаем в этом посте.
Перейдем непосредственно к установке соц.кнопок без плагина.
1. Загружаем картинки на хостинг
Для начала, надо скачать изображения кнопок. Желательно в формате PNG с прозрачным фоном. Проще всего, воспользоваться поиском по картинкам, используя фразу “социальные иконки скачать”.
Я поступил несколько иначе. Чтобы новый блок кнопок никак не отличался от созданного плагином Social Media Widget, я использовал его картинки. Для этого скачайте и распакуйте архив с плагином. В папке images будут четыре вида иконок разных размеров (кроме русских). Таким способом можно использовать картинки от любых социальных плагинов. Например, кнопку ВКонтакте я взял из Social Share Buttons.
Теперь загружаем картинки на хостинг. Для этого можно воспользоваться админкой блога Вордпресс. Заходим в меню “Медиафайлы” – “Добавить файл” и обычным способом загружаем изображение.
Но лучше всего использовать для загрузки изображений, не привязанных к постам, другой способ. Создаем в корневой папке блога новый каталог (например, image) и загружаем в него все картинки соц.кнопок по FTP с помощью программы FileZilla. Как пользоваться FileZilla, читаем здесь.
Позже эта пака еще не раз пригодится. Полный путь на хостинге к новому каталогу будет выглядеть, примерно, так: /ваш сайт.ru/public_html/image (на примере TimeWeb).
2. Пишем html-код для установки блока социальных кнопок “Общайтесь со мной”
Можно для этих целей воспользоваться помощью любого визуального HTML-редактора, например, NVU. Или даже редактора WordPress. Я же просто написал код в Notepad++. Так что можете не заморачиваться и взять этот код, заменив в нем адреса аккаунтов социальных сетей, пути к картинкам и их размеры на свои:
1 2 3 4 5 6 7 | <noindex><p align="center"> <a href="http://feeds.feedburner.com/имя фида" rel="nofollow" target="_blank"><img src="/image/rss.png" alt="Подписаться по RSS" title="Подписаться на RSS" width="32" height="32"></a> <a href="http://vk.com/idXXXXXXXXX" rel="nofollow" target="_blank"><img src="/image/vkontakte.jpg" alt="Присоединиться в ВКонтакте" title="Присоединиться в ВКонтакте" width="32" height="32"></a> <a href="http://www.facebook.com/ваш_логин" rel="nofollow" target="_blank"><img src="/image/facebook.png" alt="Присоединиться в Facebook" title="Присоединиться в Facebook" width="32" height="32"></a> <a href="https://plus.google.com/код Гугл+" rel="nofollow" target="_blank"><img src="/image/googleplus.png" alt="Присоединиться в Google+" title="Присоединиться в Google+" width="32" height="32"></a> <a href="https://www.youtube.com/user/ваш_логин?sub_confirmation=1" rel="nofollow" target="_blank"><img src="/image/youtube.png" alt="Подписаться на канал YouTube" title="Подписаться на канал YouTube" width="32" height="32"></a> </p></noindex> |
Или скачайте файл здесь. При необходимости, можно поменять местами, удалить или добавить иконки других соц.сетей по аналогии. Я выровнял иконки по центру и, на всякий случай, заключил весь код в тег noindex. Хотя это, наверно, лишнее. Пути к картинкам я сделал относительными. Можно использовать и абсолютные адреса, то есть начинающиеся с имени домена. Например, http://ваш сайт.ru/image/vkontakte.png.
3. Установка блока соц.кнопок в сайдбар блога WordPress
Заходим в админ.панель “Дизайн” – “Виджеты“. Перетаскиваем виджет “Текст” в сайдбар и вставляем в него наш код. Нажимаем “Сохранить” и смотрим результат на сайте.
4. Добавление кнопок социальных сетей на сайт Вордпресс после постов
Если надо, чтобы блок “Общайтесь со мной” выводился после каждой статьи, то надо вставить HTML-код в файл single.php темы WordPress после <?php the_content(); ?>. При необходимости, можно дописать какой-нибудь тест и отцентровать кнопки. Подробнее, как это сделать смотрите в конце этой статьи на примере вставки кода от сервиса odnaknopka.ru.
Надеюсь, описал все подробно и будет понятно даже новичку, как добавить кнопки социальных сетей на сайт без плагина. Можно, конечно, при большом желании, оформить все красиво с помощью стилей CSS. Например, придать иконкам анимацию при наведении мыши. Но это уже другая история. А на этом все. До встречи на моем блоге!
Понравилась статья? Нажимай на кнопки:
Спасибо за полезную статью! Еще интересна тема “Как установить кнопку гугл+”, успехов Вам!
Имеется ввиду кнопка Google +1? Можно плагином или взять код прямо у Гугла.
Эх, если б ты раньше эту статью написал, когда я с этими кнопками химичил – потратил на их установку кучу времени)
Так пока петух не клюнет… Не надо было бы с Гуглом химичить, я бы эти кнопки и не трогал.
Я тоже себе без плагина установил эти кнопки. Виджеты у меня не подключены, так что с плагином наоборот был бы геморрой
Олег, я не поняла, как не устанавливая плагин Social Media Widget, получить доступ к его архиву с изображениями, чтобы выбрать картинку.
Очень просто. Скачиваем архив на компьютер, распаковываем и в папке ищем картинки.
Олег, спасибо! Интересная статья, и много полезной практической информации. Пока для меня наличие лишнего плагина не критично, но все равно, все может быть в будущем, возможно, воспользуюсь Вашей статьей.
Так я тоже совсем по другой причине это сделал.
Спасибо большое, все получилось! Вам за совет 10+ по пятибалльной шкале!
Замечала на некоторых сайтах эти кнопочки в сайдбаре, все время думала, как это сделать, теперь знаю
Спасибо за статью.
Спасибо,Олег! думаю, что пригодится мне обязательно. Хочу уменьшить количество плагинов.
Спасибо, потрясающая по своей простоте и понятности, статья! Понятно всем, в том числе и новичкам. А самое главное, это то, что теперь можно будет уменьшить количество плагинов, чтобы не загружать сервер хостинга!
Спасибо за науку! Буду с Вами дружить во всех социалках. Буду у вас учиться. Кнопки поставила без плагина.
Ничего не получается. Скопировал код, поменял данные, вставил в сингл.пшп. Может быть нужно в css.php добавить еще что-нибудь?
Я вставлял просто в виджет в сайдбар и все работает. Проверьте все ссылки и открываются ли картинки по указанным адресам.
Не видит картинки, что только не пробовал! На локальном хостинге пытаюсь установить, но не видит!
Ну не знаю, я на нескольких сайтах установил кнопки подобным образом, Проблем не было.
Статья полезная. Спасибо.
Как убрать кнопки соцсетей, виджеты комментариев со страниц Вордпресс? Нужно чтобы они выводились только в записях.
Чтобы убрать комментарии, при редактировании страницы под полем с публикуемым контентом найдите пункт “Обсуждение” и снимите там галочку “Разрешить комментарии”.
Если кнопки соц.сетей установлены с помощью плагина, то в его настройках должен быть соответствующий пункт, типа “Выводить только на страницах записей”.
Я бы сказал, что лучше вместо тега noindex использовать комментарий, т.е.: <!–noindex–>тут код<!–/noindex–> – это официальный вариант у Яндекс и он валиден. Ну и поддерживаю автора – в WordPress лучше вообще не использовать и отключить систему виджетов… т.е. в том же function.php прописать:
remove_action(‘init’, ‘wp_widgets_init’, 1);
В противном смысле толку будет мало имхо.
Добрый день, имеется сайт-визитка на SharePoint, каким образом на него добавить плагин «Ищите нас на Facebook» ?
С SharePoint не знаком, но по логике никакой плагин не нужен. Пишите текст «Ищите нас на Facebook» и вставляете под ним код своей кнопки, при нажатии на которую будет перебрасывать на Вашу страницу. Просто надо знать, где там можно вставлять html-код.
Здравствуйте! Попыталась вставить код в шаблон одной записи и ничего не видно. Вариант с неправильными адресами кнопок не подходит, потому что при вставке этого же кода в виджет, все работает отлично, но в виджете я не хочу. Подскажите, что делать.
Только что вставил в статью, у меня все работает. Проверьте код, может некорректно скопировали. тут не может не работать, это же простые картинки.
Хорошо, что нашла вашу статью. Обязательно попробую вставить кнопки соцсетей в шаблон и если все получится, уберу плагин.
Должно получиться.
Надо попробовать, хотя сложновато.
Пытаюсь установить соц.кнопки на одностраничник в Share – ничего не получается. Вообще не появляются. Путь прописан правильно. Одностраничник без редактора – музыкальная открытка. Может кто-нибудь подскажет, как их установить? Пробовать вручную?
У меня тоже когда-то были проблемы с Share42 на этом блоге. Лучше поставить вручную самые нужные.
А я хочу такие кнопочки, как стоят у Вас на сайте, чтобы возле каждой было видно количество нажавших на неё человек. У Вас в статье такие или нет?
Нет, тут про другие. А эти кнопки можно вручную поставить или есть плагины, где тоже будет со счетчиками.
Пожалуйста, проверьте коды, Вконтакте уже давно перешли на vk.com, там другой код должен быть. Хожу по Интернету, собираю правильный код по трем блогам, везде по-разному…
Да, действительно, пропустил этот момент. Но там идет редирект, так что и так все работает, но надо подправить.
Здравствуйте! Что только не перепробовала. Все иконки выстраиваются столбиком, а не в одну линию. Подскажите, может что-то дополнительно нужно сделать. Спасибо.
В сайдбаре ничего дополнительно не делал, сами в линию стали. А если надо после статьи, то свои кнопки я ставил с помощью блоков div с отступами от края. Можете глянуть в коде. Можно еще вставить, как таблицу.
Очень интересная и полезная статья, буду пробовать!
Олег, спасибо за, действительно, полезную статью!