Html-kode til gruppe sociale knapper. Del indstillinger, vælg stilen på knapper til sociale netværk

Vær hilset! For nylig var jeg inde feedback spurgt, hvordan man laver de samme knapper sociale netværk, som er installeret på min hjemmeside. Og jeg besluttede at give svaret i artiklen ved at gennemgå 6 sociale myndigheder. knapper til webstedet.

Fordele og ulemper

Det skal dog bemærkes, at placeringen af ​​knapper i nogle tilfælde kan have små ulemper. Lad os overveje, hvorfor det er nødvendigt at placere sociale netværksknapper på den oprettede blog, og overveje også de vigtigste positive og negative sider placering af sådanne ikoner.

Fejl

  • Sideindlæsningshastigheden kan være langsommere.
  • Med et højt specialiseret fokus på internetprojektet får du muligvis ikke den ønskede effekt.
    • Oversigt over sociale knaptjenester

    Lad os overveje det meste populære tjenester, som kan bruges til at tilføje knapper på sociale medier til dit websted.

    Dette er fuldstændig gratis service, som fungerer som følger. Det genererer automatisk et særligt script, der giver besøgende til et internetprojekt mulighed for at sende links til sociale netværk. Tjenesten ligner knapper. Installationen er meget enkel og bekvem, og de anbragte knapper ser smukke ud på siden.

    Tjenesten tilbyder mere end tre hundrede muligheder for forskellige knapper! Du kan meget nemt vælge dine yndlings.

    Installationen foregår bogstaveligt talt med et enkelt klik. Der er konverteringsstatistikker.


  • Dette er sandsynligvis en af ​​de mest interessante onlinetjenester, ved hjælp af hvilke det er muligt at generere en knap i henhold til flere parametre: størrelse og udseende. Derudover kan du vælge, hvordan panelet med knapper skal placeres (vandret eller lodret). Du kan også angive kodningen. Efter at have valgt alle nødvendige indstillinger, skal det genererede script downloades og placeres på dit internetprojekt på den ønskede placering. Mest lige efter artiklen.


  • Yandex tilbyder dig at vælge, hvilke sociale netværk der skal vises. Brugeren kan gøre dette ved blot at markere boksene ved siden af ​​de knapper, der vil blive placeret på blokken. Du kan redigere deres udseende.

    Dernæst vil systemet automatisk generere kilde, som du skal installere på din blog. De vigtigste fordele ved denne service inkluderer det faktum, at scriptet ikke placerer udgående links på den oprettede blog. Det er også muligt at forbinde Yandex.Metrica for at vedligeholde statistik.


  • Denne service tilbyder brugere at placere meget smukke og stilfulde sociale netværksknapper på deres hjemmeside. Formularen oprettet af tjenesten bruger css og javascript. Den genererede form passer perfekt ind i designet af ethvert internetprojekt. Ligesom knapper er lavet vha moderne teknologi jquery. Forbindelsen er meget enkel og vil ikke forårsage vanskeligheder selv for begyndere. Indlæsningen er meget hurtig.


  • Dette er en nyttig og helt gratis onlinetjeneste, der tilbyder brugere at placere knapper på denne måde: i én række, arrangeret i form af en rullemenu, ikoner for alle tjenester i en række. Efter at have valgt visningsmuligheder, vil tjenesten automatisk generere en speciel javascript kode, som skal placeres på det krævede sted på stedet.

    Derudover fortæller tjenesten dig, hvordan du tilføjer den oprettede kode til skabeloner.


  • Ved brug af af denne tjeneste, kan du meget hurtigt og nemt tilføje de nødvendige knapper til din hjemmeside eller blog. For at gøre dette behøver du kun at gøre tre enkle trin: vælg det sted, hvor den oprettede widget skal være placeret, vælg knappernes stil og få koden. Ved at placere sådanne knapper på den oprettede blog, vil besøgende være i stand til at tilføje interessante materialer til dine egne bogmærker og sociale netværk.

    • Så installation af sociale netværksknapper til et websted er meget simpelt og vil ikke forårsage nogen vanskeligheder, selv for nybegyndere internetbrugere. Hvis det ønskes, kan du installere enten knapper for alle tilgængelige netværk eller kun vælge nogle visse netværk. For at gøre dette skal du bruge officielle widgets eller tredjeparts onlinetjenester. De mest populære er knapperne installeret på personlige blogs eller på nyheds- eller underholdningsinternetprojekter. :)

    P.S. Tak for din opmærksomhed. Hvilken service foretrækker du? Venter på dine kommentarer. :)

    Der er sandsynligvis ingen sider tilbage på internettet, der ikke indeholder opslagsknapper materialer på sociale netværk. Sidstnævnte har længe og fast indtaget en plads i vores liv. Vi kommunikerer der, stifter bekendtskab, promoverer forretning, læser nyheder og så videre. Et komplet udvalg af. Det er ikke overraskende, at webmastere stræber efter at udvide tilstedeværelsen af ​​deres websteder på sociale netværk på nogen måde. tilgængelige metoder. Der er trods alt tonsvis af potentiel trafik, som absolut alle har brug for. Strømmen af ​​besøgende betyder penge, omdømme, vækst. Alt er bygget op omkring ham. En velsmagende bid.

    Sociale knapper er nødvendige, det er indlysende. Spørgsmålet er anderledes - hvilke skal man vælge? Vi testede det for dig TOP 5 forskellige tjenester at tilføje knapkode til websteder. Målet er at identificere den optimale og vise den i detaljer. Lad os starte med kvalifikationsfasen.

    Valg bedste service sociale knapper

    Valget af kandidater til sammenligning viste sig at være trivielt - vi tog mest populære tjenester, som enhver person, der overhovedet er bekendt med emnet hjemmesideoprettelse, har hørt om. Ingen sjældne, der vinder popularitet, kun erfarne oldies.

    Sammensætningen af ​​det certificerede team er som følger:

    Som et resultat af test af de udvalgte sociale tjenester - uSocial var lederen. Nu ønsker du at modtage en begrundelse for vores valg. Selvfølgelig vil vi ikke forblive ubegrundede.

    Funktioner af uSocial knapper

    Lad os give nogle fakta, som overbeviste os om, at beslutningen var korrekt.


    Trin-2

    Vi sammensætter et sæt sociale knapper. Kan vælge vises sociale netværkstjenester, knappernes form og stil.

    Her kan du aktivere knappen "Op", aktivere support mobile enheder, tilslut Viber, WhatsApp, Telegram, SMS-tjenester.

    Trin-4

    Efter at have installeret den sociale bar fra din uSocial personlige konto, kan du se statistik over likes og reposts for den valgte periode, både for alle sociale netværk på én gang og for udvalgte. Data vises i klare grafer eller diagrammer.

    Hvis sociale metatags er udfyldt korrekt, vil indlæg blive opfattet korrekt sociale myndigheder, fordi de angiver typen af ​​materiale, den relevante titel, et link til det ønskede billede. Alt dette øger effektiviteten af ​​repostering: dit materiale bliver korrekt indekseret af sociale tjenester.

    Eksempler opmærkningskode for populære sociale netværk (koden skal skrives før tagget):

    1. Facebook Og I kontakt med brug Open Graph-protokol:





    3. For Twitter koden ser sådan ud:



    4. For Google+ Så:

    - link til forfatterens profil på Google+
    - Navn på webstedet
    - Uddragstekst (op til 40 tegn)
    - beskrivelse af webstedet
    - sti til billedfilen

    Værktøjer til at arbejde med mikromarkup.

    Jeg bemærkede vigtigheden af ​​SMO (Social Media Optimization) i webstedspromovering. Lad os nu tale direkte om, hvordan man laver social optimering på dit websted, eller rettere, hvordan man tilføjer sociale knapper populære netværk til hjemmesiden.

    Først vil jeg vise dig, hvordan det faktisk skal se ud på siden. På mange blogs og nyhedssider kan du nederst i enhver artikel se noget som dette:

    Det er de sociale knapper, takket være hvilke SMO opnås, og så social aktivitet. Denne artikel er afsat til spørgsmålet om, hvor man kan få koden til disse sociale netværk. knapper og hvordan du installerer dem korrekt på din hjemmeside. Lad os først overveje at installere Google+.

    1. Tilføj til webstedet Google-knap+

    2. Tilføj en "Synes godt om"-knap fra VKontakte og Facebook til siden 2.1. Jeg kan godt lide det fra Facebook

    Lad os starte med at få Facebook-knapkoden. For at gøre dette, besøg denne side: https://developers.facebook.com/docs/plugins/like-button. Du skal se følgende billede:

    Øverst til højre kan du se, hvordan knappen kommer til at se ud på din hjemmeside. Lad os se på de parametre, der kan indstilles:

    1. URL til at like
    Dette er en valgfri parameter. Hvis du lader feltet stå tomt, vil hver side have sin egen individuelle like-tæller. Hvis du indtaster en specifik URL der, vil tælleren være enkelt (likes opsummeres fra alle sider på denne side).

    2. Send knap
    Tilføj eller fjern en knap til at sende beskeder. Jeg anbefaler at fjerne denne knap, fordi... Vores mål er simpelthen at sætte en "synes godt om"-knap, selvom du måske har helt andre mål.

    3. Layoutstil
    Knapvisningsstil. Personligt kan jeg bedst lide standard.

    4. Bredde
    Knappens bredde i pixels. Jeg sætter normalt ikke mere end 100 pixels.

    5. Verb til at vise
    Hvad vil blive vist på knappen: "Jeg kan lide" eller "Jeg anbefaler". Jeg vælger normalt den første mulighed (standardindstillingen), fordi den er mere effektiv måde motivere brugeren til at like.

    6.Farveskema
    Farveområde: enten hvid eller sort.

    7. Skrifttype
    Du skal bare indstille skrifttypen til inskriptionen "Jeg kan lide".

    Når du har indstillet indstillingerne, skal du klikke på knappen "hent kode" og placere den på webstedet. Fælles knapkode til facebook:

    (funktion(d, s, id) ( var js, fjs = d.getElementsByTagName(s); if (d.getElementById(id)) returnerer; js = d.createElement(s); js.id = id; js. src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs )(dokument, "script", "facebook-jssdk") ); 2.2. Jeg kan godt lide fra VKontakte

    Lad os nu se på, hvordan man får "like" knapkoden fra VKontakte. For at gøre dette, gå til Næste side: https://vk.com/dev. Du bør se følgende side:

    Først skal du tilføje et nyt websted. For at gøre dette skal du vælge muligheden for at forbinde et nyt websted fra rullemenuen "websted/applikation":

    Når du har tilføjet et nyt websted, skal du gemme det. Vælg nu det ønskede websted fra rullemenuen. Efterfulgt af lille antal parametre: "knapmulighed", "højde", "knapnavn" - alt dette kan tilpasses efter din smag. Til sidst vil der være kode til knappen:

    VK.init ((apiId: 2872188, onlyWidgets: true )); VK.Widgets.Like ("vk_like", (type: "knap") ); 3. Tilføj en tweet-knap til webstedet

    Som i tidligere tilfælde skal du først gå til det sted, hvor du modtog og konfigurerede knappen.

    Fra forfatteren: vi bor i social tid. I dag er interaktion med andre mennesker vigtigere end nogensinde, når det kommer til online-forretning. På grund af dette spekulerer mange mennesker på, hvordan man tilføjer sociale knapper til deres hjemmeside for at forbedre sociale signaler. Det er meget smart, så vi bør helt sikkert finde ud af, hvordan det gøres.

    Betydningen af ​​sociale knapper

    Nogle gange når jeg læser meget nyttig artikel, jeg vil gerne gemme det på en eller anden måde. Nej, selvfølgelig er der mange muligheder for, hvordan man gør dette. Tag for eksempel et skærmbillede, kopier al teksten ind i notesblok, download til pdf-formular etc. Men i alle disse tilfælde får webstedsejeren ikke meget udbytte, og alt dette er langt fra det største bekvemme måder gemme oplysninger.

    Generelt, hvis jeg i dag ikke kan se sociale knapper under en artikel, er det det i det mindste overraskelser. For det første er det praktisk for læserne. For det andet bringer det utvivlsomme fordele for webmasteren, for hvis hans materialer er interessante, så kan du få en masse naturlige sociale signaler gratis. Ingen snyd eller andre dumme aktiviteter.

    Placeringsmuligheder i skabeloner

    Der er generelt tre hovedmuligheder:

    Under artiklen. Den mest populære og mest oplagte mulighed. Det er designet til det faktum, at en person har læst eller skimmet teksten fuldstændigt, kunne lide noget og besluttede at beholde den for sig selv.

    Over artiklen. Dette er meget mindre almindeligt. Her er beregningen foretaget på publikationens titel og første afsnit. For eksempel så jeg overskriften "102 muligheder for tilberedning af grød." Åh, interessant, jeg klikkede straks og gemte det på mine sociale medier. netværk for senere at glæde dig selv med variation ved bordet.

    Side ( lodret arrangement+ fiksering). Også en ganske almindelig mulighed. Den er velegnet til steder, hvor der er plads på siden til en smal blok. Normalt i dette tilfælde er der ikke mange sociale netværk, fra 3 til 10, der passer til skærmens højde.

    Sidste mulighed mest ideel, hvis du har brug for maksimale sociale signaler. Fordi knapperne altid er synlige, og en person kan klikke på dem til enhver tid. Han kan lide alt i teksten, og han klikker. Men det er vigtigt, at disse knapper på en eller anden måde passer ind i designet og ikke distraherer fra indholdet.

    Sådan tilføjer du sociale knapper til din hjemmeside. netværk: en mulighed for layoutdesignere

    Jeg foreslår den første mulighed for layoutdesignere. Altså for dem der i det mindste har lidt forståelse for html og css og forstår at style elementer. Meget ofte skal knapdesign være unikt. Men tredjeparts tjenester De giver dig ikke mulighed for at lave noget som helst design, ofte er det begrænset til blot at indstille baggrunden og nogle små parametre.

    Men der er en løsning! Disse er knapper fra GoodShare. Bare skriv det direkte ind i søgningen, og deres hjemmeside vil sandsynligvis give dig tilbage. Scriptet fra goodshare er meget let og enkelt, det kan installeres med et par klik (kan tilsluttes fra en meget hurtig CDN). Hvis du er layoutdesigner eller i det mindste har lidt viden, vil jeg ikke forklare dig, hvordan scripts installeres, fordi du er ved det.

    Meget mere vigtig information– dette er den direkte udgang af knapperne. På stedet for skabelonen, hvor du skal vise et ikon, for eksempel VK, indsæt følgende kode:

    < div class = "goodshare" data - type = "vk" >

    < span data - counter = "vk" > < / span >

    < / div >

    I dette tilfælde er span data-counter et valgfrit element. Dette er en tæller, der viser antallet af klik på ikonet. Du skal have jQuery aktiveret for at det virker. I de fleste tilfælde har du ikke brug for en tæller, så du behøver ikke dette stykke kode. Faktisk er resten af ​​koden i dokumentationen:

    På denne måde kan du oprette det sæt ikoner, du har brug for. Forresten, uden stilarter vil der ikke blive vist noget. Knapper fra goodshare skal designes fra bunden, men som layoutdesigner er det præcis det, du har brug for? Du kan anvende enhver typografi, indsætte tekst og andre elementer inde i div med knappen.

    Forresten, hvordan kan disse knapper styles? Nå, der er 2 muligheder. Du kan blot tilføje en ny stilklasse til hver, eller du kan bruge attributvælgere. Sådan her:

    div(...)

    div [data - type = vk ] ( . . . )

    Med denne vælger kan du angive stilarter for knappen til at dele et indlæg på det sociale netværk VKontakte.

    Som du kan se, giver manuskriptet fra goodshare fremragende muligheder. Det er maksimalt optimeret og giver dig mulighed for at oprette enhver form for sociale medier. knapper

    andre metoder

    Eller et hvilket som helst passende plugin til din motor. Jeg er sikker på, at der er rigtig mange af sådanne udvidelser. Bare søg efter plugins med ord som "social" og "share", og du vil straks få noget som dette.

    Jeg vil ikke forklare i detaljer installationen af ​​knapper ved hjælp af disse metoder, fordi det følger et scenarie, og du skal bare følge instruktionerne fra tjenesterne.

    God eftermiddag kære bloglæsere, i dag vil jeg fortælle jer om knapper på sociale medier til jeres hjemmeside. Først og fremmest, vi taler om det sociale deleknapper, nemlig - - del på sociale medier. netværk (som udgiver indlæg på din væg).

    Sidenavigation:

    Tjenesten har en lang række indstillinger til visning af sociale knapper. netværk. Du kan finde ud af mere om dem, hvis du udvider fanen nedenfor:

    Udvide Fuld beskrivelse share42 service

    Som allerede nævnt er share42 en gratis tjeneste, der ikke offentliggør sit link i nærheden af sociale ikoner. netværk og kan generere links til 43 sociale netværk, nemlig til:

    Tjenesten giver dig mulighed for at indstille forskellige størrelser for socialt knapper, kan du angive:

  • 32x32 px
  • 24x24 px
  • 16x16 px

    • Du kan også indstille dine egne billeder til sociale netværk, lave dem i monokrome eller matche farven på dit websted.

    Tegnkodning til sociale medier knapper

    Du kan vælge kodningen af ​​dit websted fra listen og angive den for knapper på sociale netværk. Tilgængelig mulighed valg:

    • UTF-8
    • Win-1251

    Sociale medier-knapper kan indsættes på enhver hjemmeside, uanset CMS, men til WordPress og Drupal kan tjenesten generere et færdigt link til at indsætte hvor som helst i din skabelon. Du behøver ikke skrive kode for at få et link nuværende side og dens titel med en beskrivelse, share42 vil gøre det for dig.

    For eksempel ser indlejringskoden sådan ud: