• Главная
  • Карта сайта
Не найдено

Установка кнопок Вконтакте, Facebook, Twitter и Google +1

Опубликовано: 06.09.2018

видео Установка кнопок Вконтакте, Facebook, Twitter и Google +1

Как установить на сайт кнопки от социальных сетей

Несколько лет назад были очень популярны сервисы закладок. Сейчас их практически полностью заменили " лайки " социальных сетей. Я долгое время не хотел устанавливать эти кнопки на свой сайт, но, в конце концов, сдался и поставил – сейчас эти кнопки чуть ли не единственный способ получить "социальный" трафик, так как сервисы закладок уже давно никому не интересны. Плагинов для установки этих кнопок навалом, но мне так и не попался на глаза плагин, в котором были бы все эти 4 сервиса. По понятной причине – Вконтакте мало кому известен за пределами России и его поддержку игнорируют. Впрочем, оно и к лучшему – зачем грузить WordPress лишними плагинами, когда установку этих кнопок можно легко сделать вручную?



1 Установка кнопки Вконтакте

Виджет " Мне нравится " от Вконтакте можно получить здесь .

Вы увидите вот такую страницу:

Будьте внимательны! Кнопка Вконтакте единственная кнопка, в коде которой указывается ID подключаемого сайта. На приведенном скриншоте код будет нерабочим до тех пор, пока вы не нажмете на кнопку "Сохранить" – только тогда в коде API_ID будет заменен на ID вашего сайта и код станет рабочим.


Установка кнопок вместо вышедших из стоя липучек .

Устанавливать кнопку надо в 2 этапа, сначала откройте файл header.php вашего шаблона и вставьте вызов скриптов в head секцию. Примерно так:

< head profile = "http://gmpg.org/xfn/11" > ... < script type = "text/javascript" src = "http://userapi.com/js/api/openapi.js?49" >< / script > < script type = "text/javascript" > VK.init({apiId: API_ID, onlyWidgets: true}); < / script > ... < / head >

<head profile="http://gmpg.org/xfn/11"> ... <script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49"></script> <script type="text/javascript"> VK.init({apiId: API_ID, onlyWidgets: true}); </script> ... </head>


Мобильное приложение на Corona SDK / #9 - Добавление кнопки

Понятное дело, что вместо API_ID у вас должен будет указан ID вашего сайта.

Саму кнопку надо устанавливать кодом:

< div id = "vk_like" >< / div > < script type = "text/javascript" > VK.Widgets.Like("vk_like", {type: "button", verb: 1, height: 20}); < / script >

<div id="vk_like"></div> <script type="text/javascript"> VK.Widgets.Like("vk_like", {type: "button", verb: 1, height: 20}); </script>

Не удивляйтесь, если на локальном сервере вместо кнопки вы увидите надпись "Please specify correct base domain name in app":

Это просто глюк, которого не будет, когда вы перенесете сайт к хостеру. Впрочем, чтобы увидеть эту кнопку на локальном сервере достаточно открыть сайт в браузере Opera. Как ни странно, именно в Опере кнопка будет отображена даже на локальном сервере.

2 Установка кнопки Facebook

Виджет " Мне нравится " от Facebook можно получить здесь .

Вы увидите вот такую страницу:

Не указывайте URL вашего сайта! Ссылку надо указывать только, если вы хотите получить кнопку, которая будет "лайкать" конкретную страницу сайта. Выбирайте опции и жмите кнопку "Get Code", чтобы получить код кнопки:

В отличие от кнопки Вконтакте верхний код надо вставлять не в секцию head , а сразу после открытия тега <body> . Как правило, он открывается все в том же файле header.php вашего шаблона.

3 Установка кнопки Twitter

Кнопку " Твитнуть " от Twitter можно получить здесь .

Вы увидите вот такую страницу:

Здесь вообще все просто – выбирайте опции и копируйте указанный код туда, где вы хотите вывести кнопку.

4 Установка кнопки G+

Кнопку " G+ " от Google можно получить здесь .

Вы увидите вот такую страницу:

Здесь тоже все просто – выбирайте опции и копируйте код туда, где должна выводиться кнопка.

Установка этих кнопок достаточно простая и с ней разберется практически любой человек. В конце концов, что может быть сложного в копировании кода кнопок? Однако проблемы начинаются тогда, когда блоггер копирует коды кнопок и получает что-то типа:

Как, собственно, выстроить их в ряд? Это не так сложно, как может показаться. Надо обернуть все кнопки в какой-нибудь див и определить его в styles.css вашего шаблона. Вот, например, код моих кнопок:

< div class = "post-meta-social" > < div id = "vk_like" >< / div >< script type = "text/javascript" > VK.Widgets.Like("vk_like", {type: "button", verb: 1, height: 20}); < / script > < div class = "fb-like" data- action = "recommend" data-font = "tahoma" data-show-faces = "true" data- width = "150" data-layout = "button_count" data-send = "false" >< / div > < div id = "tweet_like" >< a class = "twitter-share-button" href = "https://twitter.com/share" data- lang = "ru" data-via = "wplugins" > Твитнуть < / a> < script > !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); < / script >< / div > < div class = "g-plusone" data- size = "medium" >< / div > < script type = "text/javascript" > window.___gcfg = {lang: 'ru'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); < / script > < / div >

<div class="post-meta-social"> <div id="vk_like"></div><script type="text/javascript">VK.Widgets.Like("vk_like", {type: "button", verb: 1, height: 20});</script> <div class="fb-like" data-action="recommend" data-font="tahoma" data-show-faces="true" data-width="150" data-layout="button_count" data-send="false"></div> <div id="tweet_like"><a class="twitter-share-button" href="https://twitter.com/share" data-lang="ru" data-via="wplugins">Твитнуть</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div> <div class="g-plusone" data-size="medium"></div> <script type="text/javascript"> window.___gcfg = {lang: 'ru'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div>

То есть вызов кнопок у меня обернут дивом post-meta-social , который определен в styles.css таким образом:

.post-meta-social { padding : 0px ; margin : 0px ; margin-top : 10px ; margin-bottom : 10px ; display : inline ; } .post-meta-social #vk_like { float : left ; width : 170px !important ; } .post-meta-social .fb-like { float : left ; width : 150px !important ; } .post-meta-social #tweet_like { float : left ; width : 120px !important ; } .post-meta-social .g-plusone { float : left ; }

.post-meta-social{ padding: 0px; margin: 0px; margin-top: 10px; margin-bottom: 10px; display: inline; } .post-meta-social #vk_like{ float:left; width:170px!important; } .post-meta-social .fb-like{ float:left; width:150px!important; } .post-meta-social #tweet_like{ float:left; width:120px!important; } .post-meta-social .g-plusone{ float:left; }

Этот css код выведет все кнопки в ряд:

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

На сегодняшний день кнопки "лайков" социальных сетей это единственная вещь, которую стоит устанавливать на свой WordPress -блог. Забудьте про тонны сервисов социальных закладок – толку от них сейчас нет вообще.

Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью

rss