Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.

Ralex. We do the work.
На рынке с 1999го года. Средняя ценовая категория. Ориентация на эффективность решений.
Ознакомтесь с нашим портфолио
Узнайте больше о услугах
Свяжитесь с нами:
E-mail: [email protected]
Tel: (044) 587 - 84 - 78
Custom web design & дизайн и разработка сайта "под ключ"
Креативный, эффективный дизайн. Система управления сайтом (СУС).
Custom flexible разработка систем электронной коммерции
Система e-commerce разрабатывается под индивидуальные потребности. Гибкая функциональность.
Search Engine Optimzation & оптимизация под поисковые системы (SEO)
Постоянная оптимизация и мониторинг сайта в поисковых системах. Достигаем результата быстро и эффективно
Custom logo design & дизайн логотипа и фирменного стиля
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.
профессиональная рекламная фотография
креативно, смело, качественно
Custom logo design & рекламный креатив. дизайн рекламы
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.

Як поставити кнопки на сайт від Facebook, Google+, Twitter і вКонтакте за прикладом блогу beloweb.ru

  1. Кнопка на сайт Google+
  2. Кнопка для сайту «Мені подобається» від вКонтакте.
  3. Кнопка для сайту «Мені подобається» від Facebook.
  4. Кнопка на сайт від Twitter
  5. Вирівнювання кнопок як на 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?
Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    https://banwar.org/
    Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.


    Наши клиенты
    Клиенты

    Быстрая связь

    Тел.: (044) 587-84-78
    E-mail: [email protected]

    Имя:
    E-mail:
    Телефон:
    Вопрос\Комментарий: