Arról, hogy a közösségi hálózatok hogyan segíthetnek egy webhely népszerűsítésében és új látogatók megszerzésében. De ezúttal az elméletről a gyakorlatra szeretnék áttérni, és részletesebben beszélni arról, hogyan helyezhet el „Tetszik” gombokat a webhelyén olyan népszerű közösségi hálózatokról, mint például: VKontakte, Facebook, Twitter, Odnoklassniki, MoiMir, Google+, QIP és Yandex .

Mik azok a „lájkok” és mi a hasznuk?

Az internetes szlengben azonban a „lájkok” egészen mást jelentenek, és így néznek ki:

Ha webhelyének forgalma legalább napi 20 látogatás, akkor érdemes ilyen gombokat elhelyezni a webhelyén, mert:

• A „lájkok” új látogatókat vonzanak a közösségi hálózatokról: ha „lájkolja” ezt vagy azt a bejegyzést a blogjában, a felhasználó beszélhet róla a közösségi hálózat oldalán;
• Ön képes lesz megérteni webhelye látogatóit: olyan cikkek vagy webhelyoldalak elemzésével, amelyek „tetszik” száma jelentősen meghaladja webhelye más oldalait, megértheti, hogy látogatói mit szeretnek jobban;
• ezzel népszerűsíteni fogja az oldalt a keresőkben: a keresőmotorok már régóta megtanulták a közösségi hálózatokkal való interakciót, ezért a „lájkok” nyomot hagynak a SEO-ban.

Azt hiszem, a „lájkok” dicséretei elegendőek ahhoz, hogy megértsük, mennyire hasznos és fontos ez az oldal számára. Ezért nyugodtan folytathatja a telepítési utasításokat.

Gyors ugrás az utasításokhoz

"Szeretem" a VKontakte-ból

1. Nyissa meg a következőt: oldal a widget webhelyhez való csatlakoztatásához.

3. Szabja testre a widget megjelenését ízlése szerint, és szerezze be a kész kódot:

4. A widget kódját be kell illeszteni a webhely oldalsablonjaiba.

"Tetszik" a Facebookról

1. Lépjen a "Tetszik" gomb beállítási oldalára.

2. Konfigurálja a widgetet, és kattintson a "Kód lekérése" gombra:

3. A megnyíló ablakban másolja ki a kapott kódot, és illessze be a webhelysablonokba.

"Tweet" a Twitterről

1. Nyissa meg a következőt: .

2. Válassza ki a gomb típusát:

3. A gomb megjelenésének testreszabása:

4. Másolja ki és illessze be a kapott kódot a sablonokba:

"Osztály!" az Odnoklassnikitől

És még egyszerűbb megszerezni az „Osztály!” gombot. a közösségi oldalak „Tetszik” gombjával együtt. "MyMir" hálózat. Pontosan erről fogunk beszélni a következőkben.

2 az 1-ben: „Tetszik” a MoyMir-től + „Class” az Odnoklassnikitől

1. Nyissa meg a „Tetszik” és a „Cool!” widgetek beállítására szolgáló oldalt. .

2. Szabja testre a widgetet ízlése szerint:

3. Másolja ki és illessze be a kapott kódot a webhelysablonokba:

"+1" a Google+-ról

1. Nyissa meg a következőt: "+1" gomb beállítási oldala.

2. A gomb megjelenésének testreszabása:

3. Másolja ki a kapott kódot, és illessze be sablonokba:

Minden egyben: lustáknak!

Ha túl lusta az összes közösségi hálózat külön beállításához, használhat kész megoldásokat és szkripteket, amelyek lehetőséget biztosítanak egy univerzális megosztási gomb (a „mondd el a barátoknak” funkció) elhelyezésére az összes népszerű közösségi hálózaton. Kérjük, vegye figyelembe, hogy itt nincs erős kapcsolat az oldallal, és az ilyen gombok inkább a kényelem, mint a SEO hatás miatt jönnek létre.

Szerezzen be gombkódokat, és illessze be őket webhelyére.

Hova kell beírni a kapott kódokat?

Ahhoz, hogy a „tetszik” gombokat elhelyezhesse a webhelyén, először el kell döntenie, hogy webhelyének mely oldalai a legjövedelmezőbbek és a legjobban elhelyezni őket. A következő lehetőségek állnak rendelkezésre a gombok webhelyen való elhelyezésére:

• kezdőlap;
• a webhely összes oldala;
• bejegyzés/anyag oldal.

Nem kell újra feltalálni a kereket, és gombokat elhelyezni a fórumbejegyzésekben, az elérhetőségeken és így tovább: az ilyen gombok nem fognak tetszeni. Miután eldöntötte, hová helyezi be a gombokat, jelentkezzen be webhelye vezérlőpultjára a your-site.ucoz.ru/admin címen, és lépjen a következő helyre:

• oldalszerkesztő → webhelyoldalak kezelése → a webhely főoldalának szerkesztése(ha csak az oldal főoldalán szeretne gombkódokat elhelyezni);
• tervezés menedzsment → modul (opcionális) → anyag oldala és megjegyzések hozzá(ha szeretne „tetszik” gombokat elhelyezni az egyes anyagokhoz);
• tervezés menedzsment → globális blokk "A webhely teteje"(ha el szeretné helyezni a kódot az oldal összes oldalán).

Illessze be a kapott gombkódokat ezen sablonok egyikébe, és mentse el a módosításokat. Nézzük meg ezt a pontot egy konkrét példa segítségével – helyezzük el az „Ez érdekes!” gombot. hivatalos blogunk uCoz bejegyzése mellett.

Üdvözlöm az oldal minden olvasóját

Ebben a cikkben elmondom, hogyan adj hozzá „Tetszik”, „Osztály”, „Szólj a barátoknak” stb. gombokat a webhelyedhez.

Tanácsot adok arra is, hogyan telepíthet megjegyzéseket webhelye bármely oldalára.

A fenti gombokat többféleképpen telepítheti webhelyére. Nézzük mindegyiket:

Nyissa meg annak az erőforrásnak a webhelyét, amelyről egy gombot szeretne kapni. Ezután keresse meg a fejlesztőknek szóló részt, és ott az utasításokat követve generáljon HTML-kódot, amelyet beilleszthet a webhelybe.

Használja a Yandex csodálatos szolgáltatását, és hozzon létre egy különleges hasonló panelt.

Nézzük meg az egyes szolgáltatásokat.

Kapcsolatban áll

Figyelem, a gomb telepítéséhez regisztráció szükséges! A szakasz linkje a közösségi hálózat legalján található. hálózatok.

Most teljes szabadságot élvezhet a képzeletbeli repülésekhez. Bármilyen szolgáltatást telepíthet. Kiválasztottam a "Tetszik" gombot.

Miután a kiválasztott szakaszra kattintott, megjelenik egy telepítővarázsló.

Most egy kicsit a telepítő varázslóról. Minden fejlesztőnek saját apiIdje van. Ügyeljen arra, hogy ellenőrizze annak jelenlétét az ablakban a generált kóddal.
Ne felejtse el feltüntetni a webhely címét az űrlap tetején.

Minden! Most már csak az van hátra, hogy a forgatókönyv felét az oldalunk fejlécébe, a másik felét pedig a törzsbe helyezzük oda, ahol a gombját szeretnénk.

Itt megnézheti, hogyan működik a weboldalamon. Az oldal tetejére.

Odnoklassniki és az én világom

És itt szabjuk testre a gomb megjelenését. Aztán másoljuk a kódot. Ez a kód nem oszlik két részre, azonnal be kell illeszteni arra a helyre, ahol a gombot szeretné elérni.

Próbáld ki működés közben.

Nézzük meg a Yandexet :)

Itt minden még egyszerűbb, mint a korábban megvizsgált módszereknél.
Egyszerűen kiválasztjuk a szükséges szolgáltatásokat, azok megjelenítését és beillesztjük a kapott kódot az oldalra.

Ez minden? Olyan egyszerű?

Írd meg kommentben, ha valami nem világos.

Érdekelheti:

	Kedves olvasó! Ebben a cikkben a következőket fogjuk megvizsgálni: mi az a css hogyan kapcsolhat stílusokat az oldalához hogyan kell használni a css-t alapvető css "tulajdonságok"	Minden nap (vagy talán nem minden nap) bekapcsolja a számítógépet, megnyitja a böngészőt és aktívan használja az internetet. Gondolkozott már azon, hogyan működik ez a hálózat? Nem? Ezután hagyja, hogy a webhely szerzője elmagyarázza, hogyan állnak a dolgok.

Üdvözlet, kedves blogolvasók. Az olvasók számos kérése miatt ma egy klassz „Oszd meg barátokkal” rendszert készítünk a VKontakte-on, hogy letölthessünk egy fájlt JQuery és CSS használatával.

Barátaim, szeretném elmondani, hogy ez a rendszer többszörösére növeli az erőforrásukra mutató hivatkozások számát, természetesen attól függően, hogy mit kínálnak letöltésre, és milyen forgalommal rendelkezik.

Azt is szeretném elmondani, hogy ez a rendszer nagyon hasonlít a menő "" rendszerhez, ami viszont növeli a linkek számát a Twitteren. Ebben az esetben szinte minden ugyanaz, csak egy kicsit én szerkesztettem. És végül minden jól alakult :-)

Nos, most térjünk át magára a rendszerre.

A „Tell Friends” rendszer a VKontakte-on a fájl letöltéséhez Hogyan működik?

Látod, nem is olyan nehéz. :-)

Hogyan kell csinálni?

Kezdésnek egy egyszerű sablont rajzoltam egy gombos oldalhoz. A példában láthatja, és a webhelyén is használhatja, forráskódban elérhető. A felhasználó át lesz irányítva erre az oldalra, hogy elvégezhesse a fájl letöltésének dédelgetett műveleteit.

Aztán elkészítettem ezt a sablont, és ezt kaptam:

Amint látja, az oldal egyáltalán nem nagy vagy összetett.

A lényeg a címkék közötti elején található, és adja hozzá a következő szkripteket:

A jquery.min.js a JQuery könyvtár, ha már rendelkezik vele, akkor nem kell újra telepítenie

jquery.vkAction.js - ez a szkript megnyit egy VKontakte ablakot.

script.js - de ez a szkript aktiválja a „Letöltés” ​​gombot.

Most adjunk hozzá néhány CSS-stílust, hogy kissé díszítsük oldalunkat.

CSS

Barátaim, a stílusokban feltüntetett összes kép megtalálható a forráskódban az img mappában.

* ( margó: 0; kitöltés: 0; ) törzs ( margó felső: -50 képpont; szélesség: 100%; magasság: 100%; szín: # 555; háttér: url (img/body.jpg) ismétlés 100% 0; font-family: "Ubuntu", sans-serif; font-size:0.85em; line-height:135%; ) ul ( list-style:none; ) a ( color: #538e28; text-decoration:none; ) a:hover ( szín: #69b432 ) #wrapper ( pozíció:relatív; keret: 0px tömör #d6d6d6; szélesség: 1004px; magasság: 787px; háttér: url(img/bodycont.jpg) 50px 0px no-repeat; margó: 0 automatikusan 150 képpont; szegély: 0 képpont tömör #d6d6d6; szélesség: 1004 képpont; magasság: 157 képpont; háttér: url(img/text.png) nem ismétlődik; margó: 0 automatikus; ) #vk ( pozíció: abszolút; bal: 370 képpont; felül: 300 képpont; szegély: 0 képpont tömör #d6d6d6; szélesség: 262 képpont; magasság: 262 képpont; átlátszatlanság: 0,5; -moz-átmenet: mind 0,2 s 0,01 s könnyű behelyezés; -o-áttérés: mind 0,2 s 0,01 s könnyű behelyezés; - webkit-átmenet: minden 0,2 s 0,01 s könnyű beépülés; ) #vk:hover ( átlátszatlanság: 1,0; ) #str1 ( háttér: url(img/str1.png) nem ismétlődik; pozíció: abszolút; bal: 140 képpont; felül: 290 képpont; szegély: 0px szilárd #d6d6d6; szélesség: 262 képpont ; magasság: 262px; ) #str2 ( háttér: url(img/str2.png) nincs ismétlés; pozíció: abszolút; jobbra: 100 képpont; felső: 450 képpont; szegély: 0 képpont tömör #d6d6d6; szélesség: 262px; magasság: 262px; ) .downloadButton(pozíció:abszolút; bal:373px; felső:580px; szélesség:253px; magasság:98px; túlcsordulás:rejtett; background:url("img/dbuthov.png") no-repeat; kurzor:default; ) . downloadButton.active( background:url("img/dbut.png") no-repeat; szélesség: 253 képpont; magasság: 98 képpont; kurzor:mutató; -moz-transition: minden 0,2 s 0,01 s könnyű beillesztés; -o-transition : minden 0,2 s 0,01 s könnyű beépíthetőség; -webkit-transition: minden 0,2 s 0,01 s egyszerű; ) .downloadButton.active:hover( átlátszatlanság: 0,9; )

Remélem, itt minden világos számodra. Először készítettem egy 1004 x 787 pixel méretű blokkot, amelybe az összes látható objektumot abszolút pozicionálással elhelyeztem. Ezek a VKontakte és a letöltés gombok, valamint maguk a nyilak és a feliratok.

Ha valamit nem értesz, kérdezz kommentben.

Most menjünk közvetlenül a szkriptekre.

JS

(function($)( var win = null; $.fn.tweetAction = function(options,callback)( // Normál paraméterek a felugró ablakhoz: options = $.extend(( url:window.location.href ) , options) ; return this.click(function(e)( if(win)( e.preventDefault(); return; ) var width = 550, height = 350, top = (ablak.képernyő.magasság - magasság)/2 , left = (window.screen.width - width)/2; var config = [ "scrollbars=yes","resizable=yes","toolbar=no","location=yes", "width="+width, "height= "+height,"left="+left, "top="+top ].join(","); // Előugró ablak a VKontakte API-ból: win = window.open("http:/ /vkontakte.ru/share .php? win || win.closed) ( dobja "Closed!"; ) else ( setTimeout(checkWindow,100); ) ) catch(e)( win = null; callback(); ) ))(); e.preventDefault() ; )); ); ) )(jQuery);

Amint látja, csak ezt a linket módosítottam: http://twitter.com/intent/tweet? erre a http://vkontakte.ru/share.php?. Más szóval, a Twitter linkjét VK hivatkozásra cseréltem. Ennyi, nem volt több változás.

Most pedig lássuk, mi lett a következő forgatókönyvem.

script.js

$(document).ready(function())( // A tweetAction beépülő modulunk használata. A támogatott // paraméterek teljes listájáért lásd: http://dev.twitter.com/pages/intents#tweet-intent $( " #tweetLink").tweetAction(( title: "Hogyan hozzunk létre egy "Tell Friends" rendszert a VKontakte-on a letöltéshez JQuery és CSS használatával", url: "http://site/", description: "Itt töltheti le a cool "Tell" system friends"" on VKontakte a letöltéshez, és megtudja, hogyan működik" ),function())( // Amikor az ablak bezárul: $(".downloadButton") .addClass("active") . attr("href","Közvetlen hivatkozás a fájlhoz"); )); ));

Fontos

Ezt a szkriptet szerkesztenie kell a webhelyéhez.

A cím mezőben: meg kell adni a bejegyzés címét, aminek meg kell jelennie a névjegyben.

A leírás mezőben: meg kell adnia a bejegyzés leírását.

Ennyi, barátaim. Szeretnék köszönetet mondani a tutorialzine.com weboldalnak az ötletért és a szkriptekért. Nos, most hamarosan találkozunk. :-)

Olvasási idő: 5 perc

Az integrált e-mail és közösségi média marketingkampányok több közönséget érnek el, és növelik a ROI-t (befektetés megtérülését). Ismerje meg, hogyan használhatja a Mailigen integrált marketingplatformját az ügyfelek e-mailen és közösségi médián keresztül történő eléréséhez.

Miért adjunk hozzá „Szólj a barátoknak” közösségi média gombokat az e-mailekhez?

A WebDAM digitális vagyonkezelő társaság 2014-es marketingstratégiákról szóló 2014-es tanulmánya szerint ennek három jó oka van:

• 2013-ban az értékesítők 43%-a talált vevőt a LinkedInen keresztül

„Mondd el a barátoknak” közösségi média gombok hozzáadása egy e-mail üzenethez 1. lépés

Amikor az e-mailes hírlevél létrehozásának negyedik szakaszában jár, húzza a közösségi hálózatokon való megosztás blokkját arra a helyre, ahová ezeket a gombokat telepíteni szeretné.

2. lépés

Ezt követően megnyílik egy új ablak, amelyben elvégezheti az összes szükséges beállítást.

• Ha az „E-mail archívum” lehetőséget választja, a levél címzettje a teljes levél tartalmát megoszthatja a közösségi oldalakon. A hírlevél címe bevezető szövegként lesz használva.

• Ha az „Egyéb hivatkozás” lehetőséget választja, bármilyen megosztani kívánt tartalomra mutató hivatkozást megadhat. Ez lehet például egy új cikk a blogodban.

• Ezután írja be a gombok mellett található szöveget, válassza ki a gombok méretét és a köztük lévő távolságot.

Facebook Foglaljuk össze

A közelmúltban minden második (ha nem az első) vásárló a webhelyfejlesztés követelményeiben azt kéri, hogy feltétlenül csatlakoztassa a közösségi hálózatokhoz. A „közösségi” gombok a webhelyeken az első számú eszköz a célközönség vonzására, a tartalom terjesztésére és általában a PR-re. És ez teljesen ingyenes!

A közösségi hálózatok kódokat biztosítanak gombjaikhoz és widgetjeikhez a webhelyen való elhelyezéshez, és utasításokat adnak ezek telepítéséhez a webhelykezelő rendszerben. Bármely CMS (operációs rendszer) lehetővé teszi ezek telepítését, a lényeg az, hogy harmonikusan illeszkedjenek a webhely kialakításába.

Mik a jellemzők és funkciók?

Ha webhelye olyan embereket céloz meg, akik a népszerű közösségi hálózatokon kommunikálnak. hálózatokon, például Vkontakte, Twitter, Instagram, Facebook, Google+, Pinterest stb., és le szeretné fedni mindet, akkor annak érdekében, hogy ne telepítsenek mindegyikhez külön-külön gombokat, tekintettel arra, hogy méretük és kialakításuk eltérő lehet , javasoljuk az aggregátor szolgáltatások használatát. Ezek egyszerű és kényelmes eszközök, amelyek segítségével a webhely látogatói gyorsan megoszthatnak információkat barátaikkal, függetlenül attól, hogy milyen közösségi hálózatot használnak. Az alábbiakban a legnépszerűbb szolgáltatásokat tekintjük át.

Social Media Buttons Share Pluso