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

Социальные сети – как двигатель прогресса.

Сегодня самыми популярными он-лайн ресурсами среди пользователей
остаются социальные сети. Вот такой вот кризис…
Всем желающим принять участие в сдвигании прогресса – кнопки социальных сетей для сайта без плагинов и без денег (бесплатно!)

Социальные сети - двигатель прогресса

Практически все ресурсы – Твиттер, Фейсбук, ВКонтакте («нравится/не нравится», «добавить»), Одноклассники, Гугл+1, и пр. социальные сети можно установить на свой сайт без применения плагинов – html-кодом и, как следствие – уменьшить время загрузки страниц сайта.

А плагины, если вы в курсе новостей, мы уже опробовали

 

Начнем сегодня с блока «Поделиться» от ресурса Яндекс

В конце статьи:
видео – для тех, кто не понял установку по тексту и
хороший подарок от Яндекса!

 
JavaScript-объект блока Ya.share, переходим по ссылке  ,открываем в новой вкладке.

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

    Каждая из этих выбранных кнопок позволяет в один клик поделиться анонсом статьи в соответствующей социальной сети. Ставим галочки – выбираем сервисы, иконки которых будут отображаться рядом с самой кнопкой «Поделиться». Естественно вам нужно зарегистрироваться в каждой выбранной сети.

Далее выбираем внешний вид блока – есть три варианта, нажимаем нужный:

  1. кнопка «Поделиться» и иконки;
  2. меню «Поделиться» и иконки;
  3. только иконки выбранных соц. сетей

Выбор внешнего вида блока кнопок

Обратите внимание – при выборе иконок и вариантов внешнего вида блока в коде html должны происходить изменения. Если этого не происходит – перезагрузите страницу!

И так – иконки и внешний вид блока выбраны

  • система выдает нам готовый html-код, который нам необходимо установить на свой сайт.

    С этим разобрались – оставляем вкладку с кодом и переходим в админ-панель своего сайта или копируем этот код и сохраняем его в любом текстовом документе (как вам удобнее).

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

  • заходим в админ-панель – дизайн – редактор
  • в правой колонке, список шаблонов, находим single.php (Single Post, Сообщение отдельно, Одиночная запись)

Если вы имеете дело с кодами шаблона впервые – совет:

Создайте на рабочем столе текстовый документ и скопируйте в него весь код файла single.php (не забываем сохранить) – это поможет восстановить сайт в случае некорректного редактирования кода.

  • заходим на вкладку, где у нас открыт наш код html выбранных кнопок (или вы его сохраняли) – выделяем, копируем и вставляем в код файла single.php – обычно до или после строки <?php the_content(); ?>
фрагмент кода single.php

фрагмент кода single.php

  • если в вашем шаблоне, в файле single.php (или в другом файле вывода одиночной записи) отсутствует строка <?php the_content(); ?> и вы плохо разбираетесь в кодах html – место для вставки кода кнопок можно найти методом проб

(смотрите видео)

  • обновляем файл single.php, заходим на любую статью сайта, смотрим что получилось

Мы разместили кнопки социальных сетей на «Записях» сайта, для вывода кнопок на «Страницах» возвращаемся в админ-панель – дизайн – редактор

  • в правой колонке списка шаблонов, находим page.php (шаблон страницы) – копируем код на всякий случай в новый текстовый документ.
  • также находим в коде строку <?php the_content(); ?> и вставляем ранее упомянутый html-код

Анализ сайта

 

 

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

- админ-панель, открываем вкладку «Виджеты», перетаскиваем в нужный сайдбар виджет «Текст» и в него копируем html-код соц. кнопок. Не забываем сохранить.

Как и обещал – подарок-рекомендация от Яндекса:
Правильное оформление главной страницы сайта

 ◊ ◊ ◊

На этом все, следующий раз установим кнопку Гугл+1 также с помощью кодов
> не пропустите <

До встречи!

 

Автор: Сергей Бондин





Метки записи: ,
Похожие записи:
Оставить комментарий
  1. Друзья, если Вам действительно понравился материал – не забывайте, пожалуйста, кнопку Гугл +1 – в конце поста, посоветуйте другим

    Если Вы заметили неточность или ошибки в публикации, если Вы не согласны с автором – просьба указать в своем комментарии

    ...

  2. Честно говоря,я не понимаю, какой смысл в этих кнопках.Чем они хороши? И что практически происходит, если я нажимаю на кнопку “поделиться”? Как это влияет на мой сайт? Объясните бестолковой, пожалуйста.

    ...

    admin Ответил(а):

    @Лариса, странный конечно вопрос:”…что практически происходит, если я нажимаю на кнопку «поделиться»?…”
    Почитайте пока здесь –
    http://sabsait.ru/pervye-shagi/ploxaya-indeksaciya-sajta-kto-vinovat-i-chto-delat.html/
    и здесь

    ...

  3. Я использую кнопки от Share42.com

    ...

    Ирина Ответил(а):

    @Jazzmin, а у меня этот плагин стал барахлить. Отправлять отправляет, но без картинки. Хотя сами кнопки мне очень нравятся.
    Задумалась над размещением кнопок кодом. И сайту будет полегче: – 1 плагин.

    ...

  4. Спасибо,Сергей!Ваш сайт – как дом родной…

    ...

  5. Меня зинтересовала статья. Поставила сайт в закладки. Буду ждать видео по установке кнопок соцсетей.

    ...

    admin Ответил(а):

    @Татьяна, видео обязательно будет

    ...

    Татьяна Ответил(а):

    Буду ждать, спасибо.

    ...

    admin Ответил(а):

    @Татьяна, видео готово.

    ...

  6. Если меняем тему, то работу повторяем, правильно?

    ...

    admin Ответил(а):

    @Юрий, да – новый шаблон – новый код – ставим в него.

    ...

  7. И вновь Сегрей вы порадовали доходчивым уроком. Смотрела его и делала. Установила и очень рада. А то друзья заходят и спрашивают, как поделиться в контакте и одноклассниках. У меня строчки не было, и помог ваш видео урок. Спасибо. Вот мне с хлебными крошками надо теперь разобраться.

    ...

    admin Ответил(а):

    @Оксана, пожелаю Вам удачи!

    ...

  8. Вот как раз нужна мне была эта информация, спасибочки

    ...

    admin Ответил(а):

    @Светлана, значит Вы не зря зашли, и я не зря писал
    Приходите еще

    ...

  9. Сережа! Огромная благодарность! Убрала эти громоздкие плагины и поставила блок кнопок. Красота!

    ...

    admin Ответил(а):

    @Светлана, не было проблем с установкой кода в нужное место?

    ...

    Светлана Ответил(а):

    Нет! Я уже столько раз подписку редактировала, что научилась

    ...

  10. Спасибо. Сейчас устанавливаю их на сайт

    ...

  11. Помоги, пожалуйста! Я тоже решила взять скрипт от share42 , но вот ума не приложу, куда его ставить! Уже попробовала, кажется, после каждого кода поставить. Подскажите, куда нужно ставить, если код одиночной страницы (да и шаблона тоже) вот такой:

    ...

    admin Ответил(а):

    @Лара, Ваш код в комментарий не прошел, я его НЕ вижу – пишите просто на почту – ser.bondin7@gmail.com (не оправляет – пришлите как текстовый документ, скопировав в него код)
    Вы сами пробовали ставить – какой результат?
    - не выводятся кнопки?
    - выводятся, но “криво”..?

    ...

  12. Спасибо,Сергей! Поставила, с Вашей помощью, кнопки на свой блог. =) Одно смущает – уж больно мелкие значки…=(

    ...

    admin Ответил(а):

    @ольга, нормальные значки – относительно текста.

    ...

  13. Здравствуйте Сергей. Поставила я пока одну кнопку закладки, думаю временно, нет сил пока на другую кнопку. и поставила плагин google+, но эта кнопка появляется вначале статьи, а нужно, чтобы она была рядом с кнопкой закладки в конце статьи. Как ее поставить рядом с кнопкой закладки?
    А плагин OK2 я вообще в плагинах на word press не нахожу.

    ...

    admin Ответил(а):

    @Татьяна, здравствуйте!
    Плагин ok2 можно скачать вместе с другими здесь – в конце статьи.
    Кнопка Гугл+1 – плагином?
    Смотрите в его настройках – размещение кнопки на странице.
    У меня +1 установлена кодом

    ...

  14. Сергей! Спасибо за урок. А можно эти кнопки установить в шапке сайта? Или они делятся только записями?
    Мне просто посоветовали, что на сайте в шапке должны быть кнопки соц. сетей.

    ...

    admin Ответил(а):

    @Ирина, попробовать можно – код и в виджетах ставится, и в шапке встанет
    Отправлять должен открытую статью, но нужно попробовать

    ...

    Ирина Ответил(а):

    @admin, попробую!

    ...

  15. Добавила код, только кнопки маленькие, можно их как нибудь сделать на размер больше. Подписалась еще раз на новые статьи, на почту mail ничего не приходит.

    ...

    admin Ответил(а):

    @Зема, кнопки, они такие у всех – в коде размера нет…
    Подписку видел, она подтверждена. Не приходят статьи? – наверное давно не писал ничего. Отвлекался на другой сайт.
    И проверяйте папку спам в почте

    ...

    Зема Ответил(а):

    Ок. Проверю. Хочется установить кнопку Гугл+1 с помощью кода… .

    ...

    admin Ответил(а):

    Гугл +1 поставим в ближайшее время

    ...

  16. Спасибо за отличную статью – именно то, что нужно было.
    Единственный момент – хотелось разместить кнопки в боковой панели, они не помещались в одной строке. Перенос на другую страницу происходит криво.
    Как разбить разбить код на 2 строки, чтобы перенос происходил в нужном месте?

    ...

    admin Ответил(а):

    @SMM, лучше всего обратиться к разработчикам – поищите домашний сайт.

    ...

  17. Доброго, Сергей! :)

    Благодарю за нужную и понятную статью, попробовал без всякого энтузиазма, (т.к. до этого несколько раз пытался)но, как не странно получилось! Ура!
    А можно как то перед “похожими записями” поставить, а то у меня после похожих записей?

    С уважением.

    ...

    admin Ответил(а):

    @Юрий, шаблоны у всех разные…
    Пробуйте “методом тыка” – я показывал на видео – ставьте точки, выводите над похожими статьями. Но может и не получиться

    ...

  18. Cпасибо!

    ...

    admin Ответил(а):

    Пожалуйста!

    ...

    admin Ответил(а):

    @zajch-elen, Вы подписались на рассылку сайта, но не подтвердили ее!
    Не пришло письмо? – можно подписаться повторно

    ...

  19. Удалила плагин, который начал у меня глючить на фейсбуке. Стала искать замену и наткнулась на вашу запись – спасибо! Помогли – все пока работает. Посмотрим, как дальше будет (ведь у меня Social Share Buttons тоже поначалу хорошо работал). Главный плюс – облегчение работы сайта, ИМХО.

    ...

    admin Ответил(а):

    @nika, главный плюс – согласен.

    ...

  20. Спасибо. Пока поставила кнопки в виджеты. Но то же не плохо. У вас очень хороший сайт. С помощью ваших статей становиться намного понятнее.

    ...

    admin Ответил(а):

    @Jane, спасибо Вам!

    ...

  21. Сергей, пыталась несколько раз установить кнопки без плагина. Два раза сайт переставал работать. Хорошо, что есть копии на хостинге. Сложно оказалось. Но буду далее пытаться. Уж очень мне нравятся эти аккуратные кнопочки.Я только начала изучать html. Пока знаний не хватило. Заодно и слетел установленный FeedBurner. Все опыт, опыт…или, скорее его отсутствие.

    ...

    admin Ответил(а):

    @Светлана, Вы видео до конца досмотрели?
    Там есть вариант размещения – “методом тыка…”

    ...

    Светлана Ответил(а):

    Вот как раз метод тыка и не спас.
    На моем блоге какой-то совсем необычный Одиночный файл, где ничего подобного из Вашего видео нет.
    У меня получалось поставить кнопки и в верхнем сайдбаре и в нижнем. Где я только не размещала этот код. Пока чуть не разрушила все. Хорошо, что сохранилась на хостинге. Даже не обращалась к специалистам. Теперь все нужно переделывать, а времени у меня сейчас нет. Работа.
    Сергей, Вы – очень внимательный человек! Спасибо. Искреннее спасибо!

    ...

    Jazzmin Ответил(а):

    @Светлана, – share.pluso.ru – без плагинов.

    ...

  22. Копки установил по вашей статье, спасибо! Но вот проблему свою не решил. Я совсем новичок в сайтостроении. У меня вопрос по поводу внешних ссылок с моего сайта на сервис закладок Bposter и на соц.кнопки. Social Butons у себя на сайте убрал. Кнопки поставил как у Вас рекомендуется, а внешние ссылки остались. Если понятно сформулировал вопрос и можете мне помочь- буду благодарен.

    ...

    admin Ответил(а):

    @Владимир, у Вас кроме установленных – еще 5 кнопок соц. сетей + 1 ссылка Твиттер с летающего “пингвина” + 1 ссылка с RSS
    Вы разве не видите кнопки? – они под МЕТКАМИ

    ...

    Владимир Ответил(а):

    @admin, спасибо, все получилось. потихоньку учусь видеть больше.

    ...

    admin Ответил(а):

    @Владимир, удачи!

    ...

  23. Получилось вставить в код с первого раза. Класс. Спасибо.

    ...

    admin Ответил(а):

    @Jane, спасибо за отзыв!
    С наступающим Вас!

    ...

  24. Спасибо Сергей! Мне бы хотелось установить еще кнопку для Li.,но она есть только в Pluso. Надо тогда все эти кнопки переустановить вместо моих. Подскажите пож. стоит ли это делать…

    ...

    admin Ответил(а):

    @Елена, переустановить кнопки или нет – это как Вы сами решите.
    Если кнопка Li нужна только для себя – отправлять анонсы – можно просто сделать закладку на компе и отправлять с нее

    ...

  25. Уважаемый Сергей! искренне благодарю вас за такую подробную инструкцию! все получилось легко и просто!!!

    ...

    admin Ответил(а):

    @Роман, спасибо!
    Значит не зря писал.

    ...

  26. Спасибо, я попробую.
    А то у меня плагин барахлит, устанавливаются только страшные кнопки, аккурантые не все работают.. такой бардак под статьями!!!!

    ...

    admin Ответил(а):

    @Кристина, попробуйте – расскажите…

    ...

  27. Кроме яндекса – надёжных плагинов соц закладок нету. Только с самих соц сетей. Недавно яндекс обнаружил, что сервис odnaknopka*ру перенаправляет посетителей каталога на их рекламную страницу – только если посетитель зашёл с мобильного интернета. Как назвать такой сервис соц кнопок?

    ...

  28. Сереж у меня еще одна проблемка есть. Мне очень нравятся кнопки от share.pluso – красивые и завоевывают популярность, очень удобные.Я поставила их себе, но почему то не работает кнопка одноклассников. Вернее она работает, но публикует не коротенький анонс в соц сетях, а то, что предлагает плагин похожих картинок с рецептами. Я не пойму почему. Поможешь разобраться, что нужно исправить.

    ...

    admin Ответил(а):

    @Лариса, не работает одна кнопка – скорее всего ошибка плагина или несовместимость с чем-то.
    В одноклассниках то, что он пишет, можно удалить и написать свое?
    Если ничего нельзя – можно просто руками дать анонс в этой соц. сети

    ...

  29. У меня стоят некоторые кнопки на сайте, но я хочу поставить такие, как у Вас Гугл+1 – по такому типу, чтобы сразу возле каждой кнопки показывало и количество нажавших на неё людей. Это такие в статье или нет? И если нет, то не подскажете, где их взять?

    ...

    admin Ответил(а):

    @Людмила, нет, это не Гугл+
    Кнопка Гугл+ устанавливается двумя кодами – основной (большой) и код самой кнопки (в то место, где она будет отображаться).
    Подробности здесь – https://developers.google.com/+/web/+1button/

    ...

  30. Спасибо Сергей за информацию по установке.Пока поставила в виджет,работает ОТЛИЧНО!
    А вот с файлом пока не разобралась не могу найти у себя в файле single.php такую штучку как

    ...

  31. Социальная сеть в выплатами! Всего за регистрацию вы можете вывести 70 рублей сразу, после того как заполните свой профиль!
    Моментальные выплаты на вебмани и вконтакте(голосами)!

    ...

  32. Спасибо! Все получилось замечательно. Полезные знания на Вашем ресурсе.

    ...

  33. Здравствуйте! Установила кнопки соц сетей себе на сайт, но у меня не работает кнопка “отправить на email”. После нажатия открывается пустая страница. В чем может быть проблема? Подскажите пожалуйста, я новичек в этом деле, хотя уже есть два сайта)

    ...

    admin Ответил(а):

    @lika777, что-то я не вижу на вашем сайте кнопок соц. сетей…
    Там вообще пока ничего нет.

    ...

    lika777 Ответил(а):

    А это что: ………

    ...

    admin Ответил(а):

    @lika777, теперь вижу.
    Слишком страница длинная попалась.
    «отправить на email» – на компьютере должна быть установлена программа “Офис” со всеми ее разделами. При нажатии “отправить на e-mail” открывается программа почты “Microsoft Office Outlook” и выходит окно создания письма

    ...

    lika777 Ответил(а):

    Спасибо. У меня только документы Word установлены на компе, полностью офис не устанавливала) А можно еще вопрос? У меня на втором сайте, если делаешь ссылку на email, то она не работает. Могу видео записать коротенькое, чтобы вы посмотрели. Может настройки в WordPress неправельные и RSS ленту установить не могу FeedBurner ошибку показывает, что не нашел на сайте feed-файл?

    ...

    admin Ответил(а):

    @lika777, попробуйте временно сменить шаблон – если все заработает – дело в шаблоне.
    А зачем Вам проблемный шаблон – меняйте его.

    ...

    lika777 Ответил(а):

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

    ...

    admin Ответил(а):

    @lika777, ну, а что я могу сказать, глядя на сайт со стороны…?
    Ремонтировать нужно его, но не по переписке же.

    ...

  34. Сергей,спасибо за подробную статью и видео,установила кнопки соц.сетей кодом,все получилось.

    ...

    admin Ответил(а):

    Самое главное, это решится и все получится.

    ...

  35. Спасибо, нашла много полезного для себя, всё очень просто и доступно описано! Страницу добавила в закладки.

    ...

  36. Не понимаю, в чём причина…работают все кнопки, кроме одноклассников. При попытке поделиться в Одноклассниках, запрашивает логин и пароль, после ввода зависает. Если предварительно войти в Одн-ки, то со страницы выходит и опять запрашивает пароль… Можно как-то это исправить? Спасибо.

    ...

    admin Ответил(а):

    Светлана, скорее всего это временный сбой или на площадке “Одноклассники”, или между скриптом кнопок и площадкой – такое бывает иногда.
    Но, на всякий случай –
    – попросите друзей зайти на Ваш сайт и “поделиться в Одноклассниках” – если сработает нормально, почистите историю браузера или переустановите браузер.
    - можно попробовать самой зайти с разных браузеров

    ...

    admin Ответил(а):

    Я сейчас зашел на Ваш сайт – попробовал.
    Сразу “выбросило” из аккаунта и просит пароль.
    Проверил на своих кнопках – Одноклассники нормально.
    Очевидно у вашего скрипта сбой.
    Попробуйте вновь скопировать его код по ссылке и заменить у себя на сайте – не поможет – подождите, исправят авторы

    ...

    Светлана Ответил(а):

    Сергей, спасибо за помощь! Вчера уже все эти методы пробовала, к сожалению, не помогло…Правда, на тестовом сайте, какое-то время кнопка работала нормально, уже не знаю, в какую сторону копать)))

    ...

    admin Ответил(а):

    У меня на одном поддомене стоит этот скрипт – проверил – работает.
    Возможно на вашем сайте он с чем-то не дружит.
    Поищите другие скрипты кнопок соц сетей

    ...

    Светлана Ответил(а):

    Отправляюсь на поиски, спасибо!

    ...

  37. Спасибо за статью. У меня очень быстро все кнопочки установились на одном из сайтов. Впервые я исправила что-то в коде, думала, что не получится. Однако!
    Все получилось. Поделилась вашей статьей с друзьями!

    ...

    admin Ответил(а):

    Mari, спасибо за отзыв и за “поделились…”

    ...

  38. Отличная статья. О кнопке Поделиться также рекомендую почитать тут http://kvinta-a.ru/knopki-podelitsya-dlya-sayta/

    ...

  39. Здравствуйте! Дошел до середины статьи и обнаружил, что требуется какой-то файл single.php. Где его взять. Я сам делал сайт и такого файла у меня нет. Или вы пишите для wordpress?

    ...

    admin Ответил(а):

    Да, разговор о сайте на WordPress
    Найдите у себя код отвечающий за вывод одиночной записи (страницы) – туда и ставим кнопки

    ...

Оставьте свой комментарий!

* Обязательные для заполнения поля
Все отзывы проходят модерацию.




*Нажимая кнопку "Отправить", Вы даете согласие на обработку своих персональных данных