Посилання в Stories почали з'являтися досить давно, але використовувати їх могли тільки офіційні акаунти. У травні з'явилася можливість додавати посилання в рекламі з плейсментом в Історії, проте все це були платні механізми. Сьогодні мені почали надсилати скріншоти того, що Instagram почав поступово дозволяти звичайним користувачам додавати активні посилання на сайти в своїх Історіях.
Як додати посилання в свою Історію в Інстаграм?
Ця функція доступна не всім акаунтів в Instagram! Сьогодні посилання в Stories доступні тільки:
- Для верифікованих акаунтів Instagram
- Для профілів, у яких більше 10.000 передплатників.
Причому посилання може з'явитися не відразу після того, як ви отримали 10.000 передплатників. Накрутка ботів до 10k передплатників працює не завжди. Плюс, накрутити ботів так, щоб вони не відписалися сьогодні складно, а при падінні числа передплатників аккаунта до 9.999 і менш можливість прикріплювати посилання зникне.
Щоб перейти по активному посиланню з Історії користувач повинен зробити «свайпа вгору». Так як народ ще не звик до таких можливостей, я б рекомендував додатково акцентувати увагу на засланні різними посиланнями і закликами до дії. Ну ви ж дорослі хлопці, самі розумієте про що йдеться, кого я тут взагалі вчу.
Про появу активних посилань в Ю Я я вже писав, але в блог інформацію не зносив. Як і будь-яке інше оновлення, поки доступні обраної і випадкової частини користувачів.
Останні оновлення роблять Instagram ще більш цікавим для ecommerce і малого бізнесу, битва за передплатників піде ще спекотніше. Сподіваюся тільки на те, що Instagram буде активно боротися зі спамом посиланнями в Ю Я.
Я наголошував на важливості SMO (Social Media Optimization) в просування сайту. Тепер поговоримо безпосередньо про те, як зробити соціальну оптимізацію на своєму сайті, а точніше як додати соціальні кнопки популярних мереж на сайт.
Для початку покажу як це власне кажучи повинно виглядати на сайті. На багатьох блогах і новинних сайтах внизу після будь-якої статті можна побачити щось подібне:
Це і є соціальні кнопки, завдяки яким досягається SMO, а далі і соціальна активність. Ця стаття присвячена питанню де взяти код цих соц. кнопок і як правильно встановити їх до себе на сайті. Розглянемо для початку установку Google+.
1. Додаємо на сайт кнопку Google+
2. Додаємо на сайт кнопку "Мені подобається" від Вконтакте і Facebook
2.1. Мені подобається від FaceBook
Почнемо з отримання коду кнопки для Facebook. Для цього треба зайти на цю сторінку: https://developers.facebook.com/docs/plugins/like-button. Ви повинні побачити наступну картину:
Справа вгорі відображається як буде виглядати кнопка у Вас на сайті. Розберемося з параметрами, які можна задати:
1. URL to Like
Це необов'язковий параметр. Якщо залишити поле порожнім, то у кожної сторінки буде свій індивідуальний лічильник лайків. Якщо вписати туди якийсь конкретний адресу URLa, то лічильник буде єдиним (лайки підсумовуються з усіх сторінок цього сайту).
2. Send Button
Додати або прибрати кнопку для відправки повідомлень. Я рекомендую прибрати цю кнопку, тому що наша мета поставити просто кнопку "мені подобається", хоча можливо у вас зовсім інші цілі.
3. Layout Style
Стиль відображення кнопки. Особисто мені найбільше подобається standard.
4. Width
Ширина кнопки в пікселях. Я ставлю зазвичай не більше 100 пікселів.
5. Verb to display
Що буде відображено на кнопці: "мені подобається" або "я рекомендую". Зазвичай я вибираю перший варіант (стоїть за умовчанням), оскільки це більш дієвий спосіб мотивувати користувача поставити лайк.
6. Color Scheme
Колірна гамма: або біла, або чорна.
7. Font
Просто завдання шрифту для напису "мені подобається".
Після завдання параметрів наживаємо на кнопку "get code" і розміщуємо на сайті. Звичайний код кнопки для facebook:
<-- цю частину коду розмістіть в кінці сторінки--> <-- эту часть кода нужно разместить в месте отображения: -->
2.2. Мне нравится от ВКонтакте
Теперь рассмотрим как получить код кнопки "мне нравится" от ВКонтакте. Для этого перейдите на следующую страницу: https://vk.com/dev . У Вас должна открыться следующая страница:
Сначала нужно будет добавить новый сайт. Для этого выберите из выпадающего меню "сайт/приложение" пункт подключить новый сайт:
После добавления нового сайта сохраните его. Теперь выберите из выпадающего меню нужный сайт. Далее следуют небольшое число параметров: "вариант кнопки", "высота", "название кнопки" - это все настраивается под Ваш вкус. В конце будет код для кнопки:
3. Добавляем на сайт кнопку tweet
Как и в предыдущих случаях, для начала перейдите в место получения и настройки кнопки.
От автора: приветствую вас. Сегодня социальные сети развились до такого уровня, что в них зарегистрировано в общей сложности более 3 млрд людей. Потенциально это очень мощная аудитория, поэтому сегодня я вам расскажу, как добавить кнопки социальных сетей на сайт.
Добавление на сайт на WordPress
Начну с того, что самым простым способом, если у вас WordPress, является просто установить какой-нибудь плагин для этого дела. Какой? Я, например, пользовался Juiz Social Post Sharer. А вообще, просто введите в поиске плагинов слово social и просмотрите, что там есть. Преимущество тут только в том, что вам, вероятно, не придется ничего настраивать.
Яндекс тоже разработал страницу, на которой вы можете настроить и поставить себе кнопки. На этой страничке вы можете выбрать нужные сервисы (а их примерно 25). Справа вы можете выбрать внешний вид блока. Это могут быть счетчики, которые будут показывать, сколько раз на кнопки нажали пользователи. Это, в свою очередь, поможет вам отслеживать, полезен ли материал читателям.
JavaScript. Быстрый старт
Естественно, не нужно использовать все три варианта, лучше какой-то один. Хотя я видел сайты, где блок был и в начале, и в конце страницы.
Теперь вам нужно найти файл с кодом, который выводит статьи. В wordpress, например, он обычно называется single.php или подобным образом. Итак, если вам нужно поставить блок с кнопочками после статьи, ищем строчку the_content. Именно за ней можно вставить код. Вам очень поможет, если разработчик вашего шаблона делал комментарии в коде.
Редактировать файлы сайты можно некоторыми способами. Например, сделать это напрямую через админку движка (внешний вид — редактор). В этом случае код не подсвечивается, поэтому ориентировать в нем не так удобно. Другой способ – через ftp. Подключитесь к сайту с помощью ftp-клиента, перейдите в wp-content – themes. Тут нужно найти тот шаблон, который является активным у вас в данный момент. Заходим в него и находим тот самый single.php или ищем что-то похожее по названию.
В самом файле с кодом найдите строчку the_content с помощью поиска (Ctrl + F). Вставьте где-нибудь после нее этот код.
Комментарии это то, что на этом скриншоте выше выделяется зеленым цветом. Как видите, разработчик явно указал, что в этом месте выводиться сам текст статьи. Это отлично, просто вставьте код сразу после статьи и получите желаемый результат.
Кнопки от Pluso
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Вы можете выбрать стиль кнопок, настроить их фон, положение и размер. Также можно выбрать иконки со встроенным счетчиком. А еще одним преимуществом кнопок от Pluso является их потрясающий внешний вид и возможность встроить их в практически в любой дизайн.
Когда все настроено, просто копируем код и вставляем его в том месте, где хотим увидеть соответствующий блок.
Еще один вариант – Share42
Если предыдущие варианты вам чем-то не понравились, есть другой способ, как поставить кнопки социальных сетей на сайт. Это сервис share42.com. Назван так, наверное, потому, что на момент создания в нем было 42 кнопки социальных сервисов, хотя на данный момент их 43.
Описывать процесс подробно не буду, потому что на сайте уже все оформлено в виде пошаговой инструкции. Дизайн этих иконок вы поменять не можете, а только размер. Впрочем, смотрятся они недурно.
Иконки, которые вам нужно, нужно выбрать, кликнув по ним мышкой. Отдельно хочу отметить наличие таких интересных возможностей, как добавление в избранное браузера, ссылка на rss и кнопка «Наверх».
Далее вы можете выбрать тип панели: горизонтальная или вертикальная? И если выбрана вторая, то количество кнопок можно ограничить. Кодировку я рекомендую оставить UTF-8. Вы можете также добавить иконку самого сервиса в комплект кнопок, чтобы пользователи с вашей странички могли перейти на него и установить себе тоже эти кнопки.
Также если вы планируете добавить иконку rss, то обязательно нужно указать адрес вашего фида, а если хотите показывать количество нажатий по кнопкам, должны быть отмечены две последние галочки.
Ниже есть 2 кнопки. Первая позволяет взглянуть, как будут выглядеть социальные кнопки, которые вы настроили. С помощью второй скачивается скрипт. Его нужно загрузить через ftp к себе на сайт в корневую папку.
Следующим шагом укажите на странице сервиса путь к этой папке. Зачастую достаточно заменить site.com на ваше доменное имя. Все, остается вставить код, выбрав перед этим cms, на которой работает ресурс. Куда вставлять код вы уже должны понимать, я надеюсь.
Я не сомневаюсь, что существует еще парочку нормальных сервисов, где можно сделать социальные кнопки, а также есть просто масса скриптов и плагинов, которые их добавляют. Сегодня я перечислил вам наиболее лучшие, на мой взгляд, варианты.
Что ж, сегодня мы с вами научились добавлять кнопки социальных сетей и сервисов в свой интернет-проект. Теперь ваши полезные материалы могут быть автоматически распространены по социальным сетям вашими благодарными читателями. А у меня на этом все.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Здравствуйте, уважаемые читатели блога сайт. Как вы уже, наверное, догадались из заголовка, речь пойдет про, так называемые, социальные кнопки, которые очень серьезно могут помочь статьям на вашем сайте привлечь, при удачном стечении обстоятельств и высоком качестве самой статьи, большое количество посетителей с социальных сетей и сервисов.
Социальные сигналы так же учитываются и поисковыми системами при ранжировании вашего сайта. Большое количество расшариваний в качественные аккаунты в Твиттере, Google+, Фейсбуке (возможно, что Вконтакте и другие сети тоже учитываются) может позволить вам подняться на определенное число шажков повыше и, возможно, войти в Топ и удержаться там, если поведенческие факторы не подкачают.
Вообще, сервисов предоставляющих скрипты (кнопки) расшаривания контента в социальные сети в интернете очень много, но не всем из них стоит доверять (запросто или еще как-то вас использовать по нехорошему). Да и просто «подвесить сайт» они способны при не очень грамотном размещении их кода и не очень мощных вычислительных возможностях их серверов. Хотя есть и приличные варианты, свободные от данных недостатков, и их я перечислил в конце этой публикации.
Также имеется возможность отображения на кнопках числа расшариваний в отдельно взятую социальную сеть. Причем учитываются все посты, а не только те, что были сделаны с помощью этого блока (подгружаются данные по API). Поддерживаются правда не все социальные сети (только facebook, Google+, Мой Мир, Одноклассники.ru, ВКонтакте), но большинство основных. Печально, что недавно из этого списка был исключен Твиттер, т.к. он перестал предоставлять эти данные по API.
Например, тут можно укоротить тайтлы для отдачи в Твиттер, ибо там имеется ограничение на их длину (как это сделать читайте ниже), настроить отображение или не отображение счетчиков расшариваний, задать направления раскрывания меню с дополнительными кнопками соцсетей и многое другое. В общем, покопайтесь и посмотрите.
Вообще, в сравнении с родными кнопками расшаривания, которые предлагают установить на сайте сами социальные сети (об этот читайте чуть ниже), блок Яндекса выигрывает в скорости загрузки, компактности и простоте установки и настройки. Например, у меня раньше официальная кнопка Twitter зачастую не подгружалась из-за проблем с их сервером, поэтому по долгу не подгружалось сделанное на Джава скрипт левое меню моего блога. Возможно, что сейчас эта проблема решена, но много скриптов завсегда будет хуже, чем один в плане оптимизации скорости загрузки сайта.
Проблемы с доступностью у Яндекса, думаю, вряд ли возникнут, ибо это хорошо зарабатывающая коммерческая организация, довольно трепетно относящаяся к своему имиджу. К тому же, если у вас , то вы сможете отслеживать статистику кликов по этим кнопочкам, что может быть полезным.
Кроме блока с иконками обычного размера можно сделать блок со счетчиками, а также Яндекс предлагает добавить выпадающее меню с дополнительными социалками, которое будет прятаться под спойлером, расположенном после отображения нужного числа кнопок основных соцсетей (типа Вконтакте, МойМир, ):
Если захотите добавить счетчики к кнопкам в этом блоке (с выпадающим меню), то просто на сайте вставьте к его код (между тегами Div) еще один атрибут: data-counter="« и все. Как я говорил, проще некуда. Счетчики можно будет добавить и к маленьким кнопкам, которые рассмотрены чуть ниже:
Data-services="vkontakte,odnoklassniki,facebook,gplus,twitter,moimir,blogger,digg,reddit,linkedin,lj"
Также можете заменить все иконки на их уменьшенные миниатюры кнопок , что лично мне пригодилось при вставке блока в верхнюю часть всех статей этого блога:
У першій частині в відкриває і закриває тегах SCRIPT наведено шлях до скрипта, який буде довантажувати з сервера Яндекса, а у другій частині розміщений безпосередньо код вставки, який потрібно буде розмістити в тому місці вашого шаблону, де цей блок повинен буде відображатися.
Як вставити соціальні кнопки від Яндекса на сайт
Тому код виклику скрипта я вставляю разом з блокм Div в тому місці, де необхідно відобразити кнопки соцмереж. Ну, а щоб його завантаження не вплинула на швидкість завантаження основної сторінки, я за порадою, даним в документації Яндекса, додав в нього атрибут async \u003d "async" ініціюючи тим самим його асинхронну завантаження скрипта:
Проблема може виникнути з тим, щоб знайти серед безлічі файлів движка свого сайту той, який відповідає за формування самій нижній частині Html коду з закриває тегом / BODY або ж того, який формує Head. А так же знайти місце в файлах теми оформлення, де потрібно вставити фрагмент коду в тегах Div (для розміщення самих кнопок).
В принципі, що в Вордпресі, що в Джумла це робиться в одному з файлів використовуваної теми оформлення. Оскільки цей блог працює на Ворпрессе, то за нього і скажу.
Якщо ви працюєте з WordPress, То для вставки коду виклику скрипта вам буде потрібно відкрити на редагування файл footer.php (там знайдете закриває тег Body або header.php (там знайдете теги Head) з папки:
/wp-content/themes/названіе_папкі_с_іспользуемой_темой_оформленія/footer.php
Тепер залишиться тільки вставити в потрібне місце шаблону вашого сайту або ж прямо до статті другу частину коду соціальних кнопок Яндекса, що відповідає за місце розташування блоку з кнопками на сторінках сайту:
До речі, ще раз зазначу, якщо ви захочете видалити будь-яку кнопку з цього блоку, то не обов'язково знову йти в конструктор на сайті Яндекса. Можна буде просто прибрати її запис з цього списку (разом з коми йде після неї, наприклад, «vkontakte,»). Ну ви зрозуміли...
Ну, і також ви можете змінювати позиціонування кнопочок всередині блоку за допомогою CSS.
Li.ya-share2__item (background: none! Important; padding: 0 7px 0 7px! Important;)
Оскільки у мене використовується адаптивна під мобільні пристрої верстка, то я для пристроїв з малим розміром екрану дописав схожу рядок, де поставив трохи менші відступи, але це вже деталі:
Li.ya-share2__item (padding: 0 3px 0 3px! Important;)
Над статтею я просто вставив другу частину коду з маленькими кнопками, не проводячи повторного виклику скрипта (один раз на сторінку буде досить):
Напевно, ви помітили в наведеному коді таку конструкцію:
Data-title: twitter \u003d ""
Що це? Справа в тому, що мої довгі тайтли завжди викликали проблеми з додаванням повідомлень в Твіттер, Тому мені раніше доводилося ставити оригінальну кнопку від цієї соціальної мережі і трошки її допрацьовувати, як показано трохи нижче. Зараз розробники Яндекса зробили напівавтоматичне обрізання віддається в Твіттер повідомлення (раніше було автоматичне). Тобто я додаю в код атрибут data-title: twitter, де всередині розміщую конструкцію, яка відповідає за обрізання title (заголовка статті) до потрібної Твіттеру довжини.
Робиться це за допомогою функції з папки з вашою темою оформленія- сама функція приведена по посиланню і виглядає приблизно так:
Function trim_title_chars ($ count, $ after) ($ title \u003d get_the_title (); if (mb_strlen ($ title)\u003e $ count) $ title \u003d mb_substr ($ title, 0, $ count); else $ after \u003d ""; echo $ title. $ after;)
Загалом, десь так в тому аспекті, що стосується мого блогу на WordPress. В Joomla для вставки цього блоку, напевно, простіше за все буде скористатися модулем Довільного Html коду, розташувавши його в позиції шаблону де-небудь відразу під текстом статті.
Офіційні кнопки соціальних мереж
Багато соціальні мережі самі надають всім бажаючим можливість завантажити код кнопки, і часто при цьому ви можете навіть налаштувати її зовнішній вигляд і функціональність. ви, наприклад, зможете налаштувати і отримати код скрипта для розшарювання поста в.
Налаштувань, як ви можете бачити, досить багато, і крім зовнішнього вигляду кнопки Вконтакте ви так само можете налаштувати відображення лічильника, що показує кількість расшаріваніє.
кнопочку Facebook можна буде отримати. Вона дуже гнучко настроюється під ваші потреби, і нехай вас не бентежать англійські написи на ній, бо при розміщенні її коду на вашому сайті написи автоматично переведуться на російську мову.
В поле з урлом краще нічого не вставляти, тоді расшарівать буде та сторінка, на якій розташований цей код.
Вийде приблизно так:
Вийде приблизно так:
Ну і, звичайно ж, не можу не згадати про офіційну кнопку Twitter, Яка з'явилася відносно недавно. Її конструктор розташований. Природно, що в ній передбачена можливість підрахунку числа ретвітів і у вас буде можливість задати її зовнішній вигляд:
Отриманий код я тоді трохи модернізував за описаним вище принципом, щоб мої довгі тайтли обрізалися і не створювали додаткових проблем користувачам при расшаріваніє.
Інші варіанти отримання кнопок соцмереж для сайту
Як я вже говорив, всіляких онлайн-сервісів, де можна безкоштовно взяти скрипт кнопок соціальних мереж і поставити до себе на сайт багато. Всі вони переслідують різні цілі: «від душі» (як у випадку сервісу Дімокса), для збору даних потрібних для роботи інших сервісів (як у випадку з АпТуЛайк) або для наживи (віруси та інші незаконні махінації з наявними у вас на сайті трафіком) . Є й просто платні рішення, наприклад, як згаданий нижче плагін.
Важко сказати, що з цього різноманіття вибрати. Скажу пару слів про те, що довелося самому спробувати, і про що вже писав раніше.
Загалом, самі дивіться, порівнюйте і вибирайте.
Удачі вам! До швидких зустрічей на сторінках блогу сайт
Вам може бути цікаво
Створюємо для блогу на WordPress кнопки додавання в соціальні мережі і закладки (без плагінів і скриптів) Лайклі - автономні соціальні кнопки для сайту 
Кнопки для мобільних сайтів від Uptolike + можливість ділитися посиланнями в месенджерах UpToLike - конструктор соціальних кнопок для вашого сайту з розширеним функціоналом 
Uptolike Share Buttons - безкоштовний плагін по додаванню кнопок соціальних мереж в WordPress 
uSocial - огляд нового сервісу соціальних кнопок для вашого сайту 
Залучення трафіку відвідувачів на свій сайт методами SMO \u200b\u200b(форуми, соціальні мережі, групи Subscribe) Як додати на свій сайт блок з кнопками, провідними на ваші сторінки або групи в соціальних мережах, а так само на RSS стрічку 
Google + 1 і Мені подобається від Вконтакте і Facebook - як додати кнопки лайків в свій сайт
Перед тим, як заглиблюватися в кодинг, давайте розглянемо і звернемо увагу нате ресурси, які вже нам надає глобальна павутина. До слова їх дуже багато ми ж розглянемо два найбільш популярних.
Ще один сервіс гідний нашої уваги -, являє собою такий же простий конструктор, ось тільки кнопок з сервісами та мережами набагато більше, деякі з яких, зізнатися, я побачив вперше. Головна відмінність від «Яндекс.Технологій» - ми отримуємо повністю згенерований скрипт, який буде відпрацьовуватися НЕ хмарно, а безпосередньо на нашому сервері.
Здавалося б, при наявності настільки чудових рішень нікому і в голову не прийде знову «винаходити велосипед»? А ні, написаний кимось скрипт гарний рівно настільки, наскільки нам самим лінь над ним морочитися. Звичайно, він буде справно працювати і виконувати свої функції, але - це універсальне рішення, написане для загальної маси сайтів, тобто воно не враховує наших особистих маленьких потреб і умовностей.
По-перше: дизайн кнопок фактично залізний. Так він пізнаваний і надається самими соцмережі, але тільки нашим потребам не відповідає. Ну ось, у кнопочки краї закруглені, а дизайн нашого сайту вимагає, щоб кнопка була квадратної, що робити? - Брати спрайт і перемальовувати! Хто пробував, той знає - справа невдячна: заміна однієї кнопки чревата п'ятьма-шістьма пробами «правильно» розмістити її на спрайт. І це тільки заміна однієї / кількох кнопок, а якщо сайт в готичному стилі і всі кнопки потрібні темні?
По-друге: в надійності Яндекса сумніватися не доводиться, але кнопки, на відміну від лічильника метрики, чомусь вантажаться важко, і не рідко відбувається видиме їх запізнювання від основного контенту сторінки. Особливо це помітно при хорошому високошвидкісному з'єднанні, коли сторінка вилітає фактично миттєво, а у вас кілька блоків з кнопками.
По-третє: для тіста згенеруйте скрипт на share24 - він великий. Чи всі з наданих рядків коду так вже нам потрібні? - Не думаю.
Тепер перейдемо до самого написання скрипта, він буде ділитися на три частини: HTML, CSS і, власне, сам код, написаний на JavaScript. Додатково я буду використовуватися для зручності бібліотеку jQuery.
Підключаємо всі необхідні файли:
Тепер додаємо в файл share.js скрипт, він буде виглядати таким образам:
Var share \u003d (twitter: function ($ this) (var data \u003d share.data ($ this); if (data) (var url \u003d "http://twitter.com/share?"; Url + \u003d "text \u003d "+ encodeURIComponent (data.text); url + \u003d" & url \u003d "+ encodeURIComponent (data.url); url + \u003d" & hashtags \u003d "+" "; url + \u003d" & counturl \u003d "+ encodeURIComponent (data.url); share.popup (url);); return false;), vk: function ($ this) (var data \u003d share.data ($ this); if (data) (var url \u003d "http://vkontakte.ru/ share.php? "; url + \u003d" url \u003d "+ encodeURIComponent (data.url); url + \u003d" & title \u003d "(! LANG: + encodeURIComponent (data.title); url + \u003d"&description=" + encodeURIComponent(data.text); url += "&image=" + encodeURIComponent(data.img); url += "&noparse=true"; share.popup(url); }; return false; }, facebook: function($this){ var data = share.data($this); if(data){ var url = "http://www.facebook.com/sharer.php?s=100"; url += "&p=" + encodeURIComponent(data.title); url += "&p=" + encodeURIComponent(data.text); url += "&p=" + encodeURIComponent(data.url); url += "&p=" + encodeURIComponent(data.img); share.popup(url); }; return false; }, data: function($this){ if($this){ return $.parseJSON($this.parent("div").attr("data-share-data")); }; return false; }, popup: function(url){ window.open(url, "", "toolbar=0, status=0, width=626, height=436"); return false; } }; !}
Додаємо розмітку на сторінку:
Структура досить проста, а саме обгортка з класом share, далі йде div з атрибутом data-share-data, про який було згадано вище. Рядок формується з чотирьох параметрів зі своїми значеннями.
- url - адреса яким ми ділимося;
- img - картинка, якщо вона не потрібна вказуємо порожній рядок;
- title - заголовок сторінки;
- text - потрібне нам опис.
Усередині div лежать самі кнопки з навішеним на них подією onclick. По кліку буде викликатися один з методів описаних вище.
Залишилося тільки додати кнопок людський вигляд і додати CSS:
Share (background-color: #ececec; display: inline-block; padding: 7px 5px;) .share div: after (content: ""; display: block; clear: both; height: 0;) .share div: first -child (margin-left: 0;) .share .twitter, .share .vk, .share .facebook (background-image: url (share.png); margin-left: 7px; border-radius: 3px; height: 24px; width: 24px; float: left; cursor: pointer;) .share .twitter (background-color: # 00aced; background-position: 0 -61px;) .share .twitter: hover (background-color: # 008abe; ) .share .vk (background-color: # 48729e; background-position: 0 -32px;) .share .vk: hover (background-color: # 3a5b7e;) .share .facebook (background-color: # 3c5a98; background -position: 0 0;) .share .facebook: hover (background-color: # 30487a;)
У підсумку після додавання CSS кнопки виходити виду:
На цьому написання скрипта закінчено, в прикладі я використовував всього три соціальних мережі, якщо потрібно підключити інші, то це не складе великих труднощів. Для цього буде потрібно додати новий метод в об'єкт share, не забуваючи прописати також додатково HTML і CSS. Посилання, за якими відбувається репост в соцмережі можна отримати двома способами:
- Скористатися API соціальної мережі, що не завжди допомагає;
- Виколупати у аналогічного сервісу, скориставшись firebugом або іншим інструментом для веб-розробника.
