- Кнопка на сайт Google+
- Кнопка для сайту «Мені подобається» від вКонтакте.
- Кнопка для сайту «Мені подобається» від Facebook.
- Кнопка на сайт від Twitter
- Вирівнювання кнопок як на beloweb.ru.
Наша взаимовыгодная связь https://banwar.org/
Привіт, дорогі читачі блогу. Сьогодні ми будемо вчитися вставляти на наш сайт кнопки з лічильниками від популярних соціальних мереж таких як Google+, Facebook, вКонтакте і Twitter.
А ось оформляти ми їх будемо як на блозі beloweb.ru. Мені здається що дуже просто, і нічого зайвого. Я думаю, що Вам сподобається.
Ну а тепер поїхали.
Кнопка на сайт Google+
З самого початку нам потрібно перейти ось на цю сторінку . Потім відкриється сторінка на якій ми зможемо вибрати ту кнопку яка найбільше сподобається і відповідно взяти код до неї.
Так як ми робимо за прикладом beloweb.ru ми вибрали стандартну кнопку від Google+ з лічильником. В анотації вибрали bubble, і мову, відповідно російська. Таким чином у нас вийшов ось такий код, який далі ми будемо вставляти на свій сайт:
<! - Place this tag where you want the +1 button to render. -> <div class = "g-plusone"> </ div> <! - Place this tag after the last +1 button tag. -> <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>Кнопка для сайту «Мені подобається» від вКонтакте.
переходимо ось сюди . Тепер для початку потрібно підключити новий сайт. Таким чином створюється окремий id номер саме для Вашого сайту. Для того щоб підключити сайт Вам за все потрібно заповнити три поля - це «Назва сайту», «Адреса сайту» і «Основний домен сайту».
Після всіх цих нескладних кроків можна вибрати сам вид нашої кнопки вКонтакте. У нашому випадку ми вибираємо стандартну кнопку з текстовим лічильником.
Як бачите, що висота кнопки дорівнює 22 пікселя. А назва кнопки - мені подобається. Всі ці значення Ви можете змінити під себе.
І тепер найголовніше - це код для вставки кнопки на сайт. Для кожного сайту він буде не багато змінюватися через id номера про який я говорив вище.
Даний код потрібно вставляти в два етапи в шапку Вашого сайту, і частина коду в те місце на сторінці де Ви хочете, щоб відображалася кнопка.
Код в шапці сайту між <head> і </ head>:
<! - Put this script tag to the <head> of your page -> <script type = "text / javascript" src = "// vk.com/js/api/openapi.js?62"></ script> <script type = "text / javascript"> VK.init ({apiId: Ваш id номер, onlyWidgets: true}); </ Script>Код для відображення кнопки вКонтакте:
<! - Put this div tag to the place, where the Like block will be -> <div id = "vk_like"> </ div> <script type = "text / javascript"> VK.Widgets.Like ( " vk_like ", {type:" button "},); </ Script>Кнопка для сайту «Мені подобається» від Facebook.
Щоб додати це кнопку до себе на сайт, для початку потрібно перейти ось на цю сторінку . Потім ми побачимо наступне:
Тепер давайте розглянемо що означають деякі поля на сторінці налаштування.
URL to Like - в дане поле додається сторінка сайту якій ми хочемо поділитися в Фейсбук. Але в даному випадку це поле ми залишаємо порожнім.
Send Button (XFBML Only) - якщо робити за прикладом як на beloweb.ru, то потрібно прибрати галочку навпроти Send Button. Дана галочка прибирає або додає додаткове поле в кнопці «Відправити».
Width - тут виставляється ширина кнопки.
Show Faces - тут ми можемо вибрати вибрати, чи потрібно відображати аватарки користувачів.
Verb to display - тут ми можемо вибрати текст в кнопці «Мені подобається» або «Я рекомендую».
Color Scheme - Тут можна вибрати оформлення кнопки для світлих або ж темних сайтів.
Font - вибираємо шрифт написів в кнопці.
Після того як ми вибрали налаштування знаходимо кнопку «Get Code» і натискаємо на неї. Далі висвітиться вікно з кодом, його теж потрібно вставляти в два етапи:
Вставляємо код відразу після тега <body>
<Div id = "fb-root"> </ div> <script> (function (d, s, id) {var js, fjs = d.getElementsByTagName (s) [0]; if (d.getElementById (id) ) return; js = d.createElement (s); js.id = id; js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore (js, fjs);} (document, 'script', 'facebook-jssdk')); </ script>Код для відображення кнопки
Вставляємо цей код туди де повинна відображатися кнопка від facebook:
<Div data-send = "false" data-layout = "button_count" data-width = "450" data-show-faces = "true"> </ div>Кнопка на сайт від Twitter
заходимо сюди . І ось відкрилося ось це вікно ;-)
Тут нам можна вибрати кілька різних кнопок, але в даному випадку ми вибираємо першу - Надіслати посилання.
Далі відкриється вікно з настройками. Там ми все залишаємо стандартно крім поля «за допомогою» туди нуно вписати свій нік з Twitter.
Справа будемо знаходиться поле з кодом який потрібно скопіювати і вставити на сайт куди Вам потрібно. Ось як цей код виглядає:
<a href="https://twitter.com/share" class="twitter-share-button" data-via="Ваш нік" data-lang="ru"> Твитнуть </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>Ось і все ми навчилися додавати кнопки. Тепер нам потрібно їх вирівняти і трохи прикрасити. У приклад, як я вже говорив вище візьмемо блог beloweb.ru.
Вирівнювання кнопок як на beloweb.ru.
Для початку я придумав простий клас для стилів CSS - «sochknop». А ось як виглядають самі стилі CSS з цим класом:
CSS
#sochknop {opacity: 0.7; margin-bottom: 20px; margin-left: 55px; margin-top: 45px; -moz-transition: opacity 0.3s 0.05s ease; -o-transition: opacity 0.3s 0.05s ease; -webkit-transition: opacity 0.3s 0.05s ease; } #Sochknop: hover {margin-top: 45px; opacity: 1; } #Sochknop span {-o-margin-top: 40px; padding: 0px 0px; line-height: 10px; float: left; }Як бачите, що для змінної sochknop я додав opacity : і transition . Це додає плавну прозорість для кнопок. Якщо Вам цей не подобається просто видаліть рядок opacity:
Тепер давайте подивимося як це буде виглядати в HTML.
HTML
Приклад коду без кодів кнопок (щоб було зрозуміліше)
<Div id = "sochknop"> <span> Кнопка від Гугл + </ span> <span> Кнопка від вКонтакте </ span> <span> Кнопка від Твіттера </ span> <span> Кнопка від Фейсбуку </ span> < / div>Приклад коду з кодами кнопок:
<Div id = "sochknop"> <span> <! - Помістіть цей тег туди, де повинна відображатися кнопка +1. -> <g: plusone> </ g: plusone> <! - Помістіть цей виклик функції відображення в відповідне місце. -> <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> </ span> <span> <! - Put this div tag to the place, where the Like block will be -> <div id = "vk_like"> </ div> <script type = "text / javascript "> VK.Widgets.Like (" vk_like ", {type:" button "}); </ Script> </ span> <span> <a href = "https://twitter.com/share" class = "twitter-share-button" data-via = "Ваш ник" data-lang = "ru" > Твитнуть </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> </ span> <span> <div class =" fb-like "data-send =" false "data-layout =" button_count "data-width =" 150 "data-show- faces = "true"> </ div> </ span> </ div>Друзі розташування кнопок Ви можете змінювати як Вам зручно.
Якщо Вам буде що-небудь не зрозуміло, питайте в коментарях. До зустрічі :-)
Js?