Ijtimoiy media tugmalarini almashish uchun kodni qayerga o'rnatish kerak. Shaxsiy ijtimoiy tugmalar. Har bir ijtimoiy media tugmachasini alohida qo'shish

Tishlamaydimi? Va ular allaqachon tashrif buyuruvchilarni ovqatlantirish uchun juda ko'p pul sarflashgan. Va tugmalar ijtimoiy tarmoqlar sayt uchun o'rnatilganmi? Tushunarli! Kasallikning barcha belgilari aniq - sayt asotsialdir. Davolaymiz.

Nima uchun veb-saytga ijtimoiy media tugmalari kerak?

Veb-sayt sahifalarida ijtimoiy tugmalarning mavjudligi nafaqat majburiy atribut yoki moda aksessuari. Avvalo, ijtimoiy tugmalar resurs egasiga veb-saytni reklama qilishda pulni tejashga yordam beradi. Bunday holda, reklama tashrif buyuruvchilar yordamida amalga oshiriladi. Va egasi o'z saytini faqat sifatli kontent bilan to'ldirishi va yangi foydalanuvchilar oqimini kutishi mumkin:

Ammo bu tugmalar nafaqat veb-sayt egalariga kerak. Ularning joylashuvi ijtimoiy tarmoqlarning o'zlari uchun ham muhimdir. Ushbu tugmalarning har biri ijtimoiy portalga olib boruvchi havoladir. Va bu havolalar almashinuvi tufayli u qo'llab-quvvatlanadi yuqori daraja foydalanuvchilarning ijtimoiy tarmoqlardagi faoliyati. Shuning uchun mashhur ijtimoiy tarmoqlar saytlarni tugmalari uchun tayyor kodlar bilan ta'minlaydi.

Oddiy ijtimoiy tugma nima?

Misol uchun, VKontakte ijtimoiy tugmasi uchun skriptni olaylik. Uning kodi:

Kodning ushbu qismi sayt sahifasining "sarlavhasi" deb ataladigan joyga joylashtirilishi kerak. Ushbu kod ijtimoiy tugma bosilganda bajarilishi kerak bo'lgan skript manzilini belgilaydi. Bu tugma tasvirini ko'rsatish uchun javobgar bo'lgan kodning ikkinchi qismi:

Kodning ikkinchi qismi sahifaning tugma ko'rsatiladigan qismiga joylashtirilishi kerak:

Tugmaning ko'rinishi osongina sozlanishi mumkin. Buning uchun siz maxsus bo'limga o'tishingiz kerak texnik yordam ijtimoiy tarmoq saytida. Bu erda siz tugmachaning uslubini o'rnatishingiz mumkin, unga ko'ra uning kodi yaratiladi.

Oson turar joy variantlari

Sizning veb-saytingizda bir vaqtning o'zida barcha mashhur ijtimoiy tarmoqlar uchun tugmalarni joylashtirish imkonini beruvchi maxsus xizmatlar mavjud. Bu ularning har biri uchun alohida skript kiritishdan ko'ra osonroqdir. Keling, ushbu xizmatlarning eng mashhurlarini ko'rib chiqaylik:

Ijtimoiy tugmalar panelining joylashuvi bir nechta shablonlarda tanlanishi mumkin. Hisobning bepul versiyasida tortib olinadigan yon panel mavjud. Shuningdek bor bepul versiya WordPress uchun plagin. Xizmat veb-saytida ro'yxatdan o'tgandan so'ng, ijtimoiy tugmachalarni bosish statistikasiga kirish imkoniyati taqdim etiladi.

• Share42 - nozik sozlash qobiliyatiga ega aniq va sodda interfeys ko'rinish ijtimoiy tugmalar panellari. Bunday holda, sozlash jarayoni hamroh bo'ladi bosqichma-bosqich ko'rsatmalar bajarilishi kerak bo'lgan harakatlar tavsifi bilan. Shuning uchun xizmat hatto tajribasiz veb-ustalar uchun ham mos keladi:

Yana bir ortiqcha ushbu xizmatdan bir nechta mashhur CMS-ni qo'llab-quvvatlaydigan ijtimoiy tugmalar paneli skriptini yaratishdir.

Ijtimoiy tugmalar va WordPress

Mashhur CMSlar uchun ijtimoiy tugmalarni guruhli o'rnatish uchun ko'plab plaginlar yaratilgan. Keling, WordPress plaginiga ijtimoiy ulashish tugmachalarini o'rnatish misolini ko'rib chiqaylik.

Ushbu kengaytmaning ijobiy tomonlari - bu to'liq rus tilidagi interfeys, sozlashning qulayligi va Runetning mashhur ijtimoiy tarmoqlari uchun "moslashtirilgan":

WordPress uchun ijtimoiy tugmalar plaginini o'rnatish tartibi.

1) Saytning ma'muriy paneliga o'ting. Chapda "Plaginlar" yorlig'ini tanlang, "Yangisini qo'shish".
2) "Plaginlarni o'rnatish" sahifasida qidiruv maydoniga kengaytmaning nomini kiriting va "Plaginlarni qidirish" tugmasini bosing:

3) Qidiruv natijalarida biz kerakli kengaytmaning nomini topamiz. Keyin "O'rnatish" havolasini bosing:

4) Arxivni yuklab olish va o'rnatishdan so'ng tegishli havolani bosish orqali plaginni faollashtiring:

5) Uni faollashtirgandan so'ng, chap asboblar konsoli ko'rsatiladi yangi bo'lim"Ulashish tugmalari":

Plagin sozlamalari bir nechta nuqtalardan iborat:

WordPress uchun yana bir nechta tasdiqlangan plaginlar:

• Ruxsat etilgan ijtimoiy tugmalar - bu plagin sizning saytingizga suzuvchi ijtimoiy panelni qo'shish imkonini beradi, u tepada, pastda yoki yon tomonda "yopishib" qolishi mumkin;
• Html Ijtimoiy almashish tugmalari - bu plagin faqat shu bilan yaratilgan ijtimoiy tugmalarni o'z ichiga oladi css yordamida va html.

Ijtimoiy tugmalar va Joomla

Ushbu vosita uchun ijtimoiy tugmalar bilan ishlash uchun ko'plab plaginlar ham yaratilgan. Misol sifatida SocButtons yordamida kengaytmani o'rnatish jarayonini ko'rib chiqaylik. Ushbu plaginning xususiyatlari:

• Dvigatelning barcha eng mashhur versiyalarini qo'llab-quvvatlaydi;
• Oson sozlash;
• Tashqi ko'rinish xususiyatlari har bir tugma uchun alohida o'rnatiladi;
• Yengil o'rnatish to'plami.

Jarayon:

1) Joomla saytining ma'muriy qismiga o'ting va "Kengaytma menejeri" belgisini tanlang.
2) Bu erda biz kengaytmani yuklab olish manbasini aniqlaymiz:

3) Kengaytmani o'rnatgandan so'ng, "Plugin menejeri" ga o'ting va shunchaki faollashtiring o'rnatilgan kengaytma. Buning uchun sahifaning yuqori qismidagi yashil belgini bosing:

4) Sozlash uchun ro'yxatdagi kengaytma nomini bosing. Ushbu plaginda displey sozlamalari har bir ijtimoiy tugma uchun alohida o'rnatiladi:

Joomla uchun yana bir nechta tasdiqlangan kengaytmalar:

• Ijtimoiy xatcho'plar - bu plagin bir nechta versiyalarda mavjud. Ularning har biri ijtimoiy panelni ma'lum bir joyga joylashtirishga imkon beradi (gorizontal, vertikal yoki hatto uni suzuvchi qilish);
• JL Like – bu plagin qo‘shimcha tashqi skriptlarni yuklamaydi va ijtimoiy tarmoqlardagi ovozlar statistikasini yuritish imkonini beradi.

Skript yoki plagin?

Plaginni o'rnatish eng oson va tezkor variantdir. Ko'pincha, uni o'rnatgandan so'ng, butun sayt to'g'ri ishlaydi. Ammo dvigatel versiyasini yangisiga yangilagandan so'ng hamma narsa darhol qulashi mumkin.

Dvigatel va plagin versiyalari o'rtasidagi nomuvofiqlik tufayli saytning ishlashida muammolar paydo bo'lishi mumkin. Ko'pincha ular har qanday dizayn elementlarini noto'g'ri ko'rsatish bilan bog'liq. Bizning holatda, bu ijtimoiy tarmoq tugmalari. Keyin tushunish keladi, ba'zida ixtisoslashtirilgan plagin o'rniga yalang'och skriptdan foydalanish yaxshiroq.

IN yangi versiya PHP dvigatelida usullar va funksiyalar tuzilishi juda kam o'zgaradi. Shuning uchun, skript bunday yangilanish jarayonini osongina "o'tkazadi".

Ijtimoiy tugmalar uchun kodni maxsus xizmatlardan birida olish mumkin. Ularning umumiy ko'rinishi yuqorida keltirilgan. Masalan, Share42 xizmatini olaylik. U mashhur dvigatellar uchun ijtimoiy tugmalarni yaratishni qo'llab-quvvatlaydi. Jarayon.

Agar sizni Internetda tomosha qilishdan qo'rqsangiz, kompyuteringizni o'chiring.

Har bir webmaster, ertami-kechmi, o'z veb-saytida ijtimoiy tugmalarni o'rnatish haqida o'ylaydi. Axir, hozir ba'zi odamlar o'z hayotlarini ijtimoiy tarmoqlarsiz tasavvur qila olmaydilar, nega ularni maqolalaringiz bilan bo'lishish imkoniyatidan mahrum qilasiz? Ammo vaqt o'tishi bilan ko'plab ijtimoiy tugma xizmatlari aqlini yo'qotadi va o'z kodlari bilan xohlagan narsani qiladi, kerak bo'lmagan hamma narsani siqib chiqaradi. Aynan shu paranoid g'oya uchun ushbu maqolada siz veb-saytingiz uchun eng toza ijtimoiy tarmoq almashish tugmalari uchun kodlarni topasiz.

Hech kimga sir emaski, deyarli barcha ijtimoiy tugma xizmatlari sizning foydalanuvchilaringiz haqidagi ma'lumotlarni ular kerak bo'lgan joyda sizib yuborishi mumkin. Ey Xudo! Bo'lishi mumkin emas! Men bu haqda endigina bildim! - Tabriklaymiz! Ular sizni qandaydir tarzda, o'z ishi va harakatlari uchun ishlatishlari kerak. Ular qildilar yaxshi xizmatlar, katta funksionallik, qulaylik va "sifat" bilan. Sizga kerak bo'lgan narsani tanlash va kodni kerakli joyga qo'yish kifoya. Va tamom. Va ular uchun Internetda bunday manevrlarni bepul qilishdan qanday foyda bor? To'g'ri. Yo'q. Shunday qilib, vaqti-vaqti bilan, har bir bunday idora ma'lumotlarni DMPga tushirish bilan shug'ullanadi.

Men ushbu xizmatlarning har birini tasvirlab bermayman, ularning barchasi yaxshi funksionallik va o'ziga xos xususiyatlarga ega, lekin ularni alohida taqdim etishni xohlamayman. Men quyida qisqa ro'yxat tuzdim.

Sayt uchun eng mashhur ijtimoiy tugma xizmatlari ro'yxati

• 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

Agar sizda etarli vaqt bo'lmasa yoki qo'llaringiz va barmoqlarning falanjlarini bir necha marta bajarishga dangasa bo'lsangiz, ushbu xizmatlardan xavfsiz foydalanishingiz mumkin. Ular veb-saytlar va tashrif buyuruvchilar uchun juda yaxshi. Ammo hech kim foydalanuvchi ma'lumotlarining 100% xavfsizligini, ularning DNS-ning 100% ishlashini va saytlaringizning yuklanishini kafolatlamaydi. Bular. Agar ijtimoiy tugmalar serverlarida nosozlik bo'lsa, saytlaringiz odatdagidan sekinroq yuklanadi. Ha, bu kamdan-kam hollarda bo'ladi, lekin shunday bo'ladi. Albatta, siz ushbu skriptlarni asinxron yuklashni o'rnatishingiz va ularning ishini optimallashtirishingiz mumkin, ammo bu men dangasalar uchun yozgan bir necha qadamdan ko'proq.

Albatta, Internetda sizning veb-saytingiz ichiga joylashtirilgan va hech qanday ma'lumotni sizdirmaydigan ijtimoiy media kodlari mavjud, ammo ularning ko'pchiligi xuddi shu ijtimoiy tarmoqlarga tashqi havolalarni o'z ichiga oladi. Veb-ustalar buni yoqtirmaydi tashqi havolalar va shuning uchun eng paranoid veb-ustalar uchun men goodshare.ru skripti asosida tayyor kodlarni to'pladim, buning uchun ularga rahmat aytaman.

Ushbu kodni o'rnatish misoli HTML yoki CSS asoslarini bilmaganlar uchun emas, lekin qo'lingiz va ozgina vaqtingiz bo'lsa, ko'rsatmalarga qat'iy rioya qilsangiz, muvaffaqiyatga erishasiz. Shunday qilib, biz ketdik:

Ular shunday ko'rinadi:

Oltita ijtimoiy tarmoq standartga muvofiq sozlangan: Facebook, VKontakte, Odnoklassniki, Moi Mir, Google Plus, Twitter. Skript sozlamalarida ularning 30 dan ortiqlari mavjud, ammo agar xohlasangiz, bularning barchasi alohida o'rnatilishi mumkin. Mualliflar ta'kidlaganidek, ushbu tugmalarning afzalliklari, men to'liq roziman:

Har qanday qurilmada ajoyib displey (Ha, ular har qanday ekran o'lchamiga moslashadi)

Toza kod - tez va xavfsiz sayt (faqat skript, CSS va shrift yuklanadi, ular faqat serveringizda)

Mobil messenjerlarning barcha texnologiyalari bir skriptda (barcha turdagi Telegramlar)

SEO uchun qulay - havolalar yo'q

Rasmlarni o'z ichiga olmaydi

Skriptning o'zi nima qiladi va umuman olganda bu skript nima uchun kerak edi? Ushbu tugmalar skripti barcha API-larni o'z ichiga oladi ijtimoiy tarmoqlar, va skript saytdagi istalgan joyni faol almashish blokiga aylantiradi.

Misol uchun, siz uni bo'sh DIV bloklari yoki Span yoki tasvirlar yoki bo'sh havolalarga joylashtirishingiz mumkin va saytning deyarli har qanday elementi ushbu tugmalarga aylantirilishi mumkin. Mening misolimda men bo'sh Divs uchun skript ishlatganman.

Rasmlarga kelsak: ular bu erda emas. Siz ko'rgan piktogrammalar shriftdan olingan, ular shunchaki belgi va boshqa hech narsa emas.

Siz tugmalar arxivini quyidagi manzildan yuklab olishingiz mumkin.

Ushbu tugmalarni o'rnatish juda oson. Arxivda faqat to'rtta fayl mavjud: Shrift, CSS, JS va TXT.

1). Shriftni serveringizdagi istalgan papkaga yuklashingiz kerak, uni JS yoki CSS bilan bir xil joyga qo'yishingiz mumkin.

2). Keyin JS-ni serveringizga yuklang va uni istalgan joyda kod yordamida saytingizda ko'rsating, lekin men sahifaning eng quyi qismida tavsiya qilaman:

Ushbu skript ikki qismdan iborat bo'lib, birinchisi JQuery, ikkinchisi tugma kodining o'zi. Agar saytingizda allaqachon JQuery yoqilgan bo'lsa, kodning birinchi qismini olib tashlashingiz va shu bilan fayl hajmini kamaytirishingiz mumkin.

MUHIM: (JQuery kodining bir qismini olib tashlaganlar uchun) tugma skripti jQuery skriptidan keyin yuklanishi kerak.

3). JS va shriftni o'rnatganingizdan so'ng, saytingizga CSS qo'shishingiz kerak. Soc.css faylining barcha mazmunini saytdagi CSS plaginlaringizdan biriga nusxalash kifoya.

MUHIM: soc.css faylining 82-qatorida URL manzilini Shrift joylashuviga o‘zgartiring!

4). Bularning barchasidan so'ng, HTML kodini HTML.TXT faylidan ushbu ajoyib tugmalarni ko'rmoqchi bo'lgan saytingizga ko'chiring.

Skriptning tuzilishi ijtimoiy tarmoq almashish hisoblagichlarini o'rnatish imkoniyatiga ega, ammo veb-saytdagi ularning hujjatlarida batafsilroq o'qishingiz mumkin.

Va siz skriptning ishlashini ushbu satrlar ostida tekshirishingiz mumkin, chunki u mening blogimda o'rnatilgan.

E'tiboringiz uchun rahmat, agar sizda o'rnatish haqida savollaringiz bo'lsa, sharhlarda yozing.

Men sen bilan edim, dangasa Staurus.

Ulardan biri past moslashuvchanlik va cheklangan tanlovdir. standart sozlamalar. Misol uchun, blokni olaylik, yaqinda negadir o'rnatilgan Metrica ijtimoiy tugmalar bilan birga yuklangan ... Yana tugmachalarning o'lchamini yoki rangini o'zgartirish juda muammoli.

Vaqt o'tishi bilan mashhur echimlar yanada ommalashmoqda qo'shimcha funktsiyalar, bu nafaqat yuklangan skriptlar hajmini oshiradi, balki zararli kodni ham o'z ichiga olishi mumkin.

Foydalanishdan keyin turli xil variantlar Men o'zimning yechimim ancha yaxshi degan xulosaga keldim va bugun men bu haqda sizga aytib beraman. Lekin birinchi navbatda, shriftni o'rnatish bo'yicha ko'rsatmalarni o'qib chiqishingizni maslahat beraman - u misolda qo'llaniladi.

Onlayn demo va manbalar bu misol maqolaning oxirida topasiz va endi tartibda amalga oshirishga o'tamiz. Avval sayt jQuery-dan foydalanayotganiga ishonch hosil qiling, aks holda uni yoqing, WordPress-da bu eng yaxshi functions.php fayli orqali amalga oshiriladi:

funktsiya my_jquery () ( wp_enqueue_script("jquery" ); ) add_action("wp_enqueue_scripts", "my_jquery");

Keyin Font Awesome-ni ulang - biz tasvirlar o'rniga vektor ijtimoiy media piktogrammalaridan foydalanamiz. Endi siz kiritishingiz kerak HTML asosi shablon kodidagi tugmalar:

Yoqdimi? Do'stlaringizga ulashing!