Нийгмийн сүлжээнүүд нь вэбсайтыг сурталчлах, түүнд шинэ зочдыг татахад хэрхэн тусалдаг талаар. Гэхдээ энэ удаад би онолоос дадлага руу шилжиж, ВКонтакте, Facebook, Twitter, Odnoklassniki, MoiMir, Google+, QIP гэх мэт алдартай олон нийтийн сүлжээнүүдээс өөрийн вэбсайтад "Таалагдсан" товчлуурыг хэрхэн байрлуулах талаар илүү дэлгэрэнгүй ярихыг хүсч байна. Yandex.

"Таалагдсан" гэж юу вэ, тэдгээрийн хэрэгцээ юу вэ?

Гэсэн хэдий ч интернет хэл дээр "дуртай" гэдэг нь огт өөр утгатай бөгөөд дараах байдлаар харагдаж байна.

Хэрэв таны сайтын урсгал өдөрт дор хаяж 20 удаа зочилдог бол та ийм товчлууруудыг сайт дээрээ байрлуулах талаар бодох хэрэгтэй, учир нь:

• "Таалагдсан" нь нийгмийн сүлжээн дэх шинэ зочдыг татах: таны блог дээрх энэ эсвэл тэр нийтлэлд "таалагдах" замаар хэрэглэгч энэ тухай нийгмийн сүлжээн дэх хуудсан дээрээ ярих боломжтой;
• та өөрийн сайтын зочдыг ойлгох боломжтой болно: "Таалагдсан" тоо нь таны сайтын бусад хуудсуудаас хамаагүй давсан нийтлэл эсвэл сайтын хуудсуудад дүн шинжилгээ хийснээр таны зочдод юу илүү таалагдаж байгааг ойлгох болно;
• Энэ нь сайтыг хайлтын системд сурталчлах болно: хайлтын системүүд олон нийтийн сүлжээнүүдтэй удаан хугацаанд харьцаж сурсан тул "таалагдах" нь SEO дээр тэмдэг үлдээдэг.

"Таалагдсан" гэсэн магтаал нь сайтад ямар хэрэгтэй, чухал болохыг ойлгоход хангалттай гэж бодож байна. Тиймээс та суулгах зааврыг аюулгүйгээр үргэлжлүүлж болно.

Заавар руу хурдан шилжих

ВКонтакте сайтаас "Би дуртай"

1. Очих виджетийг өөрийн сайт руу холбох хуудас.

3. Виджетийн харагдах байдлыг өөрийн үзэмжээр тохируулж, бэлэн кодыг аваарай:

4. Виджетийн кодыг сайтын хуудасны загварт оруулах ёстой.

Фэйсбүүкээс "Like"

1. "Таалагдсан" товчлуурын тохиргооны хуудас руу очно уу.

2. Виджетийг тохируулаад "Код авах" товчийг дарна уу:

3. Нээгдэх цонхонд хүлээн авсан кодыг хуулж сайтын загварт оруулна.

Твиттерээс "жиргээ"

1. руу очно уу.

2. Товчлуурын төрлийг сонгоно уу:

3. Товчлуурын харагдах байдлыг өөрчлөх:

4. Үүссэн кодыг загварт хуулж буулгана уу:

"Анги!" Одноклассники сайтаас

Мөн "Анги!" товчийг авах нь бүр ч хялбар юм. нийгмийн сүлжээн дэх "Таалагдсан" товчлуурын хамт. "MyMir" сүлжээ. Энэ бол яг энэ тухай бид дараагийн ярих болно.

2-д 1: MoyMir-ээс "Таалагдсан" + Одноклассники дахь "Анги"

1. "Like" болон "Cool!" виджетийг тохируулах хуудас руу очно уу. .

2. Виджетийг өөрийн үзэмжээр тохируулна уу:

3. Үүссэн кодыг хуулж сайтын загварт буулгана уу:

Google+-ээс "+1"

1. Очих "+1" товчлуурын тохиргооны хуудас.

2. Товчлуурын харагдах байдлыг өөрчлөх:

3. Хүлээн авсан кодыг хуулж, загварт буулгана уу:

Бүгдийг нэг дор: залхуу хүмүүст зориулав!

Хэрэв та бүх нийгмийн сүлжээг тусад нь тохируулахаас залхуу байгаа бол бүх нийтийн сүлжээн дээр хуваалцах товчлуурыг ("найзууддаа хэлэх" функц) байрлуулах боломжийг олгодог бэлэн шийдэл, скриптийг ашиглаж болно. Энд сайттай ямар ч хүчтэй холболт байхгүй бөгөөд ийм товчлуурууд нь SEO эффектээс илүү хялбар болгох үүднээс бүтээгдсэн гэдгийг анхаарна уу.

Товчлуурын кодыг аваад вэбсайтдаа буулгана уу.

Хүлээн авсан кодыг хаана оруулах вэ?

Вэбсайтдаа "дуртай" товчлуурыг байрлуулахын тулд эхлээд вэбсайтынхаа аль хуудсууд нь хамгийн ашигтай, хамгийн сайн байршуулахыг шийдэх ёстой. Сайт дээр товчлууруудыг байрлуулах дараах сонголтууд байдаг.

• нүүр хуудас;
• сайтын бүх хуудас;
• нийтлэл/материал хуудас.

Дугуйг дахин зохион бүтээх, форумын нийтлэл, холбоо барих мэдээллийн хуудас гэх мэт товчлууруудыг байрлуулах шаардлагагүй: ийм товчлуурууд таалагдахгүй. Та товчлууруудыг хаана оруулахаа шийдсэний дараа your-site.ucoz.ru/admin хаягаар өөрийн сайтын хяналтын самбар руу нэвтэрч, дараах хаягаар орно уу:

• хуудас засварлагч → сайтын хуудсуудыг удирдах → сайтын үндсэн хуудсыг засах(хэрэв та товчлуурын кодыг зөвхөн сайтын үндсэн хуудсан дээр байрлуулахыг хүсвэл);
• дизайны менежмент → модуль (заавал биш) → материалын хуудас, түүнд өгсөн тайлбар(хэрэв та материал бүр дээр "таалагдах" товчийг байрлуулахыг хүсвэл);
• дизайны менежмент → глобал блок "Сайтын дээд хэсэг"(хэрэв та кодыг сайтын бүх хуудсан дээр байрлуулахыг хүсвэл).

Хүлээн авсан товчлуурын кодыг эдгээр загваруудын аль нэгэнд буулгаж, өөрчлөлтөө хадгална уу. Тодорхой жишээг ашиглан энэ цэгийг харцгаая - "Энэ сонирхолтой байна!" товчийг байрлуул. Манай албан ёсны блогийн uCoz дахь бичлэгийн хажууд.

Сайтын бүх уншигчдад энэ өдрийн мэндийг хүргэе

Энэ нийтлэлд би вэбсайтдаа "Like", "Анги", "Найзууддаа хэлэх" гэх мэт товчлууруудыг хэрхэн нэмэх талаар танд хэлэх болно.

Би бас таны сайтын аль ч хуудсанд тайлбарыг хэрхэн суулгах талаар зөвлөгөө өгөх болно.

Дээрх товчлууруудыг вэбсайт дээрээ суулгах хэд хэдэн арга бий. Тэдгээрийг тус бүрээр нь харцгаая:

Товчлууртай болохыг хүсч буй эх сурвалжийн вэбсайт руу очно уу. Дараа нь хөгжүүлэгчдэд зориулсан хэсгийг олоод зааврын дагуу сайтад оруулах HTML кодыг үүсгэнэ үү.

Yandex-ийн гайхалтай үйлчилгээг ашиглаад тусгай лайк самбар үүсгэ.

Үйлчилгээ бүрийг авч үзье.

-тай холбоотой

Анхаар, товчлуурыг суулгахын тулд та бүртгүүлсэн байх ёстой! Энэ хэсгийн холбоос нь нийгмийн сүлжээний хамгийн доод хэсэгт байрладаг. сүлжээнүүд.

Одоо та тансаг нислэг хийх бүрэн эрх чөлөөтэй боллоо. Та хүссэн үйлчилгээгээ суулгаж болно. Би "Таалагдсан" товчийг сонгосон.

Сонгосон хэсэг дээр дарсны дараа та тохиргооны шидтэнг харах болно.

Одоо тохиргооны шидтэний талаар бага зэрэг. Хөгжүүлэгч бүр өөрийн apiId-тэй. Үүсгэсэн кодоор цонхонд байгаа эсэхийг шалгахаа мартуузай.
Мөн маягтын дээд хэсэгт вэбсайтынхаа хаягийг оруулахаа бүү мартаарай.

Бүгд! Одоо зөвхөн скриптийн талыг нь манай хуудасны толгойд, нөгөө талыг нь товчлуураа байрлуулахыг хүссэн газартаа байрлуулах л үлдлээ.

Эндээс та энэ нь хэрхэн ажилладагийг миний вэбсайтаас харж болно. Хуудасны дээд талд.

Одноклассники ба Миний ертөнц

Энд бид товчлуурын харагдах байдлыг өөрчилдөг. Тэгээд бид кодыг хуулна. Энэ код нь хоёр хэсэгт хуваагдаагүй бөгөөд товчлуурыг байрлуулахыг хүссэн газарт нэн даруй оруулах ёстой.

Үүнийг үйл ажиллагаандаа туршиж үзээрэй.

Yandex-ээр зочилцгооё :)

Энд байгаа бүх зүйл бидний өмнө нь авч үзсэн аргуудаас хамаагүй хялбар юм.
Бид зүгээр л шаардлагатай үйлчилгээ, тэдгээрийн дэлгэцийг сонгоод, үүссэн кодыг сайт руу оруулна.

Тэгээд л болоо? Ийм энгийн үү?

Тодорхой бус зүйл байвал сэтгэгдэл дээр бичнэ үү.

Та сонирхож магадгүй:

	Сайн байна уу эрхэм уншигч, энэ нийтлэлд бид дараахь зүйлийг авч үзэх болно. css гэж юу вэ хэв маягийг хуудастайгаа хэрхэн холбох талаар css хэрхэн ашиглах үндсэн css "properties"	Та өдөр бүр (эсвэл өдөр бүр биш байж магадгүй) компьютерээ асааж, хөтчөө нээж, интернетийг идэвхтэй ашигладаг. Энэ сүлжээ хэрхэн ажилладаг талаар та бодож байсан уу? Үгүй юу? Дараа нь сайтын зохиогч ямар байгааг тайлбарлая.

Сайн байцгаана уу, эрхэм блог уншигчид. Уншигчдын олон тооны хүсэлтийн дагуу бид өнөөдөр VKontakte дээр JQuery болон CSS ашиглан файл татаж авах "Найзуудтайгаа хуваалцах" системийг бий болгох болно.

Найзууд аа, энэ систем нь мэдээжийн хэрэг та юу татаж авахыг санал болгож байгаа, ямар урсгалтай байгаагаас шалтгаалан таны нөөцийн холбоосын тоог хэд дахин нэмэгдүүлэх болно гэдгийг хэлмээр байна.

Мөн энэ систем нь дажгүй "" системтэй маш төстэй гэдгийг хэлмээр байна, энэ нь эргээд Twitter дэх холбоосын тоог нэмэгдүүлдэг. Энэ тохиолдолд бараг бүх зүйл ижилхэн, би бага зэрэг засварласан. Тэгээд эцэст нь бүх зүйл сайхан болсон :-)

За, одоо систем рүүгээ шилжье.

VKontakte дээрх "Найзууддаа хэлэх" систем нь файлыг татаж авах Энэ нь хэрхэн ажилладаг вэ?

Энэ нь тийм ч хэцүү биш гэдгийг та харж байна. :-)

Үүнийг хэрхэн хийх вэ?

Эхлэхийн тулд би товчлуур бүхий хуудасны энгийн загвар зурсан. Та үүнийг жишээн дээрээс харж болно, мөн вэбсайт дээрээ ашиглаж болно, энэ нь эх код дээр байдаг. Хэрэглэгчийг энэ хуудас руу дахин чиглүүлэх бөгөөд ингэснээр тэр файлыг татаж авах нандин үйлдлүүдийг хийх боломжтой болно.

Дараа нь би энэ загварыг зохиосон бөгөөд надад дараах зүйл бий.

Таны харж байгаагаар хуудас нь огт том, төвөгтэй биш юм.

Хамгийн гол нь шошгуудын хооронд эхэнд байгаа бөгөөд дараах скриптүүдийг нэмнэ үү.

jquery.min.js бол JQuery номын сан бөгөөд хэрэв танд байгаа бол дахин суулгах шаардлагагүй.

jquery.vkAction.js - энэ скрипт нь VKontakte цонхыг нээдэг.

script.js - гэхдээ энэ скрипт нь "Татаж авах" товчийг идэвхжүүлдэг.

Одоо хуудсаа бага зэрэг чимэглэхийн тулд CSS загваруудыг нэмье.

CSS

Найзууд аа, загварт заасан бүх зургийг img хавтас дахь эх кодоос олж болно.

* ( захын зай: 0; дэвсгэр: 0; ) их бие ( захын дээд:-50px; өргөн: 100%; өндөр: 100%; өнгө:#555; дэвсгэр: url(img/body.jpg) давтах 100% 0; font-family: "Ubuntu", sans-serif; үсгийн хэмжээ: 0.85em; мөрийн өндөр: 135%; ) ul (жагсаалтын хэв маяг: байхгүй; ) a (өнгө: #538e28; текстийн чимэглэл: байхгүй; ) a:hover (өнгө: #69b432 ) #wrapper (байрлал:харьцангуй; хүрээ:0px хатуу #d6d6d6; өргөн: 1004px; өндөр: 787px; дэвсгэр: url(img/bodycont.jpg) 50px 0px давтагдахгүй; захын зай: 0 автомат; ) #copy(байрлал: үнэмлэхүй; зүүн: 330 пиксел; доод: 0 пиксел; хүрээ: 0 пиксел хатуу # d6d6d6; үсгийн хэмжээ: 11 пиксел; өнгө: # bbb; ) # текст (байршил: үнэмлэхүй; зүүн: 0 пиксел; дээд: 150px; хүрээ: 0px хатуу #d6d6d6; өргөн: 1004px; өндөр: 157px; дэвсгэр: url(img/text.png) давтагдахгүй; захын зай: 0 auto; ) #vk (байрлал: үнэмлэхүй; зүүн: 370px; дээд: 300px; хүрээ: 0px хатуу #d6d6d6; өргөн: 262px; өндөр: 262px; тунгалаг байдал: 0.5; -moz-шилжилт: бүх 0.2 сек 0.01 сек хялбар оруулах; -o-шилжилт: бүх 0.2 сек 0.01 секунд; - webkit-шилжилт: бүх 0.2s 0.01s хялбар оруулах; ) #vk:hover ( тунгалаг байдал: 1.0; ) #str1 (арын дэвсгэр: url(img/str1.png) давтагдахгүй; байрлал: үнэмлэхүй; зүүн: 140 пиксел; дээд: 290 пиксел; хүрээ: 0px хатуу # d6d6d6; өргөн: 262 пиксел ; өндөр: 262px; ) #str2 (арын дэвсгэр: url(img/str2.png) давтагдахгүй; байрлал: үнэмлэхүй; баруун: 100px; дээд: 450px; хүрээ: 0px хатуу #d6d6d6; өргөн: 262px; өндөр: 262px; ) .downloadButton( байрлал: үнэмлэхүй; зүүн: 373 пиксел; дээд: 580 пиксел; өргөн: 253 пиксел; өндөр: 98 пиксел; халих: далд; background: url ("img/dbuthov.png") давтагдахгүй; курсор: анхдагч; ) . downloadButton.active( background:url("img/dbut.png") давтагдахгүй; өргөн:253px; өндөр:98px; курсор:заагч; -moz-шилжилт: бүх 0.2 сек 0.01 сек хялбар оруулах; -o-шилжилт : бүх 0.2 сек 0.01 сек хялбар оруулах; -webkit-шилжилт: бүх 0.2 сек 0.01 сек хялбар оруулах; ) .downloadButton.active:hover( тунгалаг байдал: 0.9; )

Энд бүх зүйл танд ойлгомжтой байгаа гэж найдаж байна. Эхлэхийн тулд би 1004-ээс 787 пикселийн хэмжээтэй блок хийж, дараа нь таны харж буй бүх объектыг үнэмлэхүй байрлалаар байрлуулсан. Эдгээр нь VKontakte болон татаж авах товчлуурууд, мөн сум, бичээсүүд юм.

Хэрэв та ямар нэг зүйлийг ойлгохгүй байвал сэтгэгдэл дээр асуугаарай.

Одоо шууд скриптүүд рүү шилжье.

JS

(функц($)( var win = null; $.fn.tweetAction = функц(сонголтууд, буцаан дуудах)( // Попап цонхны стандарт параметрүүд: options = $.extend(( url:window.location.href ) , сонголтууд); return this.click(function(e)( if(win)( e.preventDefault(); return; ) var width = 550, height = 350, top = (window.screen.height - өндөр)/2 , зүүн = (window.screen.width - өргөн)/2; var config = [ "scrollbars=yes","resizable=yes","toolbar=no","location=yes", "width="+width, "height = "+height,"left="+left, "top="+top ].join(","); // ВКонтакте API-аас гарч ирэх цонх: win = window.open("http:/ /vkontakte.ru/share .php?"+$.param(сонголтууд), "TweetWindow",config); (функц checkWindow())( оролдох( // энэ кодыг try/catch-д оруулах хэрэгтэй: if(! win || win.closed) ( шидэх "Хаалттай!"; ) өөрөөр ( setTimeout(checkWindow,100); ) ) catch(e)( win = null; callback(); ) ))(); e.preventDefault() ; )))); ) )(jQuery);

Таны харж байгаагаар би зөвхөн энэ холбоосыг өөрчилсөн http://twitter.com/intent/tweet? энэ рүү http://vkontakte.ru/share.php? Өөрөөр хэлбэл, би Twitter-ийн холбоосыг VK холбоосоор сольсон. Ингээд л болоо, өөр өөрчлөлт гарсангүй.

Одоо миний дараагийн скрипт ямар болсныг харцгаая.

script.js

$(document).ready(function())( // Манай tweetAction залгаасыг ашиглаж байна. Дэмжигдсэн // параметр бүхий бүрэн жагсаалтыг http://dev.twitter.com/pages/intents#tweet-intent $( -аас үзнэ үү. " #tweetLink").tweetAction(( гарчиг: "VKontakte дээр "Найзууддаа хэлэх" системийг JQuery болон CSS ашиглан хэрхэн татаж авах вэ", url: "http://site/", тайлбар: "Эндээс та ВКонтакте дээр "хэл" системийн найзууддаа"" татаж авах, мөн энэ нь хэрхэн ажилладагийг олж мэдэх" ),function())( // Цонх хаагдах үед: $(".downloadButton") .addClass("active") . attr("href","Файл руу шууд холбоос"); )))));

Чухал

Та энэ скриптийг сайтдаа засах хэрэгтэй.

Гарчгийн талбарт: та нийтлэлийн гарчгийг оруулах шаардлагатай бөгөөд энэ нь харилцагчид харагдах ёстой.

Тодорхойлолтын талбарт: та нийтлэлийн тайлбарыг зааж өгөх хэрэгтэй.

Ингээд л болоо, найзуудаа. Энэ санаа, скриптийг өгсөн tutorialzine.com вэб сайтад баярлалаа гэж хэлмээр байна. За одоо удахгүй уулзацгаая. :-)

Унших хугацаа: 5 минут

Нэгдсэн имэйл болон олон нийтийн мэдээллийн хэрэгслийн маркетингийн кампанит ажил нь илүү олон үзэгчдэд хүрч, ROI (хөрөнгө оруулалтын өгөөж) -ийг нэмэгдүүлдэг. Mailigen-ийн нэгдсэн маркетингийн платформыг ашиглан имэйл болон олон нийтийн мэдээллийн хэрэгслээр дамжуулан үйлчлүүлэгчиддээ хэрхэн хүрэх талаар олж мэдээрэй.

Яагаад "Найзууддаа хэлэх" олон нийтийн мэдээллийн товчлууруудыг имэйлдээ нэмэх хэрэгтэй вэ?

Дижитал хөрөнгийн менежментийн WebDAM компанийн 2014 оны маркетингийн стратегийн талаархи 2014 оны судалгаагаар үүнд гурван сайн шалтгаан бий:

• 2013 онд борлуулагчдын 43% нь LinkedIn-ээр дамжуулан худалдан авагчаа олсон байна

"Найзууддаа хэлэх" олон нийтийн мэдээллийн товчлуурыг имэйл мессежэнд хэрхэн нэмэх вэ Алхам 1

Та имэйл мэдээллийн товхимол үүсгэх дөрөв дэх шатанд байгаа бол нийгмийн сүлжээнд хуваалцах блокыг эдгээр товчлууруудыг суулгахыг хүссэн газар руу чирнэ үү.

Алхам 2

Үүний дараа шаардлагатай бүх тохиргоог хийх боломжтой шинэ цонх нээгдэнэ.

• Хэрэв та "И-мэйл архив" -ийг сонговол захидал хүлээн авагч нь захидлын агуулгыг бүхэлд нь олон нийтийн сүлжээнд хуваалцах боломжтой болно. Мэдээллийн товхимолыг танилцуулга болгон ашиглах болно.

• Хэрэв та "Бусад холбоос"-ыг сонговол хуваалцахыг хүссэн контентын холбоосыг оруулах боломжтой. Жишээлбэл, энэ нь таны блог дээрх шинэ нийтлэл байж болно.

• Дараа нь товчлууруудын хажууд байрлах текстийг оруулаад товчлууруудын хэмжээ, тэдгээрийн хоорондох зайг сонгоно уу.

Facebook Үүнийг нэгтгэн дүгнэе

Сүүлийн үед вэбсайт хөгжүүлэхэд тавигдах шаардлагад хоёр дахь (хэрэв эхнийх нь биш бол) үйлчлүүлэгч үүнийг нийгмийн сүлжээнд холбохыг шаарддаг. Вэбсайт дээрх "Нийгмийн" товчлуурууд нь зорилтот үзэгчдийг татах, контент түгээх, ерөнхийдөө PR-ыг түгээх №1 хэрэгсэл юм. Мөн энэ нь бүрэн үнэгүй!

Нийгмийн сүлжээнүүд нь сайт дээр байрлуулах товчлуур болон виджетийнхээ кодыг өгч, сайтын удирдлагын системд суулгах зааварчилгааг өгдөг. Аливаа CMS (үйлдлийн систем) нь тэдгээрийг суулгах боломжийг олгодог бөгөөд гол зүйл бол тэдгээрийг вэбсайтынхаа дизайнтай нийцүүлэх явдал юм.

Онцлог, функцууд нь юу вэ?

Хэрэв таны сайт алдартай нийгмийн сүлжээнд харилцдаг хүмүүст зориулагдсан бол. сүлжээнүүд, жишээлбэл, Vkontakte, Twitter, Instagram, Facebook, Google+, Pinterest гэх мэт, мөн та тэдгээрийг бүгдийг нь хамрахыг хүсч байгаа бол хэмжээ, дизайны хувьд ялгаатай байж болох тул тус тусад нь товчлуур суулгахгүй байхын тулд. , бид нэгтгэгчийн үйлчилгээг ашиглахыг зөвлөж байна. Эдгээр нь сайтын зочдод ямар нийгмийн сүлжээ ашиглаж байгаагаас үл хамааран найз нөхөдтэйгээ мэдээллээ хурдан хуваалцах боломжийг олгодог энгийн бөгөөд тохиромжтой хэрэгсэл юм. Доор бид хамгийн алдартай үйлчилгээг авч үзэх болно.

Нийгмийн сүлжээний товчлуурууд Pluso-г хуваалцаарай