Html-kode for sosiale knapper for grupper. Knapper for sosiale medier

Hilsener! Nylig var jeg inne tilbakemelding spurte hvordan man lager de samme knappene sosiale nettverk, som er installert på nettstedet mitt. Og jeg bestemte meg for å gi svaret i artikkelen ved å gå gjennom 6 sosiale tjenester. knapper for nettstedet.

Fordeler og ulemper

Det skal imidlertid bemerkes at plassering av knapper i noen tilfeller kan ha små ulemper. La oss vurdere hvorfor det er nødvendig å plassere sosiale nettverksknapper på den opprettede bloggen, og også vurdere de viktigste positive og negative sider plassering av slike ikoner.

Feil

Sideinnlastingshastigheten kan være langsommere.

Med et høyt spesialisert fokus på Internett-prosjektet kan det hende du ikke får den ønskede effekten.

Oversikt over sosiale knapptjenester

La oss se på de mest populære tjenestene som kan brukes til å legge til sosiale nettverksknapper på nettstedet ditt.

Dette er helt gratis tjeneste, som fungerer som følger. Den genererer automatisk et spesielt skript som lar besøkende til et Internett-prosjekt legge ut linker til sosiale nettverk. Tjenesten ser ut som knapper. Installasjonen er veldig enkel og praktisk, og knappene som er plassert ser vakre ut på siden.

Tjenesten tilbyr mer enn tre hundre alternativer for forskjellige knapper! Du kan veldig enkelt velge dine favoritter.

Installasjonen skjer bokstavelig talt med ett klikk. Det er konverteringsstatistikk.

Dette er sannsynligvis en av de mest interessante netttjenestene, ved hjelp av hvilken det er mulig å generere en knapp i henhold til flere parametere: størrelse og utseende. I tillegg kan du velge hvordan panelet med knapper skal plasseres (horisontalt eller vertikalt). Du kan også spesifisere kodingen. Etter å ha valgt alle nødvendige innstillinger, må det genererte skriptet lastes ned og plasseres på Internett-prosjektet på ønsket sted. Mest rett etter artikkelen.

Yandex tilbyr deg å velge hvilke sosiale nettverk som skal vises. Brukeren kan gjøre dette ved å merke av i boksene ved siden av knappene som skal plasseres på blokken. Du kan redigere utseendet deres.

Deretter vil systemet automatisk generere kilde, som du må installere på bloggen din. De viktigste fordelene med denne tjenesten inkluderer det faktum at skriptet ikke plasserer utgående lenker på den opprettede bloggen. Det er også mulig å koble til Yandex.Metrica for å opprettholde statistikk.

Denne tjenesten tilbyr brukere å plassere veldig vakre og stilige sosiale nettverksknapper på nettsiden deres. Skjemaet opprettet av tjenesten bruker css og javascript. Det genererte skjemaet vil passe perfekt inn i utformingen av ethvert Internett-prosjekt. Som knapper er laget ved hjelp av moderne teknologi jquery. Tilkoblingen er veldig enkel og vil ikke forårsake vanskeligheter selv for nybegynnere. Lastingen går veldig raskt.

Dette er en nyttig og helt gratis nettjeneste som tilbyr brukere å plassere knapper på denne måten: på én rad, ordnet i form av en rullegardinmeny, ikoner for alle tjenester på rad. Etter å ha valgt visningsalternativer, vil tjenesten automatisk generere en spesiell javascript-kode, som må plasseres på ønsket sted på nettstedet.

I tillegg forteller tjenesten deg hvordan du legger til den opprettede koden i maler.

Ved hjelp av av denne tjenesten, kan du veldig raskt og enkelt legge til de nødvendige knappene på nettstedet eller bloggen din. For å gjøre dette trenger du bare å gjøre tre enkle trinn: velg plasseringen der den opprettede widgeten skal ligge, velg stilen på knappene og få koden. Ved å plassere slike knapper på den opprettede bloggen, vil besøkende kunne legge til interessante materialer til dine egne bokmerker og sosiale nettverk.

Så å installere sosiale nettverksknapper for et nettsted er veldig enkelt og vil ikke forårsake noen vanskeligheter selv for nybegynnere Internett-brukere. Om ønskelig kan du installere enten knapper for alle tilgjengelige nettverk, eller velge bare noen visse nettverk. For å gjøre dette må du bruke offisielle widgets eller tredjeparts nettjenester. De mest populære er knappene installert på personlige blogger, eller på Internett-prosjekter for nyheter eller underholdning. :)

P.S. Takk for din oppmerksomhet. Hvilken tjeneste foretrekker du? Venter på dine kommentarer. :)

I I det siste Det har blitt moderne å installere knapper for sosiale medier på nettsider og blogger, og dette er ikke overraskende. For det første lar knappene deg øke "likes" og "hjerter", noe som har en positiv effekt på promoteringen av artikler på sosiale nettverk. For det andre er det visse typer knapper som lar deg dele lenker til individuelle sider på nettstedet på sosiale nettverk - dette tiltrekker seg flere besøkende fra Vkontakte, Facebook, Odnoklassniki, Twitter, etc. For det tredje artikler som mottok et stort nummer av"liker" og "hjerter" er svært pålitelige av nettstedets lesere.

Derfor er det veldig viktig å vite hvordan du installerer sosiale nettverksknapper på et nettsted for å hjelpe nettressursen å utvikle seg. De mest populære sosiale nettverkene vil bli vurdert

I kontakt med
Facebook
Klassekamerater
Google «+1»
Twitter
Min verden

Her vil vi se på installasjon av standardknapper som tilbys av sosiale nettverk selv. I dette tilfellet må hver knapp installeres separat fra de andre, dette tar litt tid, men det ser også veldig bra ut.

1.1. VKontakte 1.1.1 "Lagre"-knapp

Knappen er ganske fleksibel, påskriften på den kan endres til hva du vil (standard er "lagre").

Først må du gå til siden med, hvor du vil motta skriptkoden som du må installere på nettstedet ditt for at knappen skal vises.

Her kan du velge en av 5 stiler: knapp, knapp uten teller, lenke, lenke uten ikon, ikon.

"Tekst"-feltet lar deg endre standard "lagre"-inskripsjonen til din egen.

Som URL kan du velge adressen til siden med knappen eller adressen til en annen side (etter eget valg). I det første tilfellet vil knappen dele en lenke til siden der selve knappen er plassert. I det andre tilfellet vil knappen dele koblingen du angir, uavhengig av hvor den befinner seg.

Innebyggingskoden består av to deler: den første skal være plassert hvor som helst mellom taggene og, den andre - på stedet der knappen skal vises. Les om å installere en knapp på et nettsted i avsnitt.

1.1.2 "Liker"-knapp

Det andre alternativet for knappen er "Like"-widgeten. Det vil være lettere å installere det på nettstedet, fordi... på slutten vil du motta bare ett stykke kode som må plasseres på riktig sted på siden.

For å konfigurere knappen, gå til denne lenken. Her må du også fylle inn en rekke parametere.

Nettstednavn – her er det bedre å angi det korte og ekte navnet på nettstedet ditt.

Nettstedsadresse - skriv inn adressen hjemmeside din side.

Hoveddomenet til nettstedet - angi hovedspeilet til nettstedet (det kan finnes som en parameter for "Vert"-operatøren), hvis du synes det er vanskelig å gjøre dette, forlater du den foreslåtte VKONTAKTE.

Knappealternativer er ulike stiler knapper, påvirker de utseendet.

Høyden på knappen er de geometriske dimensjonene til "Like"-knappen.

Knappnavn – det er to tilgjengelige alternativer (jeg liker det, det er interessant).

Innsettingskoden er koden som er nødvendig for å vise knappen for det sosiale nettverket VKontakte.

1.2 Facebook

Knappen på denne siden konfigureres. Det kan oppstå vanskeligheter fordi... kommentarer til skjemaet skrives inn engelske språk, men nedenfor kan du lese Kort beskrivelse hvert felt.

URL for å like – URL til siden for knappen (hvis feltet ikke er fylt ut, vil adressen til siden som knappen er plassert på bli tatt).

Send-knapp – tilstedeværelsen av et hakemerke inkluderer ny mulighet– send en lenke til Facebook (vil vises tilleggsknapp- "send"). Når slått på, vil to knapper vises samtidig.

Layout Style – stilen på knappen påvirker utseendet (button_count anses som standard).

Bredde – knappens bredde i piksler.

Vis ansikter – når aktivert, vil avatarer til personer som allerede har klikket på denne knappen vises.

Font – skrifttype for knapp.

Fargeskjema – bakgrunn av plassen ved siden av knappen (hvit og svart).

Verb å vise – knappen navn (liker det, jeg anbefaler det).

Hent kode – en knapp som genererer skriptkoden.

1.3 Odnoklassniki og min verden

Disse sosiale nettverkene har fått stor popularitet i Russiskspråklig Internett, et stort antall mennesker bor der, så du bør ikke unnlate å installere "Klasse" -knappen fra Odnoklassniki-tjenesten og "Like" -knappen fra My World-nettstedet.

For å konfigurere knappene må du gå til . Du kan legge til knapper individuelt, tilpasse hver enkelt forskjellig, eller du kan redigere begge knappene samtidig.

Høydestørrelse – geometrisk størrelse på knappene.

Utseende – utseendet til knapperammen.

– utvalg av knapper (som, klasse)

Teller – slå på og av knappetrykktelleren (til høyre, på toppen – plasseringen av telleren).

Tekst på knapper – velg ett av tre navn tilgjengelig for knapper.

Bygg inn kode – skriptkode som må installeres på nettstedet.

1.4 Google «+ 1»

Et nytt sosialt nettverk som på kort tid fikk stort publikum. Det er vanskelig å forestille seg et nettsted uten "+1"-knappen, fordi... det lar deg ikke bare legge til lenker til et sosialt nettverk og øke antallet "plusser", men kan også påvirke nettstedets resultater i TOPPEN søkemotor Google.

Alle detaljene om dette, samt installasjon og konfigurering av knappen er plassert.

1.5 Twitter

Mest populære tjenesten korte meldinger kan ikke ignoreres. Installer en knapp for dette sosiale nettverket og se hvor raskt folk deler linker til nettstedet ditt på Twitter. Du kan tilpasse knappen her.

Først må du velge ønsket knapp(vi er interessert i det første alternativet - "send lenke"-knappen).

Etter dette vil det dukke opp et skjema på siden med flere felter som må fylles ut.

Send lenke – velg siden der knappen er plassert, eller en annen.

Tekst – velg teksten som skal vises ved siden av knappen (IKKE PÅ KNAPPEN SELV).

Vis teller – aktiver eller deaktiver telling av antall knappetrykk.

Bruke – velge en metode for å legge til en lenkemelding til Twitter (påvirker ingenting).

Tag – velg en tag som skal publiseres på Twitter (påvirker ingenting).

Stor knapp - zoom geometrisk størrelse knapper.

Nekt å tilpasse Twitter - nekt Twitter-stiler (det er bedre å la boksen være umerket).

Språk – velg språket for knappen.

På høyre side vil det bli generert en kode som må legges til siden.

1.6 Ya.ru

For å gjøre dette, må du fylle ut flere felt som vil dannes nødvendig kode manus.

Størrelse – liten eller stor størrelse knapper.

Stil – velg mellom en knapp eller et ikon.

Tellertilstedeværelse – aktiver eller deaktiver knappetrykktelleren.

Knappens utseende er et eksempel på hvordan knappen vil se ut.

Tittel – velg en tittel for siden (egendefinert eller tittelen på gjeldende side).

Bygg inn kode – den nødvendige koden som legges til nettstedet.

2. Ferdige knapper for nettstedet

Men hvis du ikke vil legge til koden for hver knapp på nettstedet ditt, kan du bruke standardskript som umiddelbart danner en gruppe sosiale nettverksknapper. I dette tilfellet trenger du bare å legge til en kode av et slikt skript på nettstedet ditt, og du vil umiddelbart ha installert knapper for de mest populære sosiale nettverkene.

For å konfigurere blokkeringen og velge de ønskede sosiale nettverkene, følg denne lenken. Skjermbildet nedenfor viser at du kan velge knappene for de ønskede sosiale nettverkene fra de som tilbys, og også litt redigere utseendet til blokken.

Sett med tjenester – utvalg av sosiale nettverksknapper for nettstedet (de med et hakemerke vil vises på nettstedet).

Koden er det nødvendige skriptet som må legges til nettstedet.

2.2 PLUSO-knapper

Nylig har designeren av sosiale nettverksknapper – PLUSO – fått stor popularitet. Du kan gå til nettstedet ved å bruke denne lenken.

Konstruktøren er ganske fleksibel, har mange innstillinger, slik at du kan lage sosiale nettverksknapper som passer perfekt inn i utformingen av nettstedet.

Først må du velge stilen på knapper og tellere fra flere tilbudte (horisontal, vertikal, farget, fargeløs, etc.).

Du må deretter konfigurere en rekke innstillinger ved å velge

blokkplassering (vertikal, horisontal);
knappfarge (lys, mørk);
blokkstørrelse (stor, liten);
teller (tilstedeværelse eller fravær);
bakgrunn (fargeløs eller farget);

Koden vil bli generert i henhold til parametrene du spesifiserte, og deretter må den settes inn på nettstedet.

S hare42

En annen tjeneste som lar deg designe knapper for nettstedet ditt er Share42.com/ru.

Denne generatoren lar deg tilpasse størrelsen på knappene, bestemme de ønskede sosiale nettverkene fra stort antall tilgjengelig, samt redigere utseendet til ikonene.

Velg størrelsen på knappene og de ønskede sosiale nettverkene, og fortsett deretter for å konfigurere flere alternativer.

Type panel med ikoner - viser en blokk med knapper (alternativet "vertikalt flytende" er veldig interessant).

Begrens det synlige antallet ikoner – velg antall knapper som vises (andre vil være skjult bak lenken).

Nettstedkoding – velg kodingen for nettstedet ditt.

Legg til et ikon for Share42.com-siden - kanskje du bør fjerne merket for det.

Vis tellere – aktiver knappeklikketeller (bare når jQuery kjører).

Installasjon av dette manuset ganske komplisert, men det er beskrevet trinn for trinn på selve Share42-nettstedet.

3. Hvordan installere knapper på siden

Hvis koden som må plasseres på nettstedet består av to deler (som tilfellet er med VKontakte-knappen), installeres hver del separat. Hvis koden ikke er delt i to deler, da dette trinnet du kan hoppe over det.

Den første delen av koden må legges til mellom taggene og. For å gjøre dette, gå til WordPress administrasjonspanel og gå til maleditoren.

I maleditoren må du finne filen "Header" (header.php), hvis det ikke er noen, så - "Hovedmal" (index.php). Nå må du finne eller-taggen. Hvis i spesifiserte filer det er ingen slike tagger (alle emner er forskjellige, dette kan godt være tilfelle), da må du åpne alle filene for redigering og se etter taggen i hver av dem. For å søke kan du bruke hurtigtasten "Ctrl+F".

Når du finner nødvendige tagger, kan du plassere den første delen av koden rett før den avsluttende taggen for ikke å berøre kodene til andre skript ved et uhell.

Den andre delen av koden er plassert der du ønsker å se de sosiale medieknappene som er valgt for nettstedet. Hvis koden består av bare en del, er det nok å utføre bare denne operasjonen.

Oftest legges knapper til før artikkelen eller på slutten. Enklere, selvfølgelig, er det andre alternativet. Vi vil vurdere det.

Du må finne stedet der artikkelen slutter (hovedtekstdelen av siden). For å gjøre dette, må du redigere filen "Single entry" (single.php).

Nå må du finne operatøren som er ansvarlig for å vise hovedinnholdet i artikkelen. I mitt tilfelle er dette "the_content", rett etter det er knappekoden plassert.

På samme måte kan du plassere koden i begynnelsen av artikkelen, du trenger bare å finne et sted mellom tittelen og teksten til artikkelen.

Hei venner! Dagens artikkel vil være veldig omfangsrik, men samtidig ekstremt nyttig. Hvorfor bestemte jeg meg for å skrive denne artikkelen? Faktum er at jeg stadig blir spurt om hvordan jeg kan få flere fans på dette eller det sosiale nettverket? Hvorfor følger ikke folk min Facebook-side? Hvorfor følger ingen selskapet på Twitter?

Nesten alle bedrifter har i dag et nettsted og til og med en blogg. Har du en nettside? Håper det! Hvis ikke ennå, må du tenke på det snarest! Vel, det er klart med bloggere og frilansere (konsulenter og frilansere), de har definitivt sin egen adresse på Internett - et nettsted. Venner, problemet er at få nettsteder er virkelig optimalisert for sosiale nettverk. De kan produsere en haug med veldig nyttige og interessant innhold, men ingen ser eller hører dem. SMO (social media optimization) – har du hørt dette begrepet? Så ingen er engasjert i akkurat denne CMO (optimalisering av et nettsted for sosiale nettverk). Men til ingen nytte! Finnes stor mengde metoder som eksperter kjenner til for å skape, som de sier, trafikk på et nettsted. Enkle manipulasjoner + tilstedeværelsen av ideer og kreativitet kan i betydelig grad hjelpe din bedrift å markedsføre. Jeg garanterer deg dette!

Så nedenfor vil jeg fortelle deg hvordan du installerer offisielle sosiale knapper og widgets på nettstedet ditt. Dette vil kun være offisielle knapper og widgets - ingen tjenester eller plugins!

Sosiale nettverk har prøvd veldig hardt og skapt et stort antall ulike knapper og widgets. Ingen har engang hørt om mange, selv om de finnes i fri tilgang for alle. Her vil vi kun vurdere de mest nødvendige og effektive av dem, noe som vil hjelpe deg med å øke fanskaren din, og også gjøre distribusjonen av artiklene og annet innhold enkelt og enkelt for besøkende til ressursen din.

Hvis du ønsker å installere de samme knappene som på min nettside, så skrives det mer detaljer om dette.

Velg sosialt nettverk hvis knapper du vil installere:

Slags sosiale knapper

Før vi kommer inn på installasjonsinstruksjonene for knappen, vil jeg gjøre deg oppmerksom på det faktum at det finnes forskjellige typer knapper:

Facebook, som andre sosiale nettverk. nettverk finnes stort valg sosiale knapper og widgets. Hver av dem har sin egen funksjon og formål. I denne delen vil vi kun vurdere de mest brukte og nødvendige av dem. Du kan se og teste resten på utviklernes nettsider på Facebook.

Merk: La oss bli enige med en gang. I beskrivelsen av hver seksjon vil jeg gi en lenke til nettstedet til utviklerne av det aktuelle sosiale nettverket. nettverk. På slike sider kan du finne lenker til alle eksisterende knapper og widgets. Åpne derfor utviklersiden umiddelbart egen fane og les videre denne artikkelen.

Utviklernettsted på Facebook: https://developers.facebook.com/docs/plugins

"Liker"-knappen

Hvordan installere?

Det er veldig enkelt å installere "Like"-knappen! Du må gå til utviklernes nettside på Facebook (som vi ble enige om, er lenken i begynnelsen av denne delen). Før du begynner å lage nye knapper og widgets, må du opprette en ny applikasjon i Apps-menyen. Dette må gjøres, for uten dette vil ikke Facebook tillate deg å lage knapper!

Hvis du har problemer med å lage en applikasjon eller generere skript, gi meg beskjed i kommentarfeltet, så skal jeg gjøre det enda bedre detaljerte instruksjoner for å installere knapper.

Så, for å installere "Liker"-knappen, klikk på "Liker"-knappen (nettverk) på utviklersiden i venstre kolonne. Nå må du velge blant alternativene som tilbys av Facebook for å få akkurat den widgeten du ønsker.

1) URL for å like - skriv inn lenken til siden, publikasjonen, landingssiden du oppretter en "Liker"-knapp for. Dette kan være alle typer innhold, til og med et bilde eller en video. Hovedsaken er at du oppgir en lenke som brukerne vil dele.

2) Bredde - Hvis du har begrenset plass til knappen, kan du spesifisere bredden på widgeten i piksler. Selve knappene er små, men velger du standardknapper tar teksten ganske mye plass. Jeg vil snakke om dette i neste avsnitt.

3) Layout - Widget-type. Facebook tilbyr 4 alternativer å velge mellom: standard (som på bildet), med en stor teller, med en liten teller og bare knapper. Alt avhenger av din smak, stilen på nettstedet, tilgjengelig plass for knapper, og også ønsket om å vise tellere (dvs. hvor mange som klikket på knappen).

4) Handlingstype - type handling, dvs. hvilken type knapp du vil angi: "Liker" eller "Anbefal". Jeg skrev i detalj om forskjellene mellom disse knappene – og widgets på Facebook generelt – i min.

5) Vis venners ansikter - hvis du vil at knappene skal vise en besøkende på nettstedet ditt avatarene til vennene hans som allerede har klikket på "Liker"-knappen, merk av i denne boksen. Hvis ingen av vennene dine likte siden, artikkelen osv., vil ikke Facebook vise bildet, men i teksten invitere brukeren til å være den første som liker det. Hvis plassen tillater det, anbefaler jeg å slå på dette alternativet, siden ansiktene til venner har en positiv effekt på leserens oppfatning av innholdet, øker tilliten hans og ofte presser ham til å klikke på knappen, i det minste av solidaritet.

Når du har fylt ut alle feltene, klikker du på Hent kode-knappen for å generere koden du vil installere på siden. Den første delen av skriptet installeres i sidetaggen, og den andre delen settes inn der du ønsker å installere knappen.

Siden skal åpne på russisk, men hvis den av en eller annen merkelig grunn er på engelsk, kan du endre språket helt øverst på siden.

Hvordan installere?

Tweet-knapp

En annen velkjent Twitter-knapp er "Tweet"-knappen, som lar brukere dele innholdet ditt med Twitter-følgere.

Hvordan installere?

Alle Twitter-knapper er installert på utviklersiden nevnt ovenfor. Prosessen for alle knappene er nesten identisk - velg riktig type knapper, fyll inn parameterne og kopier koden, som vi deretter limer inn på siden.

Hashtag-knapp

Dette er en veldig interessant knapp, som jeg er sikker på at nesten ingen vet om. Jeg personlig har aldri sett noen bruke det på RuNet. Det er imidlertid veldig bra for å løse visse problemer. For eksempel kan en slik knapp brukes til å promotere alle arrangementer, webinarer, diskusjoner på Twitter under en bestemt tag, markedsføringskampanjer, konkurranser. Samme det! Det er stor plass for kreativitet!

Det er logisk hvis "hashtag"-knappen er installert på sider relatert til denne hashtaggen. For eksempel skrev du en artikkel om en ny begivenhet du er vert for fans på Twitter. For å delta i konkurransen må du bruke en bestemt hashtag. Ved å bruke en knapp som denne vil du gjøre livet til en person enklere, siden ved å klikke på den vil han åpne en tweet med med ønsket hashtag. Han kan ganske enkelt legge til litt tekst og sende tweeten flytende fritt. Og han føler seg bra, og du vil få en ny deltaker. Er ikke det flott? Med et ord, du må slå på jernet uten å forlate kassaapparatet, det vil si mens leseren er under følelsen av det han leser. To minutter senere vil han bli distrahert og kan helt glemme det han nettopp leste.

Mens fantasien løper løpsk, vil jeg dele en idé til med deg. La oss bare si at du er vert for et arrangement (online eller offline). For å markedsføre det, oppretter du en egen artikkel eller side dedikert til dette emnet. Rett der i teksten setter du inn "Hashtag"-knappen og ved siden av den setter du inn en egen widget som viser, i sanntid, alle tweets som bruker denne hashtaggen. Ved å se diskusjonen til andre brukere, vil kanskje din ikke veldig aktive leser være klar til å ta del i den. Målet her er å tiltrekke leserens oppmerksomhet til det som skjer, involvere ham i diskusjonen, og selvfølgelig holde ham på nettstedet.

Hvordan installere?

"Hashtag"-knappen er installert fra samme side som jeg skrev om ovenfor.

Nevn knapp

Til slutt vil jeg fortelle deg om en god knapp til som dessverre ingen bruker. Men til ingen nytte! Dette er, kan man si, en vanlig tweet sendt på forhånd spesifisert profil. Jeg tror at knappen er lite brukt fordi mange ikke vet hvordan og hvor de skal installere den. La meg gi deg et par eksempler som du tenker på. Hvis du vet at din målgruppen er på Twitter og bruker aktivt dette sosiale nettverket. nettverk, hvorfor oppfordrer du ikke folk til å tweete deg direkte fra siden? Dette kan være en tweet til forfatteren av artikkelen, en tweet fra «Om oss»- eller «Kontakter»-siden, en tweet direkte til Twitter-støtte osv. Er du klar over hvor mange muligheter du går glipp av for å krydre din Twitter-konto?

Hvis en person har kommet til nettstedet ditt, har han allerede en viss interesse for deg, så du må presse ham til handling akkurat nå. Om et minutt kan det være for sent! Dessverre har det kommet tider hvor vi glemmer å gjøre noe veldig raskt, siden vi skifter oppmerksomhet fra en ting til en annen hvert minutt. Og jo yngre publikum er, desto mer uttalt er dette fenomenet, så ikke glem eksistensen av denne knappen og prøv å bruke den der det passer.

Hvordan installere?

Vi installerer knappen alt fra samme side. Hvis du har lest instruksjonene for de forrige knappene, bør alle parametrene til "Nevn" -knappen på Twitter være klare for deg.

Se nedenfor hvordan denne knappen fungerer. Ikke glem å tweete meg hva du synes om denne artikkelen :) Jeg vil vite hva leserne mine synes, så jeg vil gjerne høre fra deg.

Eksempel på en "Nevn"-knapp

Twitter-widgeter

Vi har funnet ut av Twitter-knappene. Nå vil jeg kort fortelle deg om de offisielle widgetene som Twitter har. Skript for alle widgets kan du få fra denne link.

Widgets er av følgende typer:

En vanlig widget med de siste tweetene;
Søkewidget som viser søkeresultater etter gitt nøkkel i virkeligheten. Denne typen widget er veldig praktisk for å søke, for eksempel etter merkevare-hashtaggen din. Se et eksempel på bruken i delen "Hashtag"-knappen for Twitter;
Favoritt-widget - Viser tweets du har merket som favoritt. Denne typen widget kan for eksempel brukes til å vise positive anmeldelser om et selskap. Hvorfor ikke?
Samlingswidget - Samlinger er et sted mellom favoritter og lister. Du kan manuelt velge hvilke tweets som havner i samlingen. Vær oppmerksom på at hver samling har sin egen lenke og beskrivelse. Denne funksjonen er svært lite brukt på Twitter, selv om den er veldig interessant.
Lister-widgeten viser profillistene du har opprettet. Også her kan du være kreativ og gjøre noe interessant og nyttig for leseren, som samtidig kommer deg til gode. Hva med en liste over partnere, dine firmakontoer (hvis det er mange av dem), en portefølje med Twitter-kontoer du administrerer (for byråer og frilansere), eller for eksempel en liste over medlemmer som er i klubben din? Igjen, muligheten for kreativitet er ikke begrenset her.

Eksempel på en vanlig Twitter-widget

I kontakt med

Det sosiale nettverket VKontakte, som andre, har en hel haug med forskjellige knapper og widgets. En fullstendig liste over dem kan sees på utviklerens nettsted: https://vk.com/dev/sites

Igjen vil jeg bare gå gjennom de viktigste, ellers blir ikke denne artikkelen en artikkel, men hele boken... Jeg tror at VK-widgets vil være mye lettere å forstå, siden nettstedet og all nødvendig dokumentasjon er tilgjengelig på russisk.

Like-knapp

Hvordan installere?

Først må du gå til widget-siden. Jeg ga en lenke til listen over widgets helt i begynnelsen av VKontakte-delen.

Hvordan installere?

For å sette inn "Community"-widgeten på nettstedet, må du først legge inn en lenke til siden eller gruppen din på VKontakte. Deretter velger du om du vil at widgeten skal vise ansiktene til bandmedlemmer eller sidefans, og siste nytt fra siden eller du vil ha en enkel plugin med en "Like"-knapp. Siden VK-widgeten er veldig lik Facebook, forblir anbefalingene angående type plugin de samme. Jeg vil ikke gjenta meg selv, så hvis du er interessert, sjekk ut Facebook-plugin-delen.

Neste er parametrene knyttet til størrelsen på plugin-en og dens utseende. Alt avhenger av fargepaletten på nettstedet ditt og tilgjengelig plass for plugin. I prinsippet kan du velge hvilken som helst farge, men det anbefales fortsatt å beholde originalen farge palett, siden slike farger er mer kjent for brukerne og ikke skremmer dem. Vel, endelig kom vi til det siste punktet - vi setter inn koden på nettstedet. Som du allerede husker, går den første delen av koden til side-taggen, og den andre delen til stedet hvor plugin-en skal ligge.

Senest opprettet jeg en bloggside "Om SMM" på Vkontakte. Derfor, hvis du ønsker å motta Siste oppdateringer i dette sosiale nettverk, så bli med oss!

Eksempel på "Community"-plugin på VKontakte

"Abonner på forfatter"-widget

Som Facebook-plugin med lignende navn, anbefales denne widgeten for alle som ønsker å utvikle sin personlig merkevare. Hvis du for eksempel er en forfatter av bøker eller en blogg, en journalist, en advokat, en eiendomsmegler osv., hvorfor installerer du ikke en slik knapp på nettstedet ditt? Potensielle kjøpere lettere å få kontakt med ekte person enn for eksempel med en side eller gruppe, som det ikke er klart hvem som står bak. Det er slik vi er skapt, mennesket er et sosialt vesen, og vi elsker personlig kontakt, derfor vil en slik widget være nyttig for enhver profesjonell, uansett hvilket felt du jobber i.

Hvordan installere?

Det kan ikke være enklere å installere det! Gå til widgetsiden på VK og skriv inn profiladressen din. Deretter velger du hvilken knapp du vil installere. Jeg gjentar nok en gang at det er tilrådelig å installere kun knapper gjennom et skript (for eksempel en knapp eller enkel knapp). Hvis du bare trenger en lenke, er det bedre å gjøre det gjennom HTML-kode, for ikke å overbelaste nettstedet med skript, som du lett kan klare deg uten. Effekten vil være den samme, og siden lastes raskere.

Andre VKontakte-widgets

Gutter, ovenfor listet jeg opp de vanligste og mest effektive VK-widgetene, men listen er ikke begrenset til dette. VKontakte har også en hel haug med forskjellige widgets som kan være nyttige i en eller annen situasjon. For eksempel Poll-widgeten, som nesten ingen bruker. Hvis du opprettet en undersøkelse på VK-siden din, hvorfor ikke sette den inn i en artikkel om emnet? Lesere av nettstedet ditt vil kunne stemme på deres alternativ direkte på nettstedet ditt, og informasjon om dette vil også gå til VK. Ikke verst, ikke sant?

Det er også en interessant widget for anbefalinger som viser de mest interessante artiklene på bloggen din eller nettstedet ditt. Graden av interesse for et bestemt innhold bestemmes av antall klikk på "Liker"-knappen. Kort sagt, VKontakte vil automatisk telle hvor mange brukere som klikket på "Like"-knappene og vil samle alle de mest interessante artiklene i denne blokken. Hvis målgruppen din er bredt representert på sosiale medier. VKontakte-nettverk, så er det verdt å prøve og installere disse to widgetene: "Jeg liker" og "Anbefalinger". Jeg er sikker på at resultatene ikke lar deg vente!

La oss nå snakke om LinkedIn. Dette nettverket vokser bare i popularitet her, så det er ikke mange som fortsatt forstår hvordan det kan brukes til å oppnå positive resultater. I Amerika, hvor dette nettverket kommer fra, er det få fagpersoner eller selskaper som ikke har egen profil på LinkedIn. Der vil de se skjevt på deg om du ikke i det minste er registrert på sosiale medier. nettverk. I Europa, bruken av sosiale nettverk varierer sterkt avhengig av land. For eksempel er Storbritannia og Sverige ledende når det gjelder å inkludere LinkedIn i markeds strategi selskaper. Ikke bare oppfordrer de ansatte til å ha nettprofiler, men de ansetter også folk gjennom LinkedIn, annonserer selskaper og produkter og ser etter... potensielle kunder og partnere osv.

Men det er ikke det vi snakker om i dag. Vi skal snakke om sosiale plugins, som LinkedIn har utviklet for oss og hvor og hvordan de skal brukes. Ikke skynd deg å si at dette nettverket ikke er interessant for deg! Og hvis du jobber innen rådgivning, b2b, må du ganske enkelt lese denne delen.

Så, LinkedIn, som alle sosiale nettverk. nettverk, det er egen side, hvor du kan se alle eksisterende knapper og plugins: https://developer.linkedin.com/plugins

Utviklernes nettsted eksisterer dessverre bare på engelsk, så jeg vil prøve å forklare så detaljert som mulig installasjonen av hver plugin og knapp.

Hvordan installere?

"Abonner"-knappen er installert fra den samme utviklersiden, lenken jeg ga i begynnelsen av delen. I venstre kolonne klikker du på "Følg selskap" og LinkedIn vil vise deg nødvendig seksjon. Velg først hvilken type knapp du vil installere: med en vertikal eller horisontal teller, eller kanskje den mest ordinære og klikk på Hent den. Deretter må du skrive inn navnet på selskapet du installerer knappen for. I den aktuelle kolonnen begynner du å skrive navnet bokstav for bokstav, og det skal vises i listen. Noen ganger tar det lang tid å laste listen, så ta deg god tid. Navnet skal skrives nøyaktig slik det står på firmasiden. Velg deretter språket på knappen - russisk, typen knapp og klikk på "Få kode" -knappen. Nå er det bare å lime inn koden Riktig sted på nettsiden og alt er klart! På russisk vil forresten knappen hete "Spor", som jeg egentlig ikke liker. Jeg personlig ville forlatt den engelske versjonen. Heldigvis vet alle allerede hva ordet "følg" betyr :)

Jeg har ikke opprettet en bedriftsside på LinkedIn ennå, så ekte eksempel Ikke ennå. Hvis jeg lager en side i fremtiden, vil jeg definitivt sette den inn i artikkelen som et eksempel.

"Personlig profil"-knapp

Dette er en annen god, men igjen lite brukt plugin. Denne knappen viser et bilde personlig profil, post og viser vennene til brukeren som ser denne plugin-en. Selvfølgelig, slik at LinkedIn kan vise profesjonelle forbindelser leser av nettstedet ditt, må han – leseren – være innlogget (så å si) på LinkedIn. Kort sagt, brukeren må være logget på LinkedIn for at plugin-en skal fungere fullt ut.

Hvem kan denne plugin-en være nyttig for? Jeg tror at for folk som jobber i b2b-sektoren vil det være mest nyttig. Selv om du kan bruke det hvor som helst: på en side om nettstedets forfattere, på en side om selskapets ansatte, på sider om dine kunder og partnere (med deres tillatelse, selvfølgelig) - er det mange alternativer. Hovedsaken er at slike profilknapper passer organisk inn i din nettside og bedriftsstrategi. Hvis dine ansatte har halvfullførte profiler, logger på LinkedIn én gang i året, og har 10 forbindelser, så er det ingen vits i å vise slike profiler. Hvis din bedrift tvert imot promoterer aktivt på sosiale medier. nettverk, så kan en slik plugin gi deg mange fordeler.

+1-knappen

Hvordan installere?

Alle Pinterest-knapper og widgets installeres ved å bruke lenken ovenfor. For å installere "Pin it"-knappen, må du velge den tilsvarende knappen i venstre kolonne.

Pinterest-knapper er litt mer kompliserte å sette opp siden de har mange forskjellige alternativer, men det er fortsatt fullt mulig å sette dem opp selv.

1) I den aller første linjen "Button Type" kan du velge hvilken type knapp du vil installere på siden: et gitt bilde, et hvilket som helst bilde fra siden eller en Pin it-knapp som vil vises på siden/artikkelbildene .

2) Den andre linjen er "Appearence", dvs. typen knapp. Her tilbyr Pinterest mange alternativer å velge mellom: stor eller liten; rektangulær eller rund; rød, grå eller hvit; tekst på engelsk eller japansk.

3) Den tredje linjen er en teller. Her kan du velge å ha disken på toppen, på siden, eller fjerne den helt.

Avhengig av hvilken knapptype du velger, vil alternativene endres.

"Ett bilde"-knappen innebærer at du vil angi et spesifikt bilde som nettstedleseren kan feste for en spesifikk lenke. Det vil si at leseren ikke har noe valg, selv om det er andre bilder på siden din. Hvis du bestemmer deg for å angi et bilde for en knapp, må en slik knapp installeres separat på hver side, siden den krever at du legger inn en lenke til siden/artikkelen. I den første kolonnen må du sette inn en lenke til siden som brukerne vil dele, det vil si lenken de skal feste. Deretter gir du en lenke til bildet. Dette kan forresten være hvilken som helst kilde, også utenfor nettstedet ditt. I den siste kolonnen kan du spesifisere teksten for bildet som brukeren skal dele. Dette kan for eksempel være tittelen på en side eller tittelen på en artikkel. Før du sender PIN-koden, kan brukeren eventuelt erstatte teksten din med sin egen.
Knapp "Hvilket som helst bilde" Eller et hvilket som helst bilde. Denne knappen er veldig enkel og krever ingen tilleggsparametere. Du trenger bare å velge størrelse og type knapp, og også bestemme om du trenger en teller eller ikke.
Knapp “Image hover”, dvs. en knapp som vises på selve bildet når du holder musepekeren over det. Du kan prøve ut hvordan dette fungerer i eksempelbildet på Pinterest.

Nå noen få ord om koden du må installere på siden. Pinterest, som andre sosiale nettverk. nettverk, har to koder: den første delen settes inn i taggen, og den andre delen på stedet der selve knappen er installert. Hvis du har flere Pinterest-knapper på samme side, trenger du bare å angi den første koden én gang.

Et eksempelkodestykke som bare installeres én gang i en sidetag: .

Abonner-knapp

Pinterest, som Google+, skiller ikke mellom personlige kontoer og firmakontoer, så "Abonner"-knappen for begge opprettes på ett sted. Å installere denne knappen er like enkelt som å avskalle pærer. Alt du trenger å gjøre er å skrive inn profillenken din og gi knappen et navn.

Som jeg skrev ovenfor kan jeg ikke sette inn Pinterest-knapper på grunn av en skriptkonflikt, så hvis du vil bli venn med meg på Pinterest, er det bare å følge denne lenken.

Bonus: hyperkoblinger

Nedenfor vil jeg gi eksempler på hvordan slike lenker opprettes manuelt. Du kan også prøve en spesiell lenkegenerator - Share Link Generator. På denne siden kan du lage lenker for Facebook, Twitter, Google+, Pinterest og LinkedIn. Det vil være lett å forstå nettstedet, så jeg vil ikke forklare hva og hvordan. Se imidlertid på tipsene mine, siden lenkegeneratoren ikke gir full lenke Til HTML-format+ kode for hvordan du får lenken til å åpnes i et nytt vindu. Alt dette pluss eksempler på lenker til sosiale medier. Vkontakte-nettverket finner du i denne delen.

hyperkoblingstekst

Her er uttrykket "Hvem vil kjøpe programvare med 8% rabatt på kampanjen?" skrevet av brukeren selv, og nedenfor er hvordan lenken til nettstedet ser ut på det sosiale nettverket. Ikke veldig vakkert, ikke sant?

da vil lenken på det sosiale nettverket se slik ut:

Her "I dag er bursdagen til allsoft.ru - 8 år :)" er teksten skrevet av brukeren, resten er informasjon fra metakoder. Du kan lese mer om disse metataggene på Facebook-side developers.facebook.com/docs/share, andre sosiale nettverk forstår dem også ganske godt.

Hvordan fungerer denne mekanismen generelt:
1. Når brukeren klikker på knappen, sender widgeten en lenke til siden til den sosiale nettverksserveren.
2. Sosial server Nettverket selv får tilgang til denne lenken og leser informasjon om siden - tittel, beskrivelse, bilde.
3. Sosial server nettverk cacher sideinformasjon på siden og viser den på sosiale nettverkssider

Hvordan sende forskjellige beskrivelser for én side.
For eksempel, når du opprettet en kampanjeside på allsoft.ru med en tegneserietest, var det nødvendig å sende forskjellige beskrivelser til sosiale nettverk for det forskjellige antall poeng som ble scoret av brukeren i testen. Siden beskrivelsen av siden mottas av det sosiale nettverket ved å klikke på lenken, så for forskjellige beskrivelser Trenger forskjellige lenker. I tillegg tillater Twitter bare 140 tegn, så den trenger en separat, kortere beskrivelse.

Ny Ya.share(( element: "ya_share_normal", elementStyle: ( "type": "ingen", "quickServices": ["facebook","twitter","odnoklassniki","vkontakte","moimir"] ), link: "http://allsoft.ru/promo/allsoft8let/?share=normal", serviceSpecific: ( twitter: ( tittel: "Testresultat: Dragen er nesten din sterke side! Du kan ikke undervise i Dragonology ennå, men på rett vei!" ) ) ));
1. Her er ya_share_normal ID-en til elementet på siden (), der blokken med sosiale knapper vil vises, linken er lenken, pluss i serviceSpecific for Twitter angir vi tittelen, som er forskjellig fra det som står i og: tittel metatag.

For oppgaven "3 forskjellige testresultater pluss en felles lenke til en side utenfor testen" vil vi ha 4 tagger:

og 4 blokker med JavaScript-kode som ovenfor.

Hvordan endre tittelen og beskrivelsen bufret av det sosiale nettverket.
1. For Facebook er det mest Den beste måten: gå til feilsøkeren deres

Hvis du er redd for at du blir overvåket på Internett, slå av datamaskinen.

Hver nettredaktør, før eller siden, tenker på å installere sosiale knapper på nettstedet sitt. Tross alt, nå kan noen mennesker ikke forestille seg livene sine uten sosiale nettverk, hvorfor frata dem deres evne til å dele artiklene dine? Men over tid mister mange sosiale knapptjenester vettet og gjør hva de vil med kodene sine, og stapper inn alt som ikke er nødvendig. Det er for denne paranoide ideen at du i denne artikkelen finner kodene til de fleste rene knapper deling av sosiale nettverk for nettstedet ditt.

Det er ingen hemmelighet at nesten alle sosiale knapptjenester lekker informasjon om brukerne dine der det er nødvendig. Herregud! Kan ikke være det! Jeg fant nettopp ut om dette! - Gratulerer! De må bruke deg på en eller annen måte, for deres arbeid og innsats. De gjorde gode tjenester, med stor funksjonalitet, bekvemmelighet og "kvalitet". Alt du trenger å gjøre er å velge det du trenger og legge koden der du trenger den. Det er alt. Og hva er fordelen for dem å gjøre slike manøvrer gratis på Internett? Ikke sant. Nei. Så fra tid til annen blir hvert slikt kontor fanget opp i å dumpe data inn i noen DMP.

Jeg vil ikke beskrive hver av disse tjenestene, de har alle god funksjonalitet, noen unike sjetonger, men jeg har ikke noe ønske om å presentere dem separat. Jeg har satt sammen en kort liste nedenfor.

Liste over de fleste populære tjenester sosiale knapper for nettstedet

share.pluso.ru
uptolike.ru
tech.yandex.ru/share
share42.com
sharethis.com
pip.qip.ru
www.addtoany.com
www.po.st
www.addthis.com
sharebuttons.com

Hvis du ikke har nok tid, eller du er for lat til å gjøre mer enn et par bevegelser av hendene og fingrene, kan du trygt bruke disse tjenestene. De er flotte for nettsteder så vel som besøkende. Men ingen garanterer 100 % sikkerhet for brukerdata, 100 % drift av deres DNS og lasting av nettstedene dine. De. Hvis det er en feil på serverne for sosiale knapper, vil sidene dine lastes tregere enn vanlig. Ja, dette skjer sjelden, men det skjer. Selvfølgelig kan du sette asynkron lasting disse skriptene optimerer arbeidet deres, men dette er mer enn et par bevegelser jeg skrev om for de late.

Selvfølgelig er det sosiale mediekoder på Internett som er plassert inne på nettstedet ditt og ikke lekker informasjon noe sted, men mange av dem inneholder eksterne lenker til de samme sosiale nettverkene. Webmastere liker det ikke Eksterne linker og derfor, for de mest paranoide webansvarlige, jeg har samlet klare koder basert på goodshare.ru-skriptet, som vi faktisk takker dem for.

Et eksempel på å installere denne koden er ikke for de som ikke kan det grunnleggende om HTML eller CSS, men hvis du har hendene og litt tid, vil du lykkes hvis du følger instruksjonene strengt. Og så gikk vi:

De ser slik ut:

Seks sosiale nettverk er konfigurert i henhold til standarden: Facebook, VKontakte, Odnoklassniki, Moi Mir, Google pluss, Twitter. Det er mer enn 30 av dem i skriptinnstillingene, men alt dette kan installeres separat om ønskelig. Fordelene med disse knappene, som nevnt av forfatterne, som jeg er helt enig i:

Flott skjerm på alle enheter (Ja, de kan tilpasses alle skjermstørrelser)

Ren kode - rask og sikker side (bare skriptet, CSS og font lastes, som bare er på serveren din)

Alle deler teknologier til mobile budbringere i ett skript (alle typer telegram)

SEO-vennlig - ingen lenker

Inneholder ikke bilder

Hva gjør selve manuset, og hvorfor trengtes dette manuset generelt? Skriptet til disse knappene inneholder alle API-ene for alle sosiale nettverk, og skriptet gjør et hvilket som helst sted på nettstedet til en aktiv delingsblokk.

For eksempel kan du plassere den på tomme DIV-blokker, eller Span, eller bilder, eller tomme lenker, og nesten alle elementer på nettstedet kan gjøres om til disse knappene. I mitt eksempel brukte jeg et skript for tomme Divs.

Angående bildene: de er ikke her. Ikonene du ser er hentet fra fonten, de er bare et symbol og ikke noe mer.

Du kan laste ned arkivet med knapper på .

Det er veldig enkelt å installere disse knappene. Det er bare fire filer i arkivet: Font, CSS, JS og TXT.

1). Du må laste opp skriften til en hvilken som helst mappe på serveren din; du kan plassere den på samme sted som JS eller CSS.

2). Last deretter opp JS til serveren din, og vis den på nettstedet ditt ved å bruke kode hvor som helst, men jeg anbefaler helt nederst på siden:

Dette skriptet består av to deler, den første er Jquery, den andre er selve knappekoden. Hvis du allerede har Jquery aktivert på nettstedet ditt, kan du fjerne den første delen av koden og dermed redusere filstørrelsen.

VIKTIG: (for de som har fjernet en del Jquery-kode) skal knappeskriptet lastes inn etter Jquery-skriptet.

3). Etter å ha installert JS og fonten, bør du legge til CSS på nettstedet ditt. Bare kopier hele innholdet i soc.css-filen til en av CSS-pluginene dine på nettstedet.

VIKTIG: I linje 82 i soc.css-filen endrer du URL-adressen til din Font-plassering!

4). Etter alt dette, kopier HTML-koden fra HTML.TXT-filen til nettstedet ditt der du vil se disse fantastiske knappene.

Strukturen til skriptet har muligheten til å installere tellere for deling av sosiale nettverk, men du kan lese mer i detalj i dokumentasjonen deres på nettstedet.

Og du kan sjekke driften av skriptet rett under disse linjene, fordi det er den som er installert på bloggen min.

Takk for oppmerksomheten, hvis du har spørsmål om installasjon, skriv kommentarer.

Jeg var med deg, late Staurus.