Sayğaclarla öz paylaşma düymələrimizi edirik. Sosial media düymələri

Salam, əziz oxucular blog saytı. Yəqin ki, başlıqdan təxmin etdiyiniz kimi, vəziyyətlərin uğurlu birləşməsi ilə veb saytınıza məqalələr cəlb etməyə çox ciddi kömək edə biləcək sosial düymələr haqqında danışacağıq. yüksək keyfiyyət məqalənin özü, sosial şəbəkələrdən və xidmətlərdən çoxlu sayda ziyarətçi.

Sosial siqnallar da nəzərə alınır Axtarış motorları saytınızı sıralayarkən. Çoxlu sayda Twitter, Google+, Facebook-da keyfiyyətli hesablara paylaşımlar (mümkündür ki, VKontakte və digər şəbəkələr də nəzərə alınır) sizə yüksəlməyə imkan verə bilər. müəyyən sayda daha yüksək pillələr və, bəlkə də, Yuxarıya daxil olun və əgər varsa, orada qalın davranış amilləri səni ruhdan salmayacaq.

Ümumiyyətlə, məzmunu paylaşmaq üçün skriptlər (düymələr) təmin edən xidmətlər sosial Mediyaİnternetdə çox şey var, lakin hamısına etibar edilməməlidir (onlar sizdən asanlıqla və ya pis səbəblərdən başqa bir şəkildə istifadə edə bilərlər). Əgər onların kodları çox yaxşı yerləşdirilməyibsə və serverlərinin hesablama imkanları çox güclü deyilsə, onlar sadəcə “saytı asmaq” qabiliyyətinə malikdirlər. Baxmayaraq ki, bu çatışmazlıqlardan azad olan layiqli variantlar var və mən onları bu nəşrin sonunda sadaladım.

Düymələrdə konkret sosial şəbəkəyə olan paylaşımların sayını göstərmək də mümkündür. Üstəlik, yalnız bu blokdan istifadə edilənlər deyil, bütün yazılar nəzərə alınır (məlumatlar API vasitəsilə yüklənir). Düzdür, bütün sosial şəbəkələr dəstəklənmir (yalnız facebook, Google+, Moi Mir, Odnoklassniki.ru, VKontakte), lakin əsas olanların əksəriyyəti. Təəssüf ki, Twitter bu yaxınlarda bu siyahıdan çıxarıldı, çünki... API vasitəsilə bu məlumatları təqdim etməyi dayandırdı.

Məsələn, burada Twitter-də paylaşmaq üçün başlıqları qısalda bilərsiniz, çünki onların uzunluğunda məhdudiyyət var (bunu necə edəcəyinizi aşağıda oxuyun), paylaşma sayğaclarının göstərilib-göstərilməməsini konfiqurasiya edin, menyunun açılması istiqamətlərini aşağıdakılarla təyin edin. əlavə düymələr sosial şəbəkələr və daha çox. Ümumiyyətlə, ətrafı qazın və baxın.

Ümumiyyətlə, saytda sosial şəbəkələr quraşdırmağı təklif edən yerli paylaşma düymələri ilə müqayisədə (bu barədə aşağıda oxuyun), Yandex bloku yükləmə sürəti, yığcamlıq və quraşdırma və konfiqurasiya asanlığında qalib gəlir. Məsələn, keçmişdə mənim rəsmi Twitter düyməm serverlərindəki problemlərə görə tez-tez yüklənmirdi, buna görə də Java-da hazırlanmış skript uzun müddət yüklənmirdi. sol menyu mənim blogum. Mümkündür ki, bu problem indi həll olunub, lakin saytın yükləmə sürətinin optimallaşdırılması baxımından bir çox skript həmişə birindən daha pis olacaq.

Düşünürəm ki, Yandex-in əlçatanlıqla bağlı problemləri çətin ki, yaxşı qazancdır kommersiya təşkilatı, onun imicinə olduqca həssasdır. Bundan əlavə, əgər varsa, o zaman bu düymələrə kliklərin statistikasını izləyə bilərsiniz ki, bu da faydalı ola bilər.

Adi ölçülü nişanlar olan bloka əlavə olaraq, sayğacları olan bir blok edə bilərsiniz və Yandex həmçinin əlavə sosial şəbəkələr üçün lazımi sayda düymələri göstərdikdən sonra yerləşən spoyler altında gizlənəcək bir açılan menyu əlavə etməyi təklif edir. əsas sosial şəbəkələr (məsələn, VKontakte, MoiMir, ):

Bu blokdakı düymələrə (açılan menyu ilə) sayğaclar əlavə etmək istəyirsinizsə, sadəcə olaraq saytdakı koduna (Div teqləri arasında) daha bir atribut daxil edin: data-counter="“ və bu qədər. Dediyim kimi, daha sadə ola bilməzdi, siz istifadə edə bilərsiniz sayğaclar da aşağıda müzakirə olunan kiçik düymələrə əlavə olunacaq:

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

Siz həmçinin bütün ikonaları daha kiçik düymələrin eskizləri ilə əvəz edə bilərsiniz, onları blok daxil edərkən şəxsən faydalı hesab etdim. üst hissəsi bu blogdakı bütün məqalələr:

Birinci hissədə açılan və bağlanan SCRIPT teqləri Yandex serverindən yüklənəcək skriptə gedən yolu, ikinci hissədə isə şablonunuzdakı yerə yerləşdirilməli olan daxiletmə kodunun özü var. bu blok göstəriləcək.

Yandex-dən veb saytına sosial düymələri necə daxil etmək olar

Buna görə də, sosial media düymələrinin göstərilməli olduğu yerə Div bloku ilə birlikdə script zəng kodunu daxil edirəm. Yaxşı, onun yüklənməsi əsas səhifənin yükləmə sürətinə təsir göstərməməsi üçün Yandex sənədlərində verilən tövsiyələrə əməl edərək, ona async="async" atributunu əlavə etdim və bununla da onu işə saldım. asinxron yükləmə skript:

Problem saytınızın mühərrikinin çoxlu faylları arasında ən alt hissənin formalaşmasına cavabdeh olanı tapmaqda yarana bilər. HTML kodu bağlama etiketi /BODY və ya Başı təşkil edən etiketlə. Həm də mövzu fayllarında kod parçası daxil etməyiniz lazım olan bir yer tapın Div etiketləri(düymələri özləri yerləşdirmək üçün).

Prinsipcə, həm WordPress-də, həm də Joomla-da bu, istifadə olunan mövzu fayllarından birində edilir. Çünki Bu blog WordPress-də işləyir, ona görə də bunun üçün danışacağam.

Əgər siz WordPress ilə işləyirsinizsə, onda skriptə zəng etmək üçün kodu daxil etmək üçün redaktə üçün footer.php faylını açmalı olacaqsınız (bağlanan Bədən teqini və ya header.php-ni tapa bilərsiniz (onu orada tapa bilərsiniz) Baş etiketləri) qovluqdan:

/wp-content/themes/qovluğun adı_with_theme_used/footer.php

İndi kodun ikinci hissəsini veb sayt şablonunuzda və ya birbaşa məqalənin düzgün yerinə daxil etmək qalır. sosial düymələr Sayt səhifələrində düymələri olan blokun yerləşməsinə cavabdeh olan Yandex:

Yeri gəlmişkən, mən bir daha rezervasiya edəcəm: bu blokdan hər hansı bir düyməni silmək istəyirsinizsə, Yandex veb saytındakı konstruktora yenidən getmək lazım deyil. Siz sadəcə onun girişini bu siyahıdan silə bilərsiniz (ondan sonra gələn vergüllə birlikdə, məsələn, “vkontakte”). Yaxşı, başa düşürsən ...

Yaxşı, siz CSS-dən istifadə edərək blok daxilində düymələrin yerini dəyişdirə bilərsiniz.

Li.ya-paylaş2__element (fon: heç biri! vacib; doldurma: 0 7px 0 7px! vacib;)

Çünki altında adaptiv istifadə edirəm mobil cihazlar layout, sonra aşağı ekran qətnaməsi olan cihazlar üçün oxşar xətt əlavə etdim, burada bir az daha kiçik abzaslar təyin etdim, lakin bunlar təfərrüatlardır:

Li.ya-paylaş2__element (doldurma:0 3px 0 3px!vacib;)

Ümumiyyətlə, WordPress bloquma gəldikdə belə bir şey olur. Joomla-da bu bloku daxil etmək üçün çox güman ki, Xüsusi Html Kod modulundan istifadə edərək, onu məqalə mətninin dərhal altında şablon mövqeyində yerləşdirmək daha asan olacaq.

Rəsmi sosial media düymələri

Bir çox sosial şəbəkələr özləri hər kəsə düymə kodunu yükləmək imkanı verir və çox vaxt siz hətta onun görünüşünü və funksionallığını fərdiləşdirə bilərsiniz. Məsələn, bir yazı paylaşmaq üçün skript kodunu konfiqurasiya edə və qəbul edə bilərsiniz.

Gördüyünüz kimi, kifayət qədər çox parametrlər var və VKontakte düyməsinin görünüşünə əlavə olaraq, paylaşımların sayını göstərən sayğacın ekranını da konfiqurasiya edə bilərsiniz.

Siz Facebook düyməsini əldə edə biləcəksiniz. O, çox çevik şəkildə ehtiyaclarınıza uyğunlaşdırılıb və üzərindəki ingiliscə yazılar sizi çaşdırmayın, çünki onun kodunu vebsaytınıza yerləşdirdiyiniz zaman yazılar avtomatik olaraq rus dilinə tərcümə olunacaq.

URL sahəsinə heç nə daxil etməmək daha yaxşıdır, onda bu kodun yerləşdiyi səhifə paylaşılacaq.

Bu kimi bir şey görünəcək:

Bu kimi bir şey görünəcək:

Və əlbəttə ki, nisbətən yaxınlarda ortaya çıxan rəsmi Twitter düyməsini qeyd etməyə kömək edə bilmirəm. Onun konstruktoru yerləşir. Təbii ki, o, retvitlərin sayını hesablamaq imkanı verir və onun görünüşünü təyin etmək imkanınız olacaq:

Daha sonra ortaya çıxan kodu yuxarıda təsvir olunan prinsipə uyğun olaraq bir qədər modernləşdirdim ki, uzun başlıqlarım kəsilsin və paylaşarkən istifadəçilər üçün əlavə problemlər yaratmasın.

Veb saytınız üçün sosial media düymələri əldə etmək üçün digər seçimlər

Artıq dediyim kimi, sosial şəbəkə düymələri üçün pulsuz bir skript götürə və veb saytınıza yerləşdirə biləcəyiniz bir çox onlayn xidmətlər var. Onların hamısı fərqli məqsədlər güdürlər: “ürəkdən” (Dimoxa xidmətində olduğu kimi), digər xidmətlərin (ApTuLike vəziyyətində olduğu kimi) işləməsi üçün lazım olan məlumatları toplamaq və ya mənfəət üçün (viruslar və digər qanunsuz fırıldaqçılıq. saytınızda olan trafik). Sadəcə olaraq ödənişli həllər də var, məsələn, aşağıda qeyd olunan plagin kimi.

Bu müxtəliflikdən nə seçəcəyini söyləmək çətindir. Özümü sınamaq şansım olan və əvvəllər yazdıqlarım haqqında bir neçə kəlmə deyəcəyəm.

Ümumiyyətlə, baxın, müqayisə edin və özünüz seçin.

Sənə uğurlar! Tezliklə blog saytının səhifələrində görüşənədək

Daha çox videoya ");"> keçid edərək baxa bilərsiniz

Sizi maraqlandıra bilər

Sosial şəbəkələrə əlavə etmək üçün düymələr və WordPress bloqu üçün əlfəcinlər yaradırıq (pluginlər və skriptlər olmadan) Çox güman ki, sayt üçün müstəqil sosial düymələr
Uptolike-dən mobil saytlar üçün düymələr + messencerlərdə bağlantıları paylaşmaq imkanı UpToLike - genişləndirilmiş funksionallığı ilə saytınız üçün sosial düymə qurucusu

Müsbət cəhətləri:

Pluso X Share Pluso sosial düymə konstruktorunun eksperimental versiyası. O, nişanların dizaynını təkmilləşdirdi, mövcud sosial şəbəkələrin tam siyahısı olan bir pop-up pəncərəsi və yerində "+" işarəsi olan zəhlətökən narıncı düymə də dəyişdirildi, lakin indi eynidir daha xoş dizayn.
Tərtibatçıların sözlərinə görə, yeni sosial düymələr Retina monitorları üçün nəzərdə tutulub. Qalan hər şey, ilk baxışdan, eyni qalır. Təəssüf ki, dizaynerdə mövcud variantlar arasında sayğaclı düymələr tapmadım, baxmayaraq ki, Pluso-nun standart nəşrində bunlar var.
Köhnəsini yeni konstruktorla əvəz edəcəklərini bilmirəm, amma hazırda hər ikisi eyni vaxtda müxtəlif keçidlərdən istifadə edərək işləyir.

Add ThisAdd Bu yüksək keyfiyyətli, qəşəng və çevik sosial düymələri təmin edən xidmətdir. Bu resurs Qərbdə aparıcıdır. Burada daha az populyardır, lakin mən tez-tez Bunu Əlavə et vidjeti ilə rusdilli saytlara rast gəlirəm.
Ödənişli və pulsuz vidjetlər var. Pulsuz hesabda yalnız ən sadə seçimlər mövcuddur. Ödənişli versiyada daha çox dizayn konsepsiyaları mövcuddur, məsələn: adaptiv düymələr, müxtəlif sayğacları olan düymələr və daha çox.
Bu seçim, məncə, xalqımız üçün uyğun deyil, çünki zənglər və fitlər üçün pul ödəməli olacaqsınız, ancaq daxili bazarda eyni şeyi tapa bilərsiniz, lakin pulsuz.
Bu əlavə et konstruktoru Vkontakte, Moi Mir və Odnoklassniki də daxil olmaqla mövcud sosial şəbəkələrin böyük siyahısına malikdir. üçün bir plagin var.

Yaxşı Paylaş Çox cəlbedici olan kiçik yerləşdirmə kodu ilə veb saytınız üçün yüngül və gözəl paylaşma düymələri. Təəssüf ki, bir çox rəng sxemi ilə yalnız bir dizayn variantı var. RuNet-də bütün məşhur sosial şəbəkələr var
Tərtibatçıların fikrincə, onların ideyası optimallaşdırılıb və axtarış motorları saytınızı sevəcək. Burada nə qədər həqiqət olduğunu bilmirəm.
Zəng və fitə ehtiyacınız yoxdursa, bu seçim sizin üçündür.

Shareaholic Bu yaxınlarda kəşf etdiyim sosial düymələr yaratmaq üçün çox maraqlı Qərb xidməti.
Shareaholic bir neçə yeni paylaşma düyməsi konsepsiyasını təklif edir. Şəxsən mənim düymələrin üstündəki oxu xoşuma gəldi (oxlar çox güclü marketinq vasitəsidir), amma təəssüf ki, yazı ingiliscə olduğu üçün bizimkilərə uyğun deyil. Mövcud sosial şəbəkələr arasında VKontakte də var.

Salam əziz dostlar. Bugünkü məqalə xidmətlər və plaginlər olmadan sosial düymələr blokunun yaradılmasına həsr olunacaq. Bu bloka həmçinin sayt ziyarətçilərinə səhifəni çap etməyə, məqalənin linkini e-poçtla göndərməyə və məqalənizi işarələmək imkanı verən düymələr də daxil olacaq. Belə düymələrə bu gün demək olar ki, hər bir internet saytında rast gəlmək olar. Yalnız indi onlar xidmətlər və ya plaginlərdən istifadə etməklə həyata keçirilir. Və bunu özünüz necə edəcəyinizi sizə göstərəcəyəm.

Müştəri saytlarında və bloqumda istifadə etdiyim xidmətlər - və . Bu xidmətlər tapşırığın həyata keçirilməsini olduqca asanlaşdırır.

Öz sosial düymələrinin xidmətlər və plaginlərdən üstünlüyü nədir?
  • Əlbəttə ki, mübahisəsiz bir amil saytın yükləmə sürətidir. Beləliklə, məsələn, bloqda istifadə etdiyim PLUSO xidməti ən yaxşı halda yükə 633 millisaniyə əlavə edir.
  • Və bu blokda yalnız sosial düymələrin zəruri şəkilləri istifadə olunur, birləşdirilmişdir. Bütün üslublar minimuma endirilir. Üstəlik sadə html çərçivəsi.

  • Təklif etdiyim metodda heç bir xarici keçid yoxdur. Xeyr, bağlantılar var, lakin hamısı daxili keçidlər kimi olacaq. İstəyirsinizsə, onlardan həmişə istifadə edə bilərsiniz. Və sonra onlar ümumiyyətlə görünməyəcəklər.
  • Çox asan quraşdırma. Blokun html kodunu sayt səhifəsinin mənbə koduna daxil etmək, sprite yükləmək, css üslublarını əlavə etmək kifayətdir və quraşdırma tamamlandı. Sadəcə düymə şəkilləri ilə faylın yolunu düzəltmək lazımdır.
  • Bu nöqtə, öz sosial düymələr blokunuz istiqamətində nə müsbət, nə də mənfi deyil. Hiylə odur ki, öz blokunda düyməni basan sayğac yoxdur. Və bu mənfi hesab edilə bilər. Amma, digər tərəfdən, hər düyməni taxmaq mümkündür və siz ziyarətçilərinizin neçə dəfə düymələrə basdığını və məqalələrinizi sosial şəbəkələrdə paylaşdığını dəqiq biləcəksiniz.
  • Saytınızdakı xidmətlər tərəfindən toplanan statistika artıq üçüncü tərəflərə ötürülməyəcək.
  • Mənbə koduna sosial düymələr blokunun daxil edilməsi

    Düymələr məqalədən sonra yerləşdikdə klassik variantı nəzərdən keçirəcəyik.

    Bu, ya məqalələrin (single.php) çıxarılmasına cavabdeh olan faylı açmaq və mənbə koduna sosial düymələr blokunu əlavə etməklə edilə bilər. Alternativ olaraq, bu mövzunun funksiya faylı (functions.php) vasitəsilə edilə bilər.

    Mən hər iki variantı göstərəcəyəm, siz özünüzə uyğun olanı seçin.

    Blokun single.php mənbə koduna daxil edilməsi

    Xəbərdarlıq: Hər hansı hərəkətə başlamazdan əvvəl single.php faylının ehtiyat nüsxəsini çıxarın!

    WordPress administrativ panelini açın – “Görünüş” – “Redaktor” – “Tək giriş (single.php)”.

    Mənbə kodunda məqalə çıxışının bitdiyi və şərhlərin və ya səhifə naviqasiyasının başladığı yeri axtarın. Məhz bu yerdə sosial düymələr blokunun html kodunu daxil etməlisiniz.

    Ekran görüntüsünə diqqətlə baxın, məqaləni və şərhləri göstərmək üçün məsul olan kodlara diqqət yetirin. Və aşağıdakı kodu yapışdırın.

    Əlbəttə ki, şablonlarınızda bəzi fərqlər olacaq, amma əminəm ki, bunu başa düşəcəksiniz, bunda mürəkkəb bir şey yoxdur. Bundan əlavə, ehtiyat nüsxəniz var, qorxmaq üçün heç bir şey yoxdur.

    Sosial düymələr blokunun html kodu da budur:

    ","paylaşıcı","alətlər paneli=0,status=0,en=700,hündürlük=400");" href="javascript: void(0)" class="facebook">&subject=","paylaşıcı","alətlər paneli=0,status=0,width=700,height=400");" href="javascript: void(0)" class="livejournal">","paylaşıcı","alətlər paneli=0,status=0,en=700,hündürlük=400");" href="javascript: void(0)" class="twitter">","paylaşıcı","alətlər paneli=0,status=0,en=700,hündürlük=400");" href="javascript: void(0)" class="odnoklassniki">&target=blog","paylaşıcı","alətlər paneli=0,status=0,width=930,height=500");" href="javascript: void(0)" class="evernote">","paylaşıcı","alətlər paneli=0,status=0,en=812,hündürlük=585");" href="javascript: void(0)" class="digg">. Hər bir keçidin öz sinfi var, onun vasitəsilə düymə şəkli təyin olunur.

    Bu, mənbə kodu vasitəsilə daxil etməyi tamamlayır. Və sonra css üslublarını birləşdirməlisiniz.

    Mövzu funksiyaları vasitəsilə single.php mənbə koduna blokun daxil edilməsi

    Xəbərdarlıq: işə başlamazdan əvvəl functions.php faylınızın ehtiyat nüsxəsini çıxarın!

    Bu seçimdən istifadə etmək üçün siz functions.php faylını açmalı və bu kodu ən sonunda əlavə etməlisiniz:

    /* Sosial düymələrin daxil edilməsi */ add_action("comments_template","soc_button"); funksiya soc_button() ( ?> ","paylaşıcı","alətlər paneli=0,status=0,en=700,hündürlük=400");" href="javascript: void(0)" class="facebook">&subject=","paylaşıcı","alətlər paneli=0,status=0,width=700,height=400");" href="javascript: void(0)" class="livejournal">","paylaşıcı","alətlər paneli=0,status=0,en=700,hündürlük=400");" href="javascript: void(0)" class="twitter">","paylaşıcı","alətlər paneli=0,status=0,en=700,hündürlük=400");" href="javascript: void(0)" class="odnoklassniki">&target=blog","paylaşıcı","alətlər paneli=0,status=0,width=930,height=500");" href="javascript: void(0)" class="evernote">","paylaşıcı","alətlər paneli=0,status=0,en=812,hündürlük=585");" href="javascript: void(0)" class="digg">. Əks halda sayt fəaliyyətini dayandıracaq.

    Kod üzrə izahatlar: sosial şəbəkə düymələrinin göstəriləcəyi yer API açarı comments_template vasitəsilə müəyyən edilir. Bu açar şərhlərdən əvvəlki yeri müəyyənləşdirir. Sosial düymə kodunun özü php-nin açılış və bağlanma qayıdış teqlərinə əlavə olunur. Kodda onları qırmızı ilə qeyd etdim. Bu, mövzu funksiyaları vasitəsilə php-yə html kodu daxil etməyin bütün hiyləsidir.

    Bu metodu tamamlayır, gəlin şəkillərin sayta yüklənməsinə keçək;

    Düymə şəkillərinin serverə yüklənməsi

    Məsələn, sosial düymələrin təsvirləri olan bir neçə sprit hazırladım. Siz onları yükləyə bilərsiniz.

    Nümunə olaraq istifadə etdiyim sprite cəmi 3,97 kb-dır və yalnız lazımi düymələri ehtiva edir. Və bu bir sprite olduğundan, verilənlər bazasına yalnız bir sorğu var və hər bir düymə üçün ayrıca deyil.

    Şəkilləri yükləyin və ya özünüz hazırlayın və veb saytınıza yükləyin. Məncə, bununla bağlı heç bir problem olmamalıdır. Sonra, css üslublarından istifadə edərək düymələri dizayn etmək üçün bu sprite keçidi lazım olacaq.

    CSS üslublarını birləşdirin

    Bu addım, əlbəttə ki, ilk növbədə tamamlana bilər, lakin mən əvvəlcə bütün mürəkkəb texniki işləri görməyə üstünlük verirəm və yalnız bundan sonra css üslubları ilə gözəl kiçik şeylərə başlayıram.

    Beləliklə, saytınızın dizaynına cavabdeh olan style.css faylını açın. Və bu üslubları daxil edin:

    Paylaş a ( displey: inline-block; vertical-align: inherit; margin: 5px 0 0 2px; padding: 0px; font-size: 0px; en: 40px; hündürlük: 40px; fon: url("http://test" ..png ") təkrarsız sürüşdürmə 0px 0px şəffaf;) .paylaş a.vkontakte ( fon: url("http://test..png ") təkrarsız sürüşdürmə -168px 0px şəffaf; ) .paylaş a.google ( fon: url("http://test..png ") təkrarsız sürüşdürmə -252px 0px şəffaf; ) .livejournal paylaşın ( fon: url("http://test..png ") təkrarsız sürüşdürün -336px 0px şəffaf ) .paylaşın a.twitter ( fon: url("http://test..png ") təkrarsız sürüşdürün -42px 0px şəffaf; ) .a.maili paylaşın ( fon: url("http; ://test..png ") təkrarsız sürüşdürmə -294px 0px şəffaf; ) .odnoklassniki-ni paylaş ( fon: url("http://test..png ") təkrarsız sürüşdürmə -126px 0px şəffaf; ) .paylaşın a.pinterest ( fon: url("http://test..png ") təkrarsız sürüşdürün -210px 0px şəffaf; ) .a.liveinterneti paylaşın ( fon: url("http://test..png" ") təkrarsız sürüşdürmə -378px 0px şəffaf; ) .paylaşın a.evernote ( fon: url("http://test..png ") təkrarsız sürüşdürün -420px 0px şəffaf; ) .paylaşın a.bookmark ( fon: url("http://test.. png ") təkrarsız sürüşdürün -462px 0px şəffaf; ) .e-poçtu paylaşın (fon: url("http://test..png") təkrarsız sürüşdürün -504px 0px şəffaf; ) .paylaşın a.print ( fon: url("http://test..png") təkrarsız sürüşdürmə -546px 0px şəffaf ) .paylaşın a.digg ( fon: url("http://test..png ") təkrarsız sürüşdürmə - 588px 0px şəffaf; ) .paylaşın a.spring ( fon: url("http://test..png ") təkrarsız sürüşdürmə -630px 0px şəffaf; )

    Kod haqqında izahatlar: the.share sinfi blokun ümumi görünüşünü, hər bir düymənin ölçüsünü müəyyən edir, abzaslar və tək fon təyin edir. Və sonra hər bir keçidin öz sinfi var və hər bir belə keçidin fon xüsusiyyəti vasitəsilə düymə növü təyin olunur. Düymələr CSS sprite kimi hazırlanır və hər düymənin eni və hündürlüyü 40px, onların arasında 2px kənar boşluq var ki, bu da hər bir düymə üçün təsviri dəqiq müəyyən etməyə imkan verir. Yəni birinci düymə 0, ikincisi isə 42 kimi göstərilir və s. Kodda bu dəyərlər narıncı rənglə göstərilmişdir. Sprite keçidi də narıncı rənglə vurğulanır, siz onu sprite gedən yola dəyişdirirsiniz.

    Bu, öz sosial düymələr blokunuzun yaradılması prosesini tamamlayır. Təhlükəsiz şəkildə yoxlamaya davam edə bilərsiniz.

    Düymələrin özləri də daxil olmaqla, bütün prosesin aydın şəkildə göstərildiyi bir video dərsliyim var. Veb saytlarınızda və bloqlarınızda izləyin və tətbiq edin.


    İndi bu qədər. tapşırığın öhdəsindən gəldim. Hamınıza uğurlar arzulayıram və yeni məqalələrdə və video dərslərdə görüşərik.

    Burada “Kim kampaniyada 8% endirimlə proqram təminatı almaq istəyir?” ifadəsi var. istifadəçinin özü tərəfindən yazılmışdır və aşağıda sayta keçidin sosial şəbəkədə necə göründüyü göstərilir. Çox gözəl deyil, elə deyilmi?


    onda sosial şəbəkədəki link belə görünəcək:

    Burada “Bu gün allsoft.ru-nun doğum günüdür - 8 il :)” istifadəçi tərəfindən yazılmış mətn, qalanı meta teqlərdən alınan məlumatlardır. Bu meta teqlər haqqında daha çox Facebook səhifəsində developers.facebook.com/docs/share oxuya bilərsiniz, digər sosial şəbəkələr də onları yaxşı başa düşürlər.

    Bu mexanizm ümumiyyətlə necə işləyir:
    1. İstifadəçi düyməni kliklədikdə, vidcet səhifəyə keçidi sosial şəbəkə serverinə ötürür.
    2. Sosial server Şəbəkənin özü bu linkə daxil olur və səhifə haqqında məlumatları - başlıq, təsvir, şəkil oxuyur.
    3. Sosial server şəbəkə səhifə məlumatlarını öz tərəfində saxlayır və sosial şəbəkə səhifələrində göstərir

    Bir səhifə üçün müxtəlif təsvirləri necə göndərmək olar.
    Məsələn, komik testlə allsoft.ru-da tanıtım səhifəsi yaratarkən, istifadəçinin testdə topladığı müxtəlif xallar üçün sosial şəbəkələrə müxtəlif təsvirlər göndərmək lazım idi. Sosial şəbəkə bir keçidə klikləməklə səhifənin təsvirini aldığı üçün müxtəlif təsvirlər üçün müxtəlif keçidlər lazımdır. Bundan əlavə, Twitter yalnız 140 simvola icazə verir, ona görə də onun ayrıca, daha qısa təsvirə ehtiyacı var.

    New Ya.share(( element: "ya_share_normal", elementStyle: ( "növ": "none", "quickServices": ["facebook","twitter","odnoklassniki","vkontakte","moimir"] ), link: "http://allsoft.ru/promo/allsoft8let/?share=normal", serviceSpecific: ( twitter: ( başlıq: "Test nəticəsi: Əjdaha demək olar ki, sizin güclü nöqtənizdir! Siz hələ Draqonologiyanı öyrədə bilməzsiniz, lakin doğru yolda!")))
    1. Burada ya_share_normal səhifədəki elementin identifikatorudur (), orada sosial düymələri olan blok görünəcək, keçid linkdir, üstəlik Twitter üçün xidmətdə biz og-da olandan fərqli olan başlığı göstəririk: başlıq meta teqi.

    Beləliklə, "3 fərqli test nəticəsi və testdən kənar səhifəyə ümumi keçid" tapşırığı üçün 4 etiketimiz olacaq:

    və yuxarıdakı kimi 4 JavaScript kodu bloku.

    Sosial şəbəkə tərəfindən keşlənmiş başlıq və təsviri necə dəyişdirmək olar.
    1. Facebook üçün ən yaxşı yol var: onların sazlayıcısına gedin