Установка кнопок Вконтакте, Facebook, Twitter и Google +1
Опубликовано: 06.09.2018
Несколько лет назад были очень популярны сервисы закладок. Сейчас их практически полностью заменили " лайки " социальных сетей. Я долгое время не хотел устанавливать эти кнопки на свой сайт, но, в конце концов, сдался и поставил – сейчас эти кнопки чуть ли не единственный способ получить "социальный" трафик, так как сервисы закладок уже давно никому не интересны. Плагинов для установки этих кнопок навалом, но мне так и не попался на глаза плагин, в котором были бы все эти 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 -блог. Забудьте про тонны сервисов социальных закладок – толку от них сейчас нет вообще.
