Как поставить на блог кнопки и виджеты ВКонтакте и Facebook | Записки компосапиенса


10
Мар

Как поставить на блог кнопки и виджеты ВКонтакте и Facebook

   Автор: st1xer   Категория: Социальные сети

Tweet

Постоянные читатели моего блога наверно заметили, что недавно здесь появились кнопки популярных социальных сетей (ВКонтакте и Facebook) и не только они. Сегодня я хочу рассказать о том, как это все хозяйство работает, как поставить и настроить.

Начнем с ВКонтакте, как близкого большинству рунетовских пользователей и по понятным причинам имеющего бОльший смысл на сайтах Рунета. У Контакта, как и большинства крупных соцсетей имеется раздел Разработчикам, доступный по этой ссылке. Так как нас интересуют виджеты для сайтов, то и перейти там нужно по ссылке Сайты (хотя там есть и другие интересности, но это тема для отдельной статьи). Список доступных виджетов для сайта довольно обширный:

У меня из этого многообразия установлены «Мне нравится», «Сохранить ВКонтакте» и виджет для сообществ, привязанный к моей официальной странице (кстати, можете подписаться на нее, что бы получать обновления сразу с трех моих блогов по теме создания, продвижения сайтов и заработка в интернете). Так же там заслуживают внимания виджеты для комментариев (читатель комментирует под своей авторизацией ВКонтакте, комментарий появляется у него на стене и может заинтересовать посетителей его страницы) и для опросов (там описано довольно подробно). Виджет для пожертвований только выглядит привлекательным — на самом деле использовать его могут только благотворительные и приравненные к ним организации (заморочно в общем).


Пара слов об установленных у меня виджетах ВКонтакте



Виджет «Мне нравится» позволяет вам узнать, кому конкретно ваша запись понравилась, а если пользователи при этом еще нажали «Рассказать друзьям» — ваша ссылка будет отправлена в их аккаунт и может принести вам трафик.
Виджет «Сохранить ВКонтакте» позволяет сохранить ссылку в своем аккаунте, при нажатии появляется окно выбора опций и превью:


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

Как установить понравившиеся виджеты ВКонтакте на свой сайт

Прежде, чем установить — надо настроить. Жмете в меню выбора виджетов на понравившийся и попадаете в настройки. Настройки для виджета «Мне нравится» представляют из себя следующее:


Полученный в итоге код состоит из 2 частей (там даже написано по-английски, что с каждой из них делать ;)  — каждая часть начинается с <!--). Можно прямо так брать и вставлять в код: первую часть — в раздел <head> (в коде файла header.php), вторую — в то место, где будет выводиться кнопка «Мне нравится». У меня она встроена в код файла single.php (под записью), конкретное место зависит от шаблона вашего блога — экспериментируйте (только не забывайте сохранять исходники редактируемых файлов, мало ли что).

Кнопка «Сохранить ВКонтакте» настраивается по тому же принципу и ее код состоит тоже из двух частей (одну — в <head>, вторую — в то место, где она должна выводиться). Можно указать свой вариант отображаемого на кнопке текста.

Виджет для сообществ настроить еще проще. Настройки для него выглядят так:


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

Виджета комментариев у меня нет (на некоторых сайтах я видел сразу 3 формы для комментирования — ВКонтакте, facebook и самого сайта, но по такому пути мне идти не интересно ;) ), но настроить его тоже не проблема:

Могут возникнуть проблемы с отображением установленных виджетов на странице (особенно, если вы используете, как и я, виджеты нескольких соцсетей). Что бы получить возможность как то настроить расположение, я заключил виджеты в невидимую таблицу, ячейки которой уже и редактировал вместе с содержащимися в них виджетами. С виджетами для ВКонтакте мы вроде разобрались, теперь перейдем к Фейсбуку.

Как поставить на свой сайт и настроить виджеты Facebook

Виджеты для сайта от Facebook так же как и ВКонтактовские находятся в разделе для разработчиков (вообще, что бы знать где их искать — запомните, что ссылка на раздел для разработчиков есть внизу каждой страницы ВКонтакте и Фейсбука ;) ).

Надо учитывать, что русской версии раздела еще нет — когда вы ткнете на большую зеленую кнопку, вы попадете в мир английского языка )). Там нас интересуют Social Plugins (социальные плагины для сайтов). Что очень удобно, так это то, что все плагины раздела находятся на одной странице — просто крутите вниз, пока не найдете нужный. И не заморачивайтесь, что там содержимое плагина на английскм — русское отображение можно настроить отдельно.

Так как у меня на странице имеется пока только плагин Лайков (Like it!) от Facebook — о нем я и расскажу. Код который предлагает вставить FB на сайт, выглядит так:

<html>
<head>
<title>My Great Web page</title>
</head>
<body>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like></fb:like>
</body>
</html>

Однако, следует помнить, что буржуи имеют определенный склад ума и скрипты предлагают в таком виде, что из них можно сделать отдельную страницу — нам не нужны лишние теги вроде <html>, <head> и <body> — отбрасываем все лишнее и получаем чистый код, который следует вставить в нужное место страницы:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like></fb:like>

Как видите — там явным образом указан язык отображения, что бы получить русский надо заменить en_US на ru_RU, оставив все остальное без изменений. После чего — добавить указанный код в нужное место на сайте (как я говорил выше — я добавил в таблицу, с помощью которой настраивал расположение виджетов на страницах своих записей).

Собственно — на этом с виджетами на сегодня все, если я воспользуюсь на своих сайтах другими виджетами от ВКонтакте или Facebook (а может — и других соцсетей), то обязательно расскажу подробнее на страницах этого блога. А пока можете почитать анекдоты на bestjoke.ru — расслабьтесь и сможете вернуться к работе с новыми силами.

Эта запись также похожа на:

  1. Официальная страница ВКонтакте
Спасибо Вам за выражение своего мнения о статье в комментариях и то, что поделились ею со своими друзьями:


Теги: Facebook, виджеты, ВКонтакте, кнопки

Предыдущая запись: ←

Приглашаю вас подписаться на мою официальную страницу ВКонтакте, откуда вы сможете получать обновления сразу с нескольких моих блогов по работе и заработку в интернете:

Эта запись опубликована: Четверг, Март 10th, 2021 в 13:53 и находится в категории Социальные сети. Вы можете читать эту запись через RSS 2.0 поток. Вы можете оставить комментарий, или поставить trackback на своем сайте.

33 комментариев

Semm
 1 

Как говорится пост в тему пошел, а гуглить лень было — огромное тебе спасибо!

Март 10th, 2021 at 13:59
 2 

Огромное на здоровье ))

Март 10th, 2021 at 14:54
Денежный сайт
 3 

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

Март 10th, 2021 at 15:13
 4 

Ну если статья понравилась — не грех и кнопочки понажимать, я думаю ;)

Март 10th, 2021 at 15:31
Вячеслав
 5 

я у себя тоже поставил эти плагины — вот оцените:stopfake.ru/poddelki/adidas-fake-vs-real.html

Март 11th, 2021 at 17:43
 6 

Вячеслав, ссылка засчитана ) А по существу — хорошо вписались в дизайн

Март 11th, 2021 at 18:00
wertock
 7 

Интересный пост спасибо!

Март 13th, 2021 at 16:00
Ильнур
 8 

Спасибо за настройки! Давно хотел себе поставить виджеты!

Март 24th, 2021 at 00:29
Алена
 9 

Спасибо! Вы очень-очень помогли! Вставила с легкостью виджет фейсбука, а вот контактовские кнопочки вставить не получается (движок MediaWiki). Никто не знает, куда нужно вставлять код? Там просто все на php, html и в помине нету...

Апрель 15th, 2021 at 00:26
 10 

Кнопочки ВК тоже на пхп. Одну часть в header, вторую — в то место где должен выводиться виджет. В общем — все то же самое как в случае с ВП должно быть

Апрель 15th, 2021 at 00:30
Алена
 11 

Спасибо за оперативный ответ. Но дело в том, что в шаблоне сайта нет тегов ...поэтому я и затрудняюсь с тем, куда разместить первую часть кода

Апрель 15th, 2021 at 10:17
Алена
 12 

Ой. теги head не отобразились в предыдущем сообщении — смысл в том, что там нет тегов head в теле шаблона. Вот

Апрель 15th, 2021 at 10:18
 13 

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

Апрель 15th, 2021 at 16:26
Алена
 14 

Дело в том, что особенностью MediaWiki (да и, наверное, всех остальных wiki-движков) является отсутствие файлов с расширением html. То есть там совсем не так, как, например, в joomle. И вообще, как я понимаю, полностью сменить шаблон нельзя (если не писать его с нуля на пхп, конечно), можно изменить только оформление. В общем код главной (index.php) думаю в данном случае не очень поможет — состоит максимум из 20 строк на пхп...

Большое спасибо за внимание к проблеме, буду разбираться (потом отпишу, если инересно)

Апрель 15th, 2021 at 22:58
 15 

если в коде пхп мало строк это говорит скорее о том что дизайн лежит в отдельном файле или файлах (tpl например), вы сами говорите что дизайн можно написать с нуля — значит файлы отвечающие за дизайн быть должны, надо просто найти

Апрель 15th, 2021 at 23:55
itSlam
 16 

Чото я там от Вконтакта ставил — но дело дальше не пошло...наверно, после твоего поста, пора вернуться к настойкам — лишний траф лишним не бывает))))) как говорится)))

Май 18th, 2021 at 09:06
 17 

Траф действительно есть (с подписки), где то в районе 5-10% от числа подписчиков на официальную страницу.

Май 18th, 2021 at 10:50
itSlam
 18 

Наврено стоит для начала сделать официальную страничку своего блога...иначе эффекта ноль)))

Май 18th, 2021 at 14:37
Егор
 19 

Вопрос такой, если вы заметили, при авторизации вконтакте отображается все верно, но когда вы не залогинены вконтакте попробуйте зайдите на свой сайт, что вы увидите?я вижу закрытое сообщество и 4х кривых полтьзователей не пойми кто это

Июнь 25th, 2021 at 17:44
aliska
 20 

да, есть такой глюк, но это глюк самого виджета...

Июнь 26th, 2021 at 00:32
bulanovandrej
 21 

а о виджете сообществ (т.е. группы) можете рассказать, а то я там найти не могу.

Июль 15th, 2021 at 16:38
Ирина
 22 

Добрый день! Статья очень полезная. написано очень доступным и легим языком, без заморочек. Но...пыталась поставить виджет ФБ на сайт — виджет ставится, ок! Но, когда я нажимаю на кнопку — пишет ошибка... Что делать?

Июль 16th, 2021 at 14:00
 23 

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

Июль 17th, 2021 at 16:19
Наталья
 24 

Спасибо большое за статью. Все вставила на сайт, но не поняла, о какой тбице Вы говорили. Подскажите, как выстроить эти виджеты в одну линию. Сайт на юкосе. Спасибо.

Август 5th, 2021 at 02:24
NoFrost
 25 

Я еще кнопочкой от маил.ру пользуюсь, трафик из моего мира тоже неплохой.

Август 5th, 2021 at 08:56
 26 

Я вероятно говорил про таблицу под статьей — Мы в Контакте. В дизайн все встраивается средствами HTML без проблем. А насчет кнопок — я не приверженец идеи обвешивать сайт всем, до чего можно дотянуться ;)

Август 5th, 2021 at 22:26
Татьяна
 27 

Здравствуйте, объясните, пожалуйста, чайнику, где эти места, куда нужно код вставлять???? Ниче не поняла(

Февраль 5th, 2022 at 19:36
Татьяна
 28 

Я вот это имею ввиду: первую часть — в раздел (в коде файла header.php), вторую — в то место, где будет выводиться кнопка «Мне нравится»

Февраль 5th, 2022 at 19:37
 29 

По моему предельно ясно написано ))) открывайте в админке вордпресса (пункт Редактор) файл header.php, находите закрывающий тег и прямо перед ним вставляйте инициирующий код (ту самую первую часть). Потом в том же Редакторе открывайте файл single.php или index.php (файл отдельной статьи или главной страницы) и методом проб и ошибок (если с первого раза не выйдет ;) ) вставляйте вторую часть кода туда, где должна выводиться кнопка. На всякий пожарный не забудьте сохранить исходный код файла до изменений — что бы восстановить если накосячите.

Февраль 10th, 2022 at 09:33
Анна
 30 

Pomogite pozajlusta,ne mogu ustanovit vinzet uchasnikov vkontakte na svoj sait.Y menia sait na joomla. Vstavlala kod v modul html,nichego neotobrozaet i nevivodit

Февраль 17th, 2022 at 16:24
Alice
 31 

спасибо за статью!

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

спасибо)

Февраль 22nd, 2022 at 14:38
Серик
 32 

Спасибо за полезную информацию!

Апрель 4th, 2022 at 08:00
Mixail
 33 

Информеры

Виджет «Настроение рынка»

Виджет «Обзор рынка»

Виджет «Технический анализ»

Виджет «Форекс Аналитика»

Силка

www.ifcmarkets.com/ru/partnership/informers

Июль 11th, 2023 at 09:44

Оставьте свой комментарий к записи 'Как поставить на блог кнопки и виджеты ВКонтакте и Facebook'

Имя (*)
Почта (не публикуется) (*)
Сайт
Комментарий

Subscribe without commenting