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

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.

Привіт, дорогі читачі блогу. Сьогодні ми будемо вчитися вставляти на наш сайт кнопки з лічильниками від популярних соціальних мереж таких як 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?
Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    Подготовка к ЕГЭ по математике
    Статьи Опубликовано: 05.10.2017 Подготовка к ЕГЭ по МАТЕМАТИКЕ. 1 часть. Эффективный курс подготовки. Вы находитесь на сайте www.ege-ok.ru - Подготовка к ЕГЭ по математике. Меня зовут Инна Владимировна

    Куда поступить с обществознанием, русским и математикой
    Статьи Опубликовано: 06.10.2017 Сдача ЕГЭ. Куда поступать? Обществознание считается одним из самых популярных предметов, которые выпускники сдают на ЕГЭ. Ввиду высокого рейтинга дисциплины Рособрнадзор

    Сайт Майер Елены - ЕГЭ по математике
    Планируется проведение двух отдельных экзаменов – базового и профильного. Кому сдавать базовый ЕГЭ по математике? Базовый ЕГЭ организуется для выпускников, изучающих математику для общего развития

    ГДЗ решебник по математике 4 класс
    Извините, тут пока ничего нет ((( Решебник по математике 4 класс (Истомина Н.Б.) – не просто возможность быстро выполнить домашнее задание для учащегося, но и способ разобраться в труднорешаемых задачах.

    ГДЗ по математике 1 класс Самсонова самостоятельные работы
    Решебник по математике за 1 класс автора Самсоновой Л.Ю. 2012 года издания. Данное пособие предлагает готовые решения на разнообразные упражнения, направленные на активизацию всего учебного процесса. Здесь

    Для этой работы нужна математика
    Слотов: 956 Рулеток: 7 Лицензия: Pragmatic Play, Microgaming, ELK, Yggdrasil, Habanero, Amatic, Isoftbet, Netent, Rival, Igrosoft, Quickspin. Игры: Автоматы, Покер, Рулетки. Всего 963 Отдача: 98% Бонус

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

    Функция экспонента в Excel
    Одной из самых известных показательных функций в математике является экспонента. Она представляет собой число Эйлера, возведенное в указанную степень. В Экселе существует отдельный оператор, позволяющий

    ЕГЭ по математике 2018
    ЕГЭ по математике, наравне с русским языком , – обязательный экзамен для сдачи выпускниками 11-х классов. По статистике он самый сложный. Мы предлагаем ознакомиться с общей информацией об экзамене и

    Секреты эффективной и быстрой подготовки ко второй части ОГЭ по математике.
    Уважаемые девятиклассники, настоящие или будущие! Часто от вас приходится слышать следующие вопросы. Легко ли подготовиться к заданиям второй части ОГЭ по математике? Сколько для этого понадобится


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

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

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

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