Länkar i berättelser började dyka upp under lång tid, men endast officiella konton kunde använda dem. I maj blev det möjligt att lägga till länkar i placeringsannonser i historik, men alla dessa var betalningsmekanismer. Idag började de skicka mig skärmdumpar av hur Instagram började gradvis tillåta vanliga användare att lägga till aktiva länkar till webbplatser i sina berättelser.
Hur lägger du till en länk till din Instagram-berättelse?
Den här funktionen är inte tillgänglig för alla Instagram-konton! Idag finns länkar i berättelser endast tillgängliga:
- För verifierade Instagram-konton
- För profiler med mer än 10 000 prenumeranter.
Dessutom kanske länken inte visas omedelbart efter att du fått 10 000 prenumeranter. Inpackning av bots till 10 000 abonnenter fungerar inte alltid. Dessutom är det svårt att avveckla bots så att de inte avbokar idag, och om antalet kontoneabonnenter sjunker till 9.999 eller mindre försvinner möjligheten att koppla en länk.
För att följa den aktiva länken från Historik måste användaren göra "Swipe Up". Eftersom människor ännu inte är vana vid sådana möjligheter, rekommenderar jag dessutom att fokusera på länken med olika länkar och uppmaningar till handling. Tja, ni är vuxna, ni förstår själv vad det handlar om, vem jag undervisar här alls.
Jag skrev redan om utseendet på aktiva länkar i Yandex.Direct, men jag kunde inte få information från bloggen. Som alla andra uppdateringar är de valda och slumpmässiga delarna av användare tillgängliga hittills.
Senaste uppdateringar gör Instagram ännu mer intressant för e-handel och små företag, kampen om prenumeranter kommer att bli ännu varmare. Jag hoppas bara att Instagram aktivt kommer att hantera skräppostlänkar i Yandex.Direct.
Jag noterade vikten av SMO (Social Media Optimization) för marknadsföring av webbplatser. Nu pratar vi direkt om hur man gör social optimering på din webbplats, eller snarare om hur man lägger till sociala knappar för populära nätverk på webbplatsen.
Först ska jag visa dig hur det ska se ut på webbplatsen. På många bloggar och nyhetssidor nedan, efter alla artiklar, kan du se något liknande:
Det här är de sociala knapparna, tack vare vilken SMO uppnås och sedan social aktivitet. Den här artikeln ägnas åt frågan om var du kan få koden för dessa sociala tjänster. och hur du installerar dem på din webbplats på rätt sätt. Överväg att installera Google+ till att börja.
1. Lägg till en Google+ knapp på webbplatsen
2. Lägg till en gilla-knapp från Vkontakte och Facebook till sajten
2,1. Jag gillar det från FaceBook
Låt oss börja med att få knappkoden för Facebook. För att göra detta, gå till den här sidan: https://developers.facebook.com/docs/plugins/like-button. Du bör se följande bild:
Överst till höger visar hur knappen på din webbplats kommer att se ut. Vi kommer att ta itu med parametrarna som kan ställas in:
1. URL att gilla
Detta är en valfri parameter. Om du lämnar fältet tomt kommer varje sida att ha sin egen individuella räknare. Om du anger en specifik URL-adress, kommer räknaren att vara densamma (gillar summeras från alla sidor på denna webbplats).
2. Skicka-knappen
Lägg till eller ta bort en knapp för att skicka meddelanden. Jag rekommenderar att du tar bort den här knappen eftersom vårt mål är att sätta precis "som" -knappen, även om du kanske har helt andra mål.
3. Layoutstil
Knappvisningsstil. Personligen gillar jag standard mest.
4. Bredd
Knappens bredd i pixlar. Jag ställer vanligtvis inte mer än 100 pixlar.
5. Verb att visa
Vad som kommer att visas på knappen: "Jag gillar" eller "Jag rekommenderar". Vanligtvis väljer jag det första alternativet (som standard), eftersom detta är ett mer effektivt sätt att motivera användaren att gilla.
6. Färgschema
Färger: antingen vitt eller svart.
7. Font
Bara jobbet med teckensnittet för inskriptionen "Jag gillar det."
När du har ställt in inställningarna, klicka på knappen "få kod" och placera den på webbplatsen. Den vanliga knappkoden för facebook:
<-- placera denna del av koden i slutet av sidan--> <-- эту часть кода нужно разместить в месте отображения: -->
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"
Также можете заменить все иконки на их уменьшенные миниатюры кнопок , что лично мне пригодилось при вставке блока в верхнюю часть всех статей этого блога:
I den första delen visar öppnings- och stängnings SCRIPT-taggar sökvägen till skriptet som kommer att laddas ner från Yandex-servern, och den andra delen innehåller själva infogskoden, som måste placeras på platsen för din mall där detta block ska visas.
Hur man sätter in sociala knappar från Yandex på sajten
Därför sätter jag in skriptsamtalskoden tillsammans med Div-blocken där du behöver visa de sociala nätverksknapparna. Tja, så att det inte påverkar laddningshastigheten på startsidan, tilllade jag, på råd som ges i Yandex-dokumentationen, attributet async \u003d "async" till det och därmed initierade det asynkron skript laddning:
Ett problem kan uppstå när du hittar bland de många filerna på din webbplats på den som är ansvarig för att generera hela botten av Html-koden med den stängande taggen / BODY eller den som bildar huvudet. Och hitta också en plats i temafilerna där du behöver infoga ett kodfragment i Div-taggarna (för att placera själva knapparna).
I princip, det i Wordpress, det i Jumla, görs detta i en av filerna som används temadesign. eftersom den här bloggen fungerar på Vorpress, jag säger för honom.
Om du arbetar med Wordpress, för att infoga koden för att ringa skriptet måste du öppna footer.php-filen för redigering (där hittar du den stängande Body-taggen eller header.php (där hittar du Head-taggarna) från mappen:
/wp-content/themes/nazvanie_papki_s_ispolzuemoy_temoy_oformleniya/footer.php
Nu återstår det bara att infoga den andra delen av Yandex sociala knappar-koden, som är ansvarig för placeringen av blocket med knappar på sidorna på webbplatsen, på rätt plats i mallen på din webbplats eller direkt i artikeln:
Förresten kommer jag att boka igen om du vill ta bort valfri knapp från detta block är det inte nödvändigt att gå till designern på Yandex webbplats igen. Du kan helt enkelt ta bort hennes post från den här listan (tillsammans med kommaet som följer det, till exempel "vkontakte,"). Du får poängen ...
Tja, och det kan du också ändra placering av knappar inuti blocket med CSS.
Li.ya-share2__item (bakgrund: ingen! Viktigt; stoppning: 0 7px 0 7px! Viktigt;)
eftersom Jag använder en anpassningsbar layout för mobila enheter, sedan lägger jag till en liknande rad för enheter med låg skärmupplösning, där jag specificerade något mindre strecksatser, men dessa är detaljer:
Li.ya-share2__item (stoppning: 0 3px 0 3px! Viktigt;)
Ovanför artikeln satte jag helt enkelt in den andra delen av koden med små knappar utan att behöva ringa igen skriptet (en gång per sida räcker):
Du har antagligen märkt följande konstruktion i koden ovan:
Datatitel: twitter \u003d ""
Vad är det här? Faktum är att mina långa titlar alltid ringde problem att posta på Twitter, så jag brukade sätta den ursprungliga knappen på detta sociala nätverk och ändra den lite, som visas nedan. Nu har Yandex-utvecklarna gjort halvautomatisk beskärning av meddelandet som skickades till Twitter (det brukade vara automatiskt). dvs Jag lägger till datatitel: twitter-attributet till koden, där jag placerar designen inuti, som ansvarar för att klippa titeln (artikeltitel) till den längd som krävs för Twitter.
Detta görs med hjälp av funktionen från mappen med ditt tema; själva funktionen ges som referens och ser ut så här:
Funktion trim_title_chars ($ count, $ after) ($ title \u003d get_the_title (); if (mb_strlen ($ title)\u003e $ count) $ title \u003d mb_substr ($ title, 0, $ count); annars $ after \u003d ""; echo $ titel. $ efter;)
Sammantaget något liknande i min WordPress-blogg. För att infoga detta block i Joomla kommer det förmodligen vara enklast att använda den godtyckliga Html-kodmodulen och placera den i mallpositionen någonstans omedelbart under textens artikel.
Officiella knappar för sociala medier
Många sociala nätverk ger alla möjlighet att ladda ner knappkoden, och ofta kan du till och med anpassa dess utseende och funktionalitet. till exempel kan du konfigurera och få skriptkoden för att dela inlägget i.
Det finns många inställningar, som du ser, och förutom utseendet på VKontakte-knappen kan du också konfigurera visningen av räknaren som visar antalet aktier.
knapp Facebook kan erhållas. Det är mycket flexibelt att anpassa efter dina behov och förvirras inte av de engelska inskriptionerna på det, eftersom när du placerar dess kod på din webbplats kommer inskriptionerna automatiskt att översättas till ryska.
Det är bättre att inte sätta in något i url-fältet, då delas sidan där koden ligger.
Det ser ut så här:
Det ser ut så här:
Tja, naturligtvis kan jag inte låta bli att nämna officiell twitter-knapp, som visade sig relativt nyligen. Hennes konstruktör ligger. Naturligtvis ger det möjligheten att räkna antalet retweets och du kommer att ha möjlighet att ställa in sitt utseende:
Därefter moderniserade jag den resulterande koden lite enligt principen som beskrivs ovan, så att mina långa titlar trimmas och inte skapar ytterligare problem för användare när de delar.
Andra alternativ för att få sociala medieknappar för en webbplats
Som jag redan har sagt finns det alla typer av onlinetjänster där du kan ta ett skript med sociala nätverksknappar gratis och lägga mycket på din webbplats. De har alla olika mål: "från hjärtat" (som i fallet med Dimox-tjänsten), att samla in data som är nödvändiga för att andra tjänster ska fungera (som i fallet med ApTuLike) eller för vinst (virus och andra olagliga bedrägerier med den trafik som finns på din webbplats) . Det finns helt enkelt betalda lösningar, till exempel som det plugin som nämns nedan.
Det är svårt att säga vad man ska välja mellan den här sorten. Jag kommer att säga några ord om vad jag hade chansen att prova själv, och som jag redan skrev tidigare.
I allmänhet, se själv, jämföra och välja.
Lycka till! Vi ses snart på bloggsidan
Du kanske är intresserad
Vi skapar knappar för att lägga till i sociala nätverk och bokmärken för en blogg på WordPress (utan plugins och skript) Likeley - fristående sociala knappar för webbplatsen 
Knappar för mobila webbplatser från Uptolike + möjligheten att dela länkar i snabbmeddelanden UpToLike - social knappbyggare för din webbplats med avancerad funktionalitet 
Uptolike Share Buttons - ett gratis plugin för att lägga till sociala medieknappar till WordPress 
uSocial - en översikt över den nya sociala knapptjänsten för din webbplats 
Att locka trafik till besökare på din webbplats med hjälp av SMO-metoder (forum, sociala nätverk, prenumerera grupper) Hur du lägger till ett block på din webbplats med knappar som leder till dina sidor eller grupper på sociala nätverk, såväl som till RSS-flöde 
Google + 1 och jag gillar det från Vkontakte och Facebook - hur man lägger till liknande knappar på din webbplats
Innan vi studerar kodningen, låt oss ta en titt och uppmärksamma de resurser som den globala webben redan ger oss. Förresten, det finns många av dem, vi kommer att betrakta de två mest populära.
En annan tjänst som är värd vår uppmärksamhet är att det är en lika enkel konstruktör, men det finns mycket fler knappar med tjänster och nätverk, av vilka jag, jag erkänner, såg jag för första gången. Den största skillnaden från Yandex.Technologies är att vi får ett helt genererat skript som kommer att behandlas inte molnigt, men direkt på vår server.
Det verkar som att med sådana underbara lösningar skulle det aldrig hända att någon "återuppfinner hjulet" igen? Men nej, ett manus skriven av någon är bara lika bra eftersom vi är för lata för att bry oss om det. Naturligtvis kommer det att fungera ordentligt och utföra sina funktioner, men det är en universell lösning skriven för den totala massan av platser, dvs. det tar inte hänsyn till våra personliga små behov och konventioner.
Först: designen av knapparna är faktiskt järn. Ja, det känns igen och tillhandahålls av sociala nätverk själva, men uppfyller bara inte våra behov. Tja, knapparna har rundade kanter, och designen av vår webbplats kräver att knappen är fyrkantig, vad ska jag göra? - Ta spriten och rita om! Den som försökte det vet att det är en tacksam uppgift: att byta ut en knapp är full av fem till sex tester "korrekt" för att placera den på spriten. Och detta är bara en ersättning för en / flera knappar, men om webbplatsen är i gotisk stil och alla knappar behövs mörka?
För det andra: det finns ingen tvekan om Yandex pålitlighet, men knappar, till skillnad från den metriska räknaren, är av någon anledning belastade tungt, och deras försening ses ofta från sidans huvudinnehåll. Detta märks särskilt med en bra höghastighetsanslutning, när sidan kraschar nästan direkt, och du har flera block med knappar.
För det tredje: för testet, generera ett skript på share24 - det är stort. Är alla medföljande kodrader verkligen nödvändiga för oss? "Jag tror inte det."
Låt oss nu gå vidare till själva skriptet, det kommer att delas in i tre delar: HTML, CSS och faktiskt själva koden som är skriven i JavaScript. Dessutom kommer jag att använda jQuery-biblioteket för bekvämlighet.
Vi inkluderar alla nödvändiga filer:
Nu lägger vi till skriptet till filen share.js, det kommer att se ut så här:
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 "+ kodURURkomponent (data.text); url + \u003d" & url \u003d "+ kodURURIKomponent (data.url); url + \u003d" & hashtags \u003d "+" "; url + \u003d" & counturl \u003d "+ kodURURIComponent (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 "+ kodURURkomponent (data.url); url + \u003d" & title \u003d "(! LANG: + kodURURICkomponent (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; } }; !}
Lägg till markering på sidan:
Strukturen är ganska enkel, nämligen ett omslag med en andelsklass, sedan en div med attributet data-share-data, som nämnts ovan. En sträng består av fyra parametrar med sina egna värden.
- url - adressen vi delar;
- img - bild, om det inte behövs, ange en tom rad;
- titel - sidtitel;
- text - beskrivningen vi behöver.
Inuti div är knapparna själva med onclick-händelsen hängd på dem. Genom att klicka på någon av de metoder som beskrivs ovan kommer att kallas.
Det återstår bara att ge knapparna ett mänskligt utseende och lägga till CSS:
Dela (bakgrundsfärg: #ececec; display: inline-block; padding: 7px 5px;). Share div: efter (innehåll: ""; display: block; clear: båda; höjd: 0;). Share div: först -barn (margin-left: 0;) .share .twitter, .share .vk, .share .facebook (bakgrundsbild: url (share.png); margin-left: 7px; border-radius: 3px; höjd: 24px; bredd: 24px; flyta: vänster; markör: pekare;) .delning .twitter (bakgrundsfärg: # 00aced; bakgrundsposition: 0 -61px;) .delning .twitter: hover (bakgrundsfärg: # 008abe; ) .share .vk (bakgrundsfärg: # 48729e; bakgrundsposition: 0 -32px;) .delning .vk: svävare (bakgrundsfärg: # 3a5b7e;) .delning .facebook (bakgrundsfärg: # 3c5a98; bakgrund -position: 0 0;) .share .facebook: hover (bakgrundsfärg: # 30487a;)
Som ett resultat, efter att du har lagt till CSS-knappen, är resultatet:
Skriptet är klart på det här, i exemplet använde jag bara tre sociala nätverk, om du behöver ansluta andra, kommer detta inte att vara svårt. För att göra detta måste du lägga till en ny metod i delningsobjektet och inte glömma att lägga till ytterligare HTML och CSS. Länkar genom vilka omläggning sker i det sociala nätverket kan erhållas på två sätt:
- Använd API: et för sociala nätverk, som inte alltid hjälper;
- Gräva ut från en liknande tjänst med hjälp av en brandbug eller annat verktyg för en webbutvecklare.
