Egna sociala knappar. Gör-det-själv sociala knappar utan tredjepartstjänster Räknare för sociala nätverk

Nyligen ber varannan (om inte den första) kunden i kraven för webbutveckling att vara säker på att koppla den till sociala nätverk. "Sociala" knappar på en webbplats är verktyget nummer 1 för att attrahera målgruppen, distribuera innehåll och PR i allmänhet. Och det är helt gratis!

Sociala nätverk tillhandahåller koder för sina knappar och widgets för placering på webbplatsen, och ger instruktioner för att installera dem i webbplatsens hanteringssystem. Alla CMS (operativsystem) låter dig installera dem, det viktigaste är att passa dem harmoniskt i designen på din webbplats.

Vilka är egenskaperna och funktionerna?

Om din webbplats riktar sig till människor som kommunicerar på populära sociala nätverk. nätverk, till exempel Vkontakte, Twitter, Instagram, Facebook, Google+, Pinterest, etc., och du vill täcka dem alla, då för att inte installera knappar för var och en av dem separat, med tanke på att de kan skilja sig åt i storlek och design rekommenderar vi att du använder aggregatortjänster. Dessa är enkla och bekväma verktyg som gör det möjligt för webbplatsbesökare att snabbt dela information med sina vänner, oavsett vilket socialt nätverk de använder. Nedan kommer vi att titta på de mest populära tjänsterna.

Knappar för sociala medier Dela Pluso

Fördelar:

Pluso XExperimental version av Share Pluso social button constructor. Det har förbättrat designen av ikoner, ett popup-fönster med en fullständig lista över tillgängliga sociala nätverk, och den irriterande orange knappen med "+"-tecknet har också ändrats i sin plats är nu samma plustecken, men i en trevligare design.
Enligt utvecklarna är de nya sociala knapparna designade för Retina-skärmar. Allt annat förblir detsamma vid första anblicken. Tyvärr, bland de tillgängliga alternativen i designern, hittade jag inte knappar med räknare, även om standardutgåvan av Pluso har dem.
Jag vet inte om de kommer att ersätta den gamla med en ny konstruktör, men för tillfället fungerar båda samtidigt med olika länkar.

Add ThisAdd Detta är en tjänst som tillhandahåller högkvalitativa, snygga och flexibla sociala knappar. Denna resurs är den ledande i väst. Det är mindre populärt här, men jag stöter ofta på ryskspråkiga webbplatser med Add This-widgeten.
Det finns betalda och gratis widgets. Endast de enklaste alternativen är tillgängliga i gratiskontot. Den betalda versionen har många fler designkoncept tillgängliga, såsom: adaptiva knappar, knappar med olika räknare och mycket mer.
Jag tror att det här alternativet inte är lämpligt för vårt folk, eftersom du måste betala för klockorna och visselpiporna, men på den inhemska marknaden kan du hitta alla samma saker, men gratis.
Add This-konstruktören har en enorm lista över tillgängliga sociala nätverk, inklusive VKontakte, Moi Mir och Odnoklassniki. Det finns ett plugin för .

Bra dela Lätta och vackra delningsknappar för din webbplats med en liten inbäddningskod, vilket är väldigt attraktivt. Tyvärr finns det bara ett designalternativ med flera färgscheman. Det finns alla populära sociala nätverk i RuNet
Enligt utvecklarna är deras idéer optimerad och sökmotorer kommer att älska din webbplats. Jag vet inte hur mycket sanning det finns här.
Om du inte behöver klockor och visselpipor är det här alternativet för dig.

Shareaholic En mycket intressant västerländsk tjänst för att skapa sociala knappar, som jag upptäckte ganska nyligen.
Shareaholic erbjuder flera nya dela-knappskoncept. Personligen gillade jag pilen ovanför knapparna (pilar är ett mycket starkt marknadsföringsverktyg), men tyvärr är inskriptionen på engelska, så den är inte lämplig för vårt folk. Bland de tillgängliga sociala nätverken är VKontakte.

Från författaren: Hälsningar. Idag har sociala nätverk utvecklats till en sådan nivå att totalt mer än 3 miljarder människor är registrerade i dem. Det här är potentiellt en mycket kraftfull publik, så idag kommer jag att berätta för dig hur du lägger till knappar för sociala medier på din webbplats.

Lägger till på en WordPress-webbplats

Låt mig börja med att säga att det enklaste sättet, om du har WordPress, är att helt enkelt installera något plugin för den här delen. Som? Till exempel använde jag Juiz Social Post Sharer. I allmänhet skriv bara in ordet social i pluginsökningen och se vad som finns där. Den enda fördelen här är att du förmodligen inte behöver konfigurera någonting.

Yandex har också utvecklat en sida där du kan anpassa och installera knappar för dig själv. På den här sidan kan du välja de tjänster du behöver (och det finns cirka 25 av dem). Till höger kan du välja utseende på blocket. Dessa kan vara räknare som visar hur många gånger användare klickat på knapparna. Detta i sin tur hjälper dig att spåra om materialet är användbart för läsarna.

JavaScript. Snabb start

Naturligtvis behöver du inte använda alla tre alternativen; Fast jag har sett sajter där blocket var både i början och i slutet av sidan.

Nu måste du hitta filen med koden som visar artiklarna. I wordpress brukar det till exempel kallas single.php eller liknande. Så om du behöver sätta ett block med knappar efter artikeln, leta efter raden the_content. Det är här du kan klistra in koden. Det kommer att hjälpa dig mycket om utvecklaren av din mall gjorde kommentarer i koden.

Du kan redigera webbplatsfiler på flera sätt. Gör till exempel detta direkt via motorns adminpanel (utseende - redigerare). I det här fallet är koden inte markerad, så det är inte så bekvämt att navigera. Ett annat sätt är via ftp. Anslut till webbplatsen med en FTP-klient, gå till wp-content – teman. Här behöver du hitta den mall som för närvarande är aktiv för dig. Vi går in i det och hittar samma single.php eller letar efter något liknande namn.

I själva kodfilen hittar du raden the_content med sök (Ctrl + F). Klistra in den här koden någonstans efter den.

Kommentarer är det som är markerat i grönt i den här skärmdumpen ovan. Som du kan se har utvecklaren tydligt angett att texten i själva artikeln kommer att visas på denna plats. Detta är bra, klistra bara in koden direkt efter artikeln och få önskat resultat.

Knappar från Pluso

JavaScript. Snabb start

Lär dig grunderna i JavaScript med ett praktiskt exempel på hur du skapar en webbapplikation

Du kan välja stil på knapparna, anpassa deras bakgrund, position och storlek. Du kan också välja ikoner med en inbyggd räknare. En annan fördel med Pluso-knappar är deras fantastiska utseende och möjligheten att integrera dem i nästan vilken design som helst.

När allt är konfigurerat kopierar vi helt enkelt koden och klistrar in den på den plats där vi vill se motsvarande block.

Ett annat alternativ är Share42

Om du inte gillade de tidigare alternativen finns det ett annat sätt att lägga till sociala nätverksknappar på webbplatsen. Detta är en share42.com-tjänst. Det hette så troligen för att det vid tidpunkten för dess skapande fanns 42 socialtjänstknappar, även om det för närvarande finns 43.

Jag kommer inte att beskriva processen i detalj, eftersom allt redan presenteras på webbplatsen i form av steg-för-steg-instruktioner. Du kan inte ändra designen på dessa ikoner, bara storleken. De ser dock inte dåliga ut.

Ikonerna du behöver måste väljas genom att klicka på dem med musen. Separat skulle jag vilja notera närvaron av sådana intressanta funktioner som att lägga till webbläsarfavoriter, en länk till RSS och en "Back to Top" -knapp.

Därefter kan du välja typ av panel: horisontell eller vertikal? Och om den andra väljs, kan antalet knappar begränsas. Jag rekommenderar att du lämnar kodningen som UTF-8. Du kan också lägga till en ikon för själva tjänsten till uppsättningen knappar så att användare från din sida kan gå till den och installera dessa knappar för sig själva.

Dessutom, om du planerar att lägga till en rss-ikon, måste du ange adressen till ditt flöde, och om du vill visa antalet knappklick måste de två sista kryssrutorna vara markerade.

Nedan finns 2 knappar. Den första låter dig se hur de sociala knapparna du har konfigurerat kommer att se ut. Med den andra laddas skriptet ner. Du måste ladda upp den via ftp till din webbplats i rotmappen.

Nästa steg är att ange sökvägen till denna mapp på servicesidan. Ofta räcker det att ersätta site.com med ditt domännamn. Det är det, allt som återstår är att infoga koden, först välja cms som resursen körs på. Du borde redan förstå var du ska infoga koden hoppas jag.

Jag tvivlar inte på att det finns ett par mer normala tjänster där du kan skapa sociala knappar, och det finns också bara massor av skript och plugins som lägger till dem. Idag har jag listat de bästa, enligt min mening, alternativ för dig.

Tja, idag lärde vi oss hur man lägger till knappar för sociala nätverk och tjänster till ditt internetprojekt. Nu kan ditt användbara material automatiskt distribueras på sociala nätverk av dina tacksamma läsare. Och det var allt för mig.

JavaScript. Snabb start

Lär dig grunderna i JavaScript med ett praktiskt exempel på hur du skapar en webbapplikation

Hej kära läsare av bloggsidan. Som du antagligen redan gissat från titeln kommer vi att prata om de så kallade sociala knapparna, som mycket allvarligt kan hjälpa artiklar på din webbplats att locka, under en framgångsrik uppsättning omständigheter och den höga kvaliteten på själva artikeln, ett stort antal besökare från sociala nätverk och tjänster.

Sociala signaler beaktas också av sökmotorer när du rankar din webbplats. Ett stort antal delningar till högkvalitativa konton på Twitter, Google+, Facebook (det är möjligt att VKontakte och andra nätverk också tas med i beräkningen) kan göra det möjligt för dig att stiga ett visst antal steg högre och kanske gå in i toppen och stanna där om beteendefaktorer inte sviker dig.

Generellt sett finns det många tjänster som tillhandahåller skript (knappar) för att dela innehåll på sociala nätverk på Internet, men alla av dem ska inte vara pålitliga (de kan lätt använda dig eller på annat sätt av dåliga skäl). Och de kan helt enkelt "hänga en webbplats" om deras kod inte är särskilt välplacerad och deras servrars datorkapacitet inte är särskilt kraftfull. Även om det finns anständiga alternativ som är fria från dessa brister, och jag har listat dem i slutet av denna publikation.

Det är också möjligt att visa antalet delningar till ett visst socialt nätverk på knapparna. Dessutom tas alla inlägg i beaktande, och inte bara de som görs med detta block (data laddas via API). Det är sant att inte alla sociala nätverk stöds (endast facebook, Google+, Moi Mir, Odnoklassniki.ru, VKontakte), men de flesta av de viktigaste. Det är tråkigt att Twitter nyligen togs bort från den här listan eftersom... den slutade tillhandahålla denna data via API:et.

Här kan du till exempel förkorta titlar för delning på Twitter, eftersom det finns en gräns för deras längd (läs hur du gör detta nedan), konfigurera om du vill visa delningsräknare eller inte, ställa in anvisningarna för att expandera menyer med ytterligare knappar för sociala nätverk , och mycket mer. I allmänhet, gräv runt och ta en titt.

I allmänhet, i jämförelse med inbyggda delningsknappar, som erbjuder att installera sociala nätverk på webbplatsen (läs om detta nedan), vinner Yandex-blocket i laddningshastighet, kompakthet och enkel installation och konfiguration. Till exempel, tidigare laddade min officiella Twitter-knapp ofta inte på grund av problem med deras server, så den vänstra menyn på min blogg, gjord i Java-script, laddades inte på länge. Det är möjligt att detta problem nu har lösts, men många skript kommer alltid att vara sämre än ett när det gäller att optimera sajtens laddningshastighet.

Jag tror att Yandex sannolikt inte kommer att ha problem med tillgängligheten, eftersom det är en välförtjänt kommersiell organisation som är ganska känslig för sin image. Dessutom, om du har det, kan du spåra statistiken för klick på dessa knappar, vilket kan vara användbart.

Förutom ett block med ikoner i vanlig storlek kan du skapa ett block med räknare, och Yandex föreslår också att du lägger till en rullgardinsmeny med ytterligare sociala nätverk, som kommer att döljas under en spoiler som finns efter att ha visat det nödvändiga antalet knappar för de viktigaste sociala nätverken (som VKontakte, MoiMir, ):

Om du vill lägga till räknare till knapparna i det här blocket (med en rullgardinsmeny), infogar du helt enkelt ytterligare ett attribut i dess kod på webbplatsen (mellan Div-taggarna): data-counter="“ och det är allt. Som jag sa, det kunde inte vara enklare. Du kan använda räknare kommer också att läggas till de små knapparna, som diskuteras nedan:

Data-services="vkontakte,odnoklassniki,facebook,gplus,twitter,moimir,blogger,digg,reddit,linkedin,lj"

Du kan också ersätta alla ikoner med deras mindre knappminiatyrer, vilket jag personligen tyckte var användbart när jag infogade ett block överst i alla artiklar på den här bloggen:

I den första delen innehåller de öppnande och avslutande SCRIPT-taggarna sökvägen till skriptet, som kommer att laddas från Yandex-servern, och den andra delen innehåller själva insättningskoden, som måste placeras på den plats i din mall där detta block kommer att visas.

Hur man infogar sociala knappar från Yandex på en webbplats

Därför infogar jag skriptanropskoden tillsammans med Div-blocket på den plats där knappar för sociala medier måste visas. Tja, så att dess laddning inte påverkar laddningshastigheten på huvudsidan, har jag, efter råden som ges i Yandex-dokumentationen, lagt till attributet async="async" till den, och initierade därmed dess asynkrona laddning av skriptet:

Problemet kan uppstå när man bland de många filerna i din webbplatsmotor hittar den som är ansvarig för att generera den allra nedersta delen av HTML-koden med den avslutande taggen /BODY eller den som utgör huvudet. Och hitta även en plats i temafilerna där du behöver infoga en kodbit i Div-taggarna (för att placera själva knapparna).

I princip, både i WordPress och i Joomla, görs detta i en av filerna för det tema som används. Därför att Den här bloggen körs på WordPress, så jag talar för det.

Om du arbetar med WordPress måste du för att infoga skriptanropskoden öppna filen footer.php för redigering (du hittar den avslutande Body-taggen eller header.php (du hittar Head-taggarna där) från mappen:

/wp-content/themes/name of the folder_with_theme_used/footer.php

Nu återstår bara att infoga den andra delen av Yandex sociala knappkod, som är ansvarig för platsen för blocket med knappar på webbplatssidorna, på rätt plats i din webbplatsmall eller direkt i artikeln:

Förresten, jag kommer att göra en reservation igen: om du vill ta bort någon knapp från det här blocket behöver du inte gå till konstruktören på Yandex-webbplatsen igen. Du kan helt enkelt ta bort posten från den här listan (tillsammans med kommatecken efter den, till exempel "vkontakte"). Tja, du förstår...

Tja, du kan också ändra placeringen av knappar inuti blocket med hjälp av CSS.

Li.ya-share2__item (bakgrund:ingen!viktigt;utfyllnad:0 7px 0 7px!viktigt;)

Därför att Jag använder en layout som är anpassningsbar för mobila enheter, så för enheter med låg skärmupplösning lade jag till en liknande rad, där jag ställer in lite mindre indrag, men det här är detaljer:

Li.ya-share2__item (utfyllnad:0 3px 0 3px!viktigt;)

I allmänhet är det något sådant här när det kommer till min WordPress-blogg. I Joomla, för att infoga detta block, är det förmodligen enklast att använda modulen Custom Html Code, placera den i mallpositionen någonstans omedelbart under artikeltexten.

Officiella knappar för sociala medier

Många sociala nätverk själva ger alla möjlighet att ladda ner knappkoden, och ofta kan du till och med anpassa dess utseende och funktionalitet. Du kan till exempel konfigurera och ta emot skriptkoden för att dela ett inlägg i .

Som du kan se finns det ganska många inställningar, och förutom utseendet på VKontakte-knappen kan du också anpassa visningen av en räknare som visar antalet andelar.

Du kommer att kunna få en Facebook-knapp. Den är mycket flexibelt anpassad för att passa dina behov, och bli inte förvirrad av de engelska inskriptionerna på den, för när du placerar dess kod på din webbplats kommer inskriptionerna automatiskt att översättas till ryska.

Det är bättre att inte infoga något i URL-fältet, då delas sidan där koden finns.

Det kommer att se ut ungefär så här:

Och, naturligtvis, jag kan inte låta bli att nämna den officiella Twitter-knappen, som dök upp relativt nyligen. Dess konstruktör finns. Naturligtvis ger det möjligheten att räkna antalet retweets och du kommer att ha möjlighet att ställa in dess utseende:

Jag moderniserade sedan den resulterande koden något enligt principen som beskrivs ovan, så att mina långa titlar skulle skäras av och inte skulle skapa ytterligare problem för användarna vid delning.

Andra alternativ för att få sociala medier-knappar för din webbplats

Som jag redan har sagt finns det många av alla typer av onlinetjänster där du kan ta ett skript för sociala nätverksknappar gratis och lägga det på din webbplats. De strävar alla efter olika mål: "från hjärtat" (som i fallet med Dimoxa-tjänsten), att samla in data som är nödvändiga för driften av andra tjänster (som i fallet med ApTuLike) eller för vinst (virus och andra olagliga bedrägerier med trafiken du har på din webbplats). Det finns också helt enkelt betalda lösningar, till exempel, som plugin som nämns nedan.

Det är svårt att säga vad man ska välja från denna sort. Jag ska säga några ord om vad jag hade en chans att prova själv och vad jag redan har skrivit om tidigare.

I allmänhet, titta, jämför och välj själv.

Lycka till! Vi ses snart på bloggsidans sidor

Du kanske är intresserad

Vi skapar knappar för att lägga till i sociala nätverk och bokmärken för en WordPress-blogg (utan plugins och skript) Troligtvis - fristående sociala knappar för webbplatsen
Knappar för mobilsajter från Uptolike + möjligheten att dela länkar i meddelanden UpToLike - en social knappbyggare för din webbplats med utökad funktionalitet
Uptolike Share Buttons - Gratis plugin för att lägga till knappar för sociala medier till WordPress
uSocial - recension av en ny sociala knapptjänst för din webbplats
Attrahera trafik från besökare till din webbplats med hjälp av SMO-metoder (forum, sociala nätverk, prenumerationsgrupper) 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 ett RSS-flöde
Google+1 och jag gillar från Vkontakte och Facebook - hur man lägger till gilla-knappar på din webbplats

Lägga till ikoner i profiler och grupper på sociala nätverk

Det är ingen hemlighet att det i många år har funnits speciella sociala nätverksknappar, vars installation på en webbplats gör att du kan se en ökning av trafiken och samtidigt bidrar till utvecklingen av en PR-kampanj för din resurs. Att dela material ger täckning till en gigantisk publik av potentiella kunder, läsare och prenumeranter.

Med installationen av verktyg för delning av sociala nätverk ökar förtroendet för webbplatsen från sökmotorer. Metoden fungerar även bra som en del av marknadsföring i organiska sökresultat för Micro Low Frequency-frågor om du lägger till unika kommentarer till andelen.

Vår artikel kommer att berätta hur du väljer, installerar korrekt och lägger till praktiska och vackra sociala knappar på din webbplats; vilka tjänster erbjuder sina tjänster och vilka är deras fördelar; Hur man lägger till kod och anpassar knappar för sociala medier själv.

Dela via sociala medier knappar låter dig öka webbplatstrafiken med upp till 20 %!

Fördelar och nackdelar med tjänster

Effektiva delningsverktyg kan läggas till på två sätt:

Flera multifunktionella tjänster erbjuder användarna stora möjligheter till anpassning och design, kräver inga speciella färdigheter och har ett intuitivt gränssnitt för att skapa vackra element.

Alla tjänster är plattformar där det efter inmatning av data genereras en kod som ska placeras på hemsidan.

De viktigaste fördelarna med dessa "hjälpare" inkluderar:

Enkel integration och enkel inlärning;
Möjligheten att omedelbart täcka alla relevanta sociala nätverk. nätverk "i ett slag";
Variation i valet av utseende på knappar och deras estetiska tilltal;
Att bibehålla blockets allmänna stil och geometri, oavsett de valda sociala nätverken.

Övergångsstatistik spåras bekvämt i Yandex.Metrica och Google Analytics.

Och ändå är ingenting perfekt. Sociala knapptjänster har, till skillnad från officiella lösningar, ett antal nackdelar:

Minskad sidladdningshastighet, vilket kan påverka både webbplatsens rankning i sökresultat och försäljningsvolym negativt;
Fel och fel i driften av servrar, vilket leder till långa laddningstider för knappar eller deras tillfälliga otillgänglighet;
Periodiskt uppträdande av reklam;
Avsaknad av en stabil algoritm för att arbeta via AJAX;
Möjlig minnesanvändning av webbläsare;
Förekomst av tvivelaktig trafik;
Underlåtenhet att tillhandahålla garantier för säkerheten för användardata.

Plugins från olika plattformar kan skilja sig åt i design och storlek, vilket gör det svårt för dem att samexistera harmoniskt på samma sida;
Processen tar längre tid och kräver vissa förberedande steg och grundläggande kunskaper i html.

Översikt över sociala knapptjänster

Det finns ett stort antal tjänster på Internet, som var och en har sina egna egenskaper och ständigt glädjer användare med förbättringar i systemet för att ställa in knappar för sociala nätverk och implementera dem på webbplatsen. Låt oss titta på de mest populära designerna.

Yandex knappar för sociala medier

Utseendealternativ:

Lista över nätverk som är tillgängliga för delning:

Primär inställning för visning av sociala nätverksknappar från Yandex och färdig kod:

För att installera blocket måste du infoga den genererade koden på önskad plats i webbplatsens html-kod. Det går att arbeta mer exakt med attribut, ställa in asynkron laddning av skriptet osv. (se dokumentation).

Pluso

En välkänd analog till den berömda tjänsten i det ryska segmentet. Designern utmärker sig för sin attraktiva design av element, bekväm funktionalitet och närvaron av användbara inställningar.

Förhandsgranskningsfönster och ytterligare alternativ:

Efter att ha gjort enkla manipulationer för att välja de nödvändiga sociala nätverken. nätverk, ikoner och deras inställningar kan du se koden:

(function() ( if (window.pluso)if (typeof window.pluso.start == "funktion") return; if (window.ifpluso==odefinierad) ( window.ifpluso = 1; var d = dokument, s = d.createElement("skript"), g = "s.type = "text/javascript"; s.async = true. "; https" : "http") + "://share.pluso.ru/pluso-like.js"; var h=d[g]("kropp"); (s); )))();

För att visa tjänsten korrekt behöver du bara kopiera det resulterande skriptet med bifogade data och installera det i webbplatsens layout på den valda platsen.

Tillsammans med delningsverktyg gör det möjligt att installera speciella serviceelement: "skriv ut", "bokmärke" etc.

Uptolike

Besökare kan välja 4 typer av knappar, varav en är en widget (med olika positioner i förhållande till sidan).

Skriptet för sociala knappar ser ut så här:

Koden för att arbeta med en widget är mer komplicerad:

window.informerPosition = (vert:"top",hor:"left")

För att installera, placera bara data i mallen.

Pip.Qip.ru

Representant för "omedelbar" kodgenereringstjänster för installation av sociala knappar - Pip.Qip. Enkelhet här betonar bara komfort.

För att få den eftertraktade koden behöver du:

Ange typen av plats för placering;

Välj en stil från listan;

Klicka på "Jag vill redan ha det!" – och se den färdiga koden längst ner på sidan.

Allt som återstår är att placera det i webbplatskoden.

Lägga till knappar för sociala medier manuellt

Ett alternativ till de säkert bekväma, men inte alltid acceptabla tjänsterna för sociala knappar är de sociala nätverken själva. nätverk som gör det möjligt att manuellt lägga till knappar på en webbplats med hjälp av plugins och API:er.

Den berömda VKontakte genererar delningsknappkoder på denna adress.

Med hjälp av widgeten kan du välja typ av framtida knapp och "dra åt" räknaren ("stil"-objektet), komma på ett originalnamn ("text") och få den eftertraktade koden.

Den första delen av koden ska placeras inuti taggen:

Den andra - till platsen för knappen:

Metoden för att få officiella Facebook-knappar är ännu enklare och tydligare. På webbplatsen kan du använda

Det kan vara bra att läsa: