Sosyal düğmeler kodu. Yandex sosyal medya butonları paylaş

  • 18.06.2019

Son zamanlarda, sitenin geliştirilmesi için gereksinimlerdeki her saniye (ilk değilse) müşteri, onu sosyal ağlarla bağladığınızdan emin olmak ister. Sitedeki "Sosyal" butonlar, hedef kitleyi çekmek, içerik dağıtımı ve genel olarak PR için 1 numaralı araçtır. Ve tamamen ücretsiz!

Sosyal ağlar, siteye yerleştirmek için düğmeleri ve widget'ları için kodlar sağlar ve bunları içerik yönetim sistemine yüklemek için talimatlar ekler. Herhangi bir CMS (işletim sistemi) bunları kurmanıza izin verir, asıl mesele bunları sitenizin tasarımına uyumlu bir şekilde sığdırmaktır.

Özellikleri ve işlevleri nelerdir?

Siteniz popüler sosyal ağlarla iletişim kuran kişilere yönelikse. ağlar, örneğin, Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest, vb. ve boyut ve tasarım açısından farklılık gösterebilecekleri göz önüne alındığında, her biri için düğmeleri ayrı ayrı ayarlamamak için hepsini kapsamak istiyorsunuz. , toplayıcı hizmetlerini kullanmanızı öneririz. Bunlar, site ziyaretçilerinin hangi sosyal ağı kullanırlarsa kullansınlar arkadaşlarıyla hızlı bir şekilde bilgi paylaşmalarını sağlayacak basit ve kullanışlı araçlardır. Aşağıda en popüler hizmetleri analiz edeceğiz.

Sosyal Medya Butonları Paylaş Pluso

Selamlar! Bu yüzden bazen neden her gönderinin sonuna sosyal medya butonları yerleştirmek gerektiğini merak ediyorum. Bunların ne anlamı var? Belki aslında, bunların hiçbir faydası yoktur ve anlamları abartılmıştır?

Blog sayfalarındaki düğmelerin yerleşimi hakkında zaten yazdım. Ancak bu eylemin faydalarından bahsetmedi, sadece sayfayı sosyal imlerde bulundurarak indekslemeyi hızlandırma şansının önemli ölçüde arttığını vurguladı.

Düğmelere neden ihtiyaç duyulur?

  • İlkinden daha önce bahsedilmiştir - arama motorları tarafından indekslenmesi uzun sürmez;
  • İkincisi, sadece sosyal ağlardaki bağlantıları kaydetseniz bile, mutlaka merak edenler olacaktır. Bakacaklar, evet diyecekler, burada ilginç bir şey var, bağlantıyı takip edecekler ve ilgilenebilirler. Böylece, küçük trafik bulabilirsiniz ve ziyaretçi bağlantıyı kendisi de kaydederse, ancak profilinde zaten varsa, trafik önemli ölçüde artabilir. Ardından, merak uğruna gelen bir ziyaretçi, örneğin bir RSS beslemesine abone olarak potansiyel bir düzenli okuyucu haline gelebilir. Kim bilir, belki gelecekte değerli bir ortak olur ya da tam tersi;
  • Üçüncüsü, kesinlikle siz ve çoğunluk, geri bağlantı almak için mücadele ediyorsunuz. Ve harici sitelerin genellikle olduğu gibi sadece ana sayfaya değil, aynı zamanda dahili sitelere de bağlanması arzu edilir - arama motorları buna bayılır. Ve sosyal medya düğmeleri bize bu fırsatı veriyor!

Başka bir şey, bu tür sitelerden gelen tüm bağlantıların dizine eklenmemesidir. Örneğin Yandex, sosyal yer imlerine geri dönerseniz, bazı hizmetler için filtrelere sahip olun. Ancak, daha yakın zamanlarda, Rus İnternet'in en büyük sosyal ağını "VKontakte" endekslemeye başladı - kim bilir, belki gelecekte ...

Ben zaten sonuçlarımı çıkardım ve bir blogda sosyal medya düğmelerine ihtiyaç olduğunu düşünüyorum, ancak bir AMA: sadece blog oluşturma aşamasında önemli faydalar sağlayabilirler. İyi tanıtılan blogların buna ihtiyaç duyması olası değildir. Ne düşünüyorsun?

Kutuyu işaretleyerek kendi takdirinize bağlı olarak seçilmek üzere sunulan hizmetlerin bir listesi:

Sağdaki aynı pencerede, blog sayfalarına eklenmesi gereken önceki seçime bağlı olarak oluşturulan kod görüntülenir. Örneğin, her gönderinin sonunda.

Yandex nispeten yakın zamanda web yöneticilerine ana sosyal hizmetler için düğmeler şeklinde böyle bir fırsat sunmaya başladı, ancak bunlar zaten oldukça fazla sayıda blogda görülebilir. Bu yine sosyal ağların popülaritesinden bahsediyor.

Muhtemelen internette barındırılmayan site yoktur. gönderme düğmeleri materyalleri sosyal ağlara İkincisi, hayatımızda uzun ve sıkı bir şekilde yer aldı. Orada iletişim kuruyoruz, birbirimizi tanıyoruz, işi tanıtıyoruz, haberleri okuyoruz vb. Tam bir dizi. Web yöneticilerinin ellerinden gelen her şekilde sosyal medyadaki varlıklarını genişletmek istemeleri şaşırtıcı değil. Sonuçta, kesinlikle herkesin ihtiyaç duyduğu tonlarca potansiyel trafik var. Ziyaretçilerin akışı para, itibar, büyümedir. Her şey onun etrafında inşa edilmiştir. Lezzetli bir lokma.

Sosyal düğmeler elbette gerekli. Soru farklı - hangilerini seçmeli? sizin için test ettik İLK 5 farklı hizmet sitelere düğme kodu eklemek için. Amaç, en uygun olanı belirlemek ve ayrıntılı olarak göstermektir. Eleme aşamasıyla başlayalım.

En iyi sosyal düğmeler hizmetini seçme

Karşılaştırma için başvuranların seçimi önemsiz çıktı - aldık en popüler hizmetler , web sitesi oluşturma konusuna yakından aşina olan herhangi bir kişinin duyduğu. Nadir değil, popülerlik kazanıyor, sadece deneyimli yaşlılar.

Onaylanan ekibin bileşimi aşağıdaki gibidir:

Seçilen sosyal hizmetlerin test edilmesi sonucunda - lider uSocial idi ... Şimdi seçimimiz için bir gerekçe almak istiyorsunuz. Tabii ki, asılsız kalmayacağız.

uSocial butonlarının özellikleri

verelim bazı gerçekler bu bizi kararın doğruluğuna ikna etti.


Sözlü karşılaştırma birçokları için yeterli olmayacaktır. Bu nedenle derlediğimiz karşılaştırmalı tablo uSocial ve diğer sosyetiklerden gelen düğmeler (kullanılan derecelendirme ölçeği 1'den 5'e kadardır). Tüm bu veriler test sırasında elde edildi.

Yapılan analizin, seçimimizin geçerliliği hakkındaki şüphelerinizi giderebileceğini umuyoruz. Güzel görünüme ek olarak, uSocial'ın sosyal düğmeleri doğada derinlemesine uygulanır ve herhangi bir projeyi tanıtmak için oldukça güçlü bir araçtır.

Bir web sitesine sosyal medya düğmelerinin nasıl kurulacağına ilişkin talimatlar

uSocial'dan sosyal düğmeleri web sitenize yerleştirmek için birkaç basit adımı uygulamanız gerekir:

Aşama 1

Adım 2

Bir dizi sosyal düğmeyi bir araya getirmek. Seçebilmek görüntülenen sosyal ağ hizmetleri, düğme şekli ve stili.

Burada ayrıca "Yukarı" düğmesini etkinleştirebilir, mobil cihazlar için desteği etkinleştirebilir, Viber, WhatsApp, Telegram, SMS hizmetlerini bağlayabilirsiniz.

Tüm işlemleri tamamladıktan sonra, girin adres siteniz ve düğmesine tıklayın "Kodu almak için".

Aşama 3

kopyala kodsenaryo görünen pencerede. Kodu, kaynağınızın bir sosyal düğme paneline ihtiyaç duyduğunuz sayfalarına eklemeniz gerekir. Örneğin, kapanış etiketinden önceki altbilgide.

4. Adım

uSocial kişisel hesabınızdan sosyal çubuğu yükledikten sonra, görüntüleyebilirsiniz. beğeni ve paylaşım istatistikleri seçilen dönem için, hem tüm sosyal ağlar için hem de seçilenler için aynı anda. Veriler, anlaşılması kolay grafikler veya çizelgeler şeklinde görüntülenir.

kişisel hesabınızda uSosyal hepsi yaratıldı setler ve İstatistik bağlı oldukları siteler için. İstediğiniz zaman siteler arasında geçiş yapabilir ve sayaçlardan alınan verileri analiz edebilirsiniz.

Bir sosyal barın verimliliği nasıl arttırılır?

Malzemeyi yeniden gönderirken yanlış resim ve açıklama gösteriliyorsa, tüm sosyal ağlar tarafından anlaşılabilir özel meta etiketler kullanarak neyin, ne kadar ve nasıl gösterilmesi gerektiğini manuel olarak belirtebilirsiniz. Bu yapılmazsa, sosyal ağlarda rastgele resimler ve açıklamalar görüntülenebilir. İhtiyacın olması pek olası değil.

Sosyal meta etiketlerin doğru doldurulmasıyla, gönderiler sosyal hizmetler tarafından doğru bir şekilde algılanacaktır, çünkü bunlar materyalin türünü, ilgili bir başlığı ve istenen resme bir bağlantıyı gösterir. Tüm bunlar, yeniden gönderme verimliliğini artırır: materyaliniz sosyal hizmetler tarafından doğru bir şekilde dizine eklenecektir.

Örnekleri mikro veri kodu popüler sosyal ağlar için (kod, etiketten önce yazılmalıdır):

1. Facebook ve Temas halinde Açık Grafik protokolünü kullanın:





3. İçin heyecan kod şöyle görünür:



4. İçin Google+ Yani:

- yazarın Google+'daki profiline bağlantı
- Sitenin adı
- snippet metni (en fazla 40 karakter)
- sitenin açıklaması
- görüntü dosyasının yolu

Enstrümanlar mikro işaretleme ile çalışmak için.

Merhaba sevgili arkadaşlar. Bugünün makalesi, hizmetler ve eklentiler olmadan bir sosyal düğme bloğu oluşturmaya ayrılacaktır. Ve bu blok ayrıca site ziyaretçilerinin sayfayı yazdırmasına, makale bağlantısını e-posta ile göndermesine ve makalenize yer imi koymasına olanak tanıyan düğmeler içerecektir. Bu tür düğmeler bugün hemen hemen her web sitesinde bulunabilir. Ancak şimdi hizmetler veya eklentiler kullanılarak uygulanmaktadır. Ve sana bunu kendin nasıl yapacağını göstereceğim.

Müşteri sitelerinde ve blogumda kullandığım hizmetler - ve. Bu hizmetler, görevin uygulanmasını kolaylaştırır.

Özel sosyal düğmelerin hizmetlere ve eklentilere göre avantajı nedir?

  1. Tabii ki, web sitesi yükleme hızı tartışılmaz bir faktördür. Yani örneğin bir blogda kullandığım PLUSO hizmeti, en iyi senaryoda, yüke 633 milisaniye ekler.

Ve bu blokta, yalnızca sosyal düğmelerin gerekli görüntüleri birleştirilir. Tüm stiller minimumda tutulur. Artı basit bir html çerçevesi.

  1. Önerdiğim yöntem herhangi bir dış bağlantı içermiyor. Hayır, linkler var ama hepsi dahili linkler gibi olacak. İsterseniz onlara her zaman sahip olabilirsiniz. Ve sonra hiç görünmeyecekler.

  1. Çok kolay kurulum. Web sitesi sayfasının kaynak koduna bloğun html kodunu eklemeniz, sprite'ı yüklemeniz, css stilleri eklemeniz yeterlidir ve kurulum tamamlanır. Düğme görüntüleri ile dosyanın yolunu düzeltmeniz yeterlidir.
  2. Bu öğe, kendi sosyal düğme bloğu yönünde bir artı veya eksi değildir. İşin püf noktası, kendi bloğunun bir düğme tıklama sayacı olmamasıdır. Ve bu bir eksi sayılabilir. Ancak diğer yandan, her bir butona koymak mümkündür ve ziyaretçilerinizin butonlara kaç kez tıkladığını ve makalelerinizi sosyal ağlarda paylaştığını tam olarak bileceksiniz.
  3. Web sitenizdeki hizmetler tarafından toplanan istatistikler artık üçüncü şahıslara aktarılmayacaktır.

Kaynak koduna bir sosyal düğme bloğu ekleme

Düğmeler makaleden sonra yerleştirildiğinde klasik versiyonu ele alacağız.

Bu, makaleleri görüntülemekten sorumlu dosyayı (single.php) açarak ve kaynak koduna bir sosyal düğme bloğu ekleyerek yapılabilir. Alternatif olarak, temanın işlev dosyası (functions.php) aracılığıyla da yapılabilir.

Her iki seçeneği de göstereceğim ve size uygun olanı seçin.

Single.php kaynak koduna bir blok ekleme

Uyarı: Başlamadan önce single.php dosyasının bir yedek kopyasını alın!

WordPress yönetici panelini açma - "Dış görünüş""Editör""Bir giriş (single.php)".

Kaynak kodunda, makale çıktısının bittiği ve yorumların veya sayfa sayfa gezinmenin başladığı yeri arayın. Sosyal düğmeler bloğunun html kodunu eklemeniz gereken yer burasıdır.

Ekran görüntüsüne dikkatlice bakın, makalenin çıktısından sorumlu kodlara rehberlik edin.ve yorumlar... Ve aşağıdaki kodu yapıştırın.

Elbette şablonlarınızda bazı farklılıklar olacaktır ama eminim çözeceksiniz, bunda zor olan bir şey yok. Ayrıca, bir yedeğin var, korkacak bir şey yok.

Ve işte sosyal düğmelerin kendisinin html kodu:

Kodla ilgili açıklamalar: sosyal ağlara bağlantılar içeren class.share içeren bir blok DIV'dir. Bağlantı ayrı bir açılır pencerede açılır, bundan onClick = window.open bu işlevi sorumludur. Bir makalenin bağlantısının değiştirilmesi bu kodla gerçekleştirilir.... Her bağlantının, düğme görüntüsünün atandığı kendi sınıfı vardır.

Bu, kaynak kodu aracılığıyla ekleme işlemini tamamlar. Ve sonra css stillerini bağlamanız gerekir.

Tema işlevleri aracılığıyla single.php kaynak koduna bir blok ekleme

Uyarı: Çalışmaya başlamadan önce function.php dosyanızın bir yedek kopyasını alın!

Bu seçeneği kullanmak için function.php dosyasını açmanız ve en sona şu kodu eklemeniz gerekir:

/ * Sosyal düğmeleri ekle * / add_action ("comments_template", "soc_button"); function soc_button() (?> Ve kodu yapıştırdıktan sonra dikkatli olun, boşluk ve diğer karakterleriniz olmamalıdır. Veya sadece php kodunu kapatmak mı?>. Aksi takdirde site çalışmayı durduracaktır.

Kodla ilgili açıklamalar: sosyal medya butonlarının gösterileceği yer, comment_template API anahtarı ile tanımlanır. Bu tuş yorumlardan önceki yeri belirlemek için kullanılır. Sosyal düğmeler kodunun kendisi ters php açılış ve kapanış etiketleri içine alınmıştır. Kodda onları kırmızı ile işaretledim. Bu, tema işlevleri aracılığıyla html kodunu php'ye eklemenin hilesidir.

Bu ve bu yöntem bitti, siteye resim yüklemeye devam ediyoruz.

Düğme görüntülerini sunucuya yükleme

Örnek olarak, sosyal düğmelerin resimlerini içeren birkaç sprite hazırladım. Onları indirebilirsiniz.

Örnek olarak kullandığım sprite sadece 3.97kb ve sadece ihtiyacınız olan butonları içeriyor. Ve bu bir hareketli grafik olduğundan, her bir düğme için ayrı ayrı değil, veritabanına yalnızca bir istek vardır.

Görselleri indirin veya kendinizinkini hazırlayın ve sitenize yükleyin. Bu konuda herhangi bir sorun olmaması gerektiğini düşünüyorum. Ayrıca, düğmeleri css stilleriyle süslemek için bu hareketli grafiğin bağlantısı gerekecektir.

CSS stilleri dahil

Tabii ki, bu adım çok önce yapılabilir, ancak tüm karmaşık teknik işleri önce yapmayı ve ancak bundan sonra css stilleri ile hoş küçük şeylere başlamayı tercih ederim.

Bu nedenle, sitenizin tasarımından sorumlu olan style.css dosyasını açın. Ve şu stilleri ekleyin:

Bir paylaş (ekran: satır içi blok; dikey hizalama: devral; kenar boşluğu: 5px 0 0 2px; padding: 0px; yazı tipi boyutu: 0px; genişlik: 40px; height: 40px; arka plan: url ("http:// test ..png ") tekrarsız kaydırma 0px 0px şeffaf;) .share a.vkontakte (arka plan: url (" http: //test..png ") tekrarsız kaydırma -168px 0px şeffaf;) .share a.google (arka plan: url ("http: //test..png") tekrarsız kaydırma -252px 0px şeffaf;) .share a.livejournal (arka plan: url ("http: //test..png") tekrarsız scroll -336px 0px şeffaf;) .share a.twitter (arka plan: url ("http://test..png") tekrarsız kaydırma -42px 0px şeffaf;) .share a.mail (arka plan: url ("http") : //test..png ") tekrarsız kaydırma -294px 0px şeffaf;) .share a.odnoklassniki (arka plan: url (" http: //test..png ") tekrarsız kaydırma -126px 0px şeffaf;) .share a.pinterest (arka plan: url ("http: //test..png") tekrarsız kaydırma -210px 0px şeffaf;) .share a.liveinternet (arka plan: url ("http: //test..png") ") tekrarsız kaydırma -378px 0px şeffaf; ) .share a.evernote (arka plan: url ("http://test..png") tekrarsız kaydırma -420px 0px şeffaf;) .share a.bookmark (arka plan: url ("http://test..png") png ") tekrarsız kaydırma -462px 0px şeffaf;) .share a.email (arka plan: url (" http://test..png ") tekrarsız kaydırma -504px 0px şeffaf;) .share a.print ( arka plan: url ("http: //test..png") tekrarsız kaydırma -546px 0px şeffaf;) .share a.digg (arka plan: url ("http: //test..png") tekrarsız kaydırma -588px 0px şeffaf;) .share a.spring (arka plan: url ("http://test..png") tekrarsız kaydırma -630px 0px şeffaf;)

Kodla ilgili açıklamalar: the.share sınıfı, bloğun genel görünümünü, her düğmenin boyutunu, dolguyu tanımlar ve tek bir arka plan ayarlar. Ve sonra her bağlantının kendi sınıfı vardır ve bu tür her bağlantıya arka plan özelliği aracılığıyla düğmenin görünümü atanır. Düğmeler bir css hareketli grafiği olarak yürütülür ve her düğme, aralarında 2 piksel dolgu ile 40 piksel genişlik ve yüksekliğe sahiptir, bu da her düğme için görüntüyü doğru bir şekilde tanımlamanıza olanak tanır. Yani, ilk düğme 0, ikincisi 42 olarak gösterilir ve bu şekilde devam eder. Kodda bu değerler turuncu ile belirtilmiştir. Sprite bağlantısı da turuncu renkle vurgulanır, onu sprite'ınızın yoluna değiştirirsiniz.

Bu, kendi sosyal düğmeler bloğunuzu oluşturma sürecinin tamamını tamamlar. Kontrole güvenle devam edebilirsiniz.

Ayrıca tüm sürecin açıkça gösterildiği bir video eğitimim var, direk düğmelerin çalışmasını gösteriyor. İzleyin ve sitelerinize ve bloglarınıza yerleştirin.


Şimdi bu kadar. Görevle başa çıktı. Hepinize iyi şanslar diliyorum ve yeni makaleler ve video eğitimlerinde görüşmek üzere.

Artık siteye sosyal medya butonları eklemenin birçok yolu var, bir seçenek var ve bu da memnun ediyor. Sosyal düğmeler sayfada önemli bir rol oynar, çoğu kişinin bildiği gibi, yardımlarıyla, seçilen sosyal ağlardan birinde herhangi bir gönderiyi hızlı bir şekilde yeniden gönderebilirsiniz. Site için sosyal düğmeler artık her yere ve her yere yerleştirildi, ancak bazen yanlış yere.

Site için sosyal düğmeler

Pek çoğu, sosyal ağların artık ne kadar gelişmiş olduğunu ve sitenizde beğendiğiniz bir gönderiyi veya bir gönderinin bir bölümünü duvarınıza eklemek için kullanabileceğiniz butonlar varsa bunun ne kadar harika olduğunu zaten biliyor. Bu işlem ile sadece mesajlara yorum veya repost yapmakla kalmaz, aynı zamanda arama motorlarına ek bir sinyal vermiş olursunuz.

Her site sahibinin hayali, tüm gönderilerinin okuyucular tarafından sosyal ağlardan birinde sayfalarında yeniden yayınlanmasıdır. En çok da Vkontakte, Facebook, Twitter ve Odnoklassniki'ye talep var. Ayrıca LiveJournal, liveinternet ve Blogger'ı da eklerdim. Kullanıcının tam rahatlığı için bu düğmeleri siteye eklemeniz önerilir.

Twitter, özellikle yeni gönderilerinizin arama motoru dizininde daha hızlı görünmesine yardımcı olmasıyla bugün daha fazla ilgiyi hak ediyor.

Site sahibiyseniz, büyük olasılıkla bir liveinternet veya LiveJournal hesabınız var. Bu servislere her seferinde yeni kayıtlar eklememek için butonlarının bulunması zaman kazandırır. Ek olarak, birçok kişi bu hizmetleri kullanır ve girişinizi günlüklerinde yeniden yayınlamak isteyebilir.

Web sitenize hızlı bir şekilde sosyal düğmeler eklemenin birkaç en iyi yolu vardır. Bu, size bu konuda hızlı ve kolay bir şekilde yardımcı olacak çevrimiçi hizmetler kullanılarak yapılabilir. Veya doğrudan her sosyal ağ üzerinden ayrı ayrı. Zaten herkes için bir seçim var. Önceden her sosyal ağ üzerinden ayrı ayrı butonlar eklenirdi, şimdi servisi kullanarak yükledim.

Böyle benzer bir hizmet var, buna denir hisse42... Onun hakkında, ne kadar iyi olduğu ve nasıl kullanılması gerektiği hakkında birçok malzeme yazıldı. Güzel, ancak bununla ilgili hiçbir şey anlamayan ortalama bir kullanıcı için bununla başa çıkmak zor olacak.

Böyle küçük bir ders için, klasörleri barındırmaya kopyalamak ve ardından stiller ile terlemek artık kural değil. Hazır kodu herhangi bir ek klasör olmadan kopyalayıp yapıştırmanız gereken başka seçenekler de vardır. Bu yüzden bu hizmeti unutun.

Sadece çoğunluk tarafından kullanılan en temel sosyal medya butonlarını ekleyin, onlarca gereksiz unutulmuş butonu şekillendirmeyin.

Siteye sosyal düğmeler eklemek için bugün kullanabilecekleriniz:

  1. Uptolike hizmet.
  2. Yandex sosyal düğmeleri.
  3. Her sosyal ağı ayrı ayrı manuel olarak ekleme.
  4. Artı hizmet.
  5. WordPress eklentilerini kullanma (tembeller için).

Muhtemelen başka bir yere girmeye gerek yoktur, onu bulmanın daha iyi bir yolu yoktur. Bu seçeneklerin her biri kendi yolunda iyidir. Daha uygun veya çekici bir yol biliyorsanız, lütfen yorumlara yazın.

Her makalenin sonuna sosyal medya düğmeleri eklenmelidir, böylece site ziyaretçisi okuduktan sonra isterse girişinizi yeniden yayınlayabilir. Onları sayfanın sonunda bir yerde aramamalı. Bence bu tür düğmelerin yerleştirilmesi gereken en uygun yerler kenar çubuğunda ve her gönderinin hemen sonunda.

uptolike

Şu anda kendim bu hizmeti kullanıyorum, beğendim. Kolaylığa ek olarak, uptolike hizmetinin kendi türündeki diğer hizmetlere göre birçok ayrıcalığı vardır.

  • Çok çeşitli sosyal medya düğmeleri;
  • Düğmeler, mobil cihazlar için uyarlanmıştır;
  • Metnin herhangi bir bölümünü sosyal ağda alıntılama yeteneği;
  • En üste bir düğme ekleyebilirsiniz;
  • Vkontakte grubuna abone olmak için bir açılır pencere ekleme imkanı;
  • Simgelerin boyutunun seçilmesi;
  • Site için simgelerin stilini seçme;
  • vurgulu efekti ekleyin;
  • Düğme arka planını, metin rengini, sayaç arka planını değiştirin;
  • Sayaçtaki metni artırın veya azaltın.

Bunu kullanmak için diğer bu tür hizmetler üzerinde yeterli ayrıcalık vardır. Bu, komut dosyası biçiminde yalnızca küçük bir kod ve stilleri olan birkaç satır ekler. Aynı zamanda, yabancı bir bağlantı yok, giden bağlantılar servisi aracılığıyla kontrol ettim. Eğer yanılıyorsam, beni düzeltebilirsin.

Ayrıca uptolike servisi başka ne yapabilir ki.

En önemli ayarlar. Görmek istediğiniz site için hangi sosyal düğmeleri seçiyoruz. Gerekirse listeyi açabilir ve çoğunluktan birkaç tane daha seçebilirsiniz. Desteğe bir onay işareti koyduk. Bundan sonra cep telefonlarında sosyal medya butonları her zaman ekranın alt kısmında görüntülenecektir.

Düğmelerin yatay konumunun, boyutunun ve stilinin seçilmesi. İstediğiniz gibi dekore edin ve bir vurgulu efekti ekleyin. Başka bir şey yapmanıza gerek yok. Bir sayaç kodu oluşturmak için site adresini ve posta kutusunu belirtmelisiniz. Bundan hemen sonra, siteye sosyal düğmeler eklemek için bir kod görünecektir.

Bir WordPress siteniz varsa, single.php dosyasını açın ve bitmiş kodu sayfanın içeriği bittikten hemen sonra yapıştırın. Sayfayı yenileyin ve ne olduğunu görün. Karmaşık bir şey yok.

yandex.

Gerekli hizmet simgelerini seçme. Twitter sadece simgeler şeklindedir, sayaç yoktur. Blokların görünümünü seçiyoruz ve aşağıda hazır bir gömme kodu olacak. Daha önce de belirtildiği gibi Yandex'e başka bir şey eklemiyoruz, her şey mütevazı ve zevkli.

Manuel ekleme yöntemi

Bu yöntemde, her bir sosyal ağı ayrı ayrı açmanız ve her bir repost butonunu ayrı ayrı yapılandırmanız gerekir. Bir facebook düğmesi eklemek için gitmeniz gerekir Burada... Sınıf arkadaşlarım ve dünyam için veri eklemem gerekiyor. Twitter için her şey olur. Bir Vkontakte düğmesi eklemek için şu adrese gidin: bu sayfa .

Gereksiz scriptler olmadan sadece sosyal ağlardan hazır bir kodunuz olacak. Bir web sitesine sosyal medya düğmeleri eklemenin muhtemelen en iyi yolu. Zorluk, her düğmeyi ayrı ayrı kesmeniz, ardından her şeyi tek bir yere yerleştirmeniz ve bir sütunda hizalamak için css stillerini kullanmanız gerektiğinde ortaya çıkar. Bununla ilgili herhangi bir zorluğunuz yoksa, deneyebilirsiniz.

Temas halinde

Bir Vkontakte düğmesi eklemek için Siteleri ve widget'ları bağla'yı tıklayın, aşağıda tüm olası eklemelerin tam listesi olacaktır. Ayrıca sayfaya yorum ekleme, duvara yazı gönderme, kendi grubunuzu, önerilerinizi, anketlerinizi ekleme, yazara abone olma ve bağlantılar yayınlama yeteneği de vardır. Bizim durumumuzda, Bağlantıları yayınla'yı seçin.

Karmaşık bir şey yok, düğmenin stilini (sayaçlı veya sayaçsız) seçiyoruz, düğmedeki metni, logo seçeneğini yazıyoruz ve altta hazır bir gömme kodu olacak. Bu kılavuz ekleme yöntemini kendim kullandım, ancak şu anda bir üçüncü taraf hizmeti deniyorum. Bakalım ne olacak. Memnun kalmazsanız, hemen manuel yönteme döneceğim.

artı

kullanarak siteye düğme eklemenin başka bir yolu artı hizmet... Servis de iyidir, çoğu düğmeyi fark etmiştir. Tasarım seçeneklerinin seçimi büyüktür, amatörlere ek olarak büyük görüntü boyutları vardır. Ağ ekleme yeteneği, diğer benzer hizmetlerle karşılaştırıldığında hiçbir şekilde daha düşük değildir. Yüklemek için dosya gerekmez, sadece kod.

Herhangi bir tasarım stilini seçiyoruz ve gerekli hizmetleri ekliyoruz. Biraz aşağıda, her şeyin sayfada nasıl görüneceğine dair hazır bir örnek gösterilecektir. Simgelerin boyutunu büyük, orta veya küçük seçebilirsiniz. Ayrıca, site veya yuvarlak için kare simgeler, bir satırda veya iki satırda, yatay veya dikey. Sayaçlı veya sayaçsız, arka plan yok veya web sitenizin tasarımına uygun bir arka plan ayarlayın.

Tüm bu adımlardan sonra karşınıza aşağıdaki sayfaya gömmek için hazır bir kod çıkacaktır. Ana sayfaya eklemeniz gerekiyorsa, index.php dosyasında dolaşıyoruz, eğer tüm gönderilerinizde ise, kodu gönderinin bitiminden hemen sonra single.php dosyasına ekleyin.

WordPress

Bu koddan hiçbir şey anlamadıysanız, neyi nereye kopyalayacağınızı ve nasıl çalıştığını anlamadıysanız, bir çıkış yolu var. Bir WordPress motorunuz varsa, size sosyal medya düğmeleri verecek bir eklenti yükleyebilirsiniz. Bugün bu tür eklentilerden çok var. Yönetici paneline gidin - Eklentiler. "Sosyal düğmeler", "sosyal" veya "VKontakte" eklentilerini aramaya hemen yazabilirsiniz. Eminim bir şeyler bulacaksın.

Bu tür benzer WordPress eklentilerinin çoğunluğu arasında, derecelendirmeye bakıldığında, en çok oy alanlar şunlardır:

  1. WordPress için Sosyal Paylaşım Düğmeleri.
  2. Sosyal.
  3. Social Media Feather - hafif sosyal medya paylaşımı ve takip düğmeleri.

Aslında, bu tür birçok eklenti var, hangisini en çok sevdiğinizi, doğru çalıştığını, neyi gösterdiğini ve kendiniz için nasıl özelleştirebileceğinizi kurmanız ve sıralamanız gerekiyor. WordPress için bu tür ilk eklenti Social Share Buttons örneğini ele alalım.

Eklentinin kendisi Rusça, bununla ilgili bir sorun olmayacak. Kurulduktan sonra, menünün sol tarafında yeni bir "Paylaş Düğmeleri" düğmesi görünecektir. Ana ayarlarda site logosunu koyuyoruz ve metni sosyal butonların önüne yazıyoruz.

Meta verinin oluşturulmasını eklediğinizden emin olun, sayfanın başlığı ve açıklaması dahil edilecektir. Düğmeleri yatay olarak hizalayın ve nerede olacaklarını seçin. Sadece gönderilerde seçiyoruz. İsteğe bağlı olarak gerekli sayfaları hariç tutabilirsiniz. En altta, triterde bir takma ad belirtmeniz gerekir.

Sonraki sekmede Share settings butonlarının stilini seçiyoruz. Aşağıda, gereksiz sosyal ağları etkinleştirebilir veya devre dışı bırakabilir ve üstte veya altta tüm blok için girintiler ekleyebilirsiniz. Herhangi bir yere ekstra kod koymanıza gerek yok, eklenti sizin için her şeyi yapacak.

Seçim sizin, hangi yöntemi kullanacağınız. Uptolike, Pluso veya Yandex aracılığıyla sosyal medya simgeleri ekleyin. Eklentiyi WordPress'e hemen yüklememelisiniz, her şeyi manuel olarak veya bir hizmet kullanarak yapmaya çalışmamalısınız.

Başka iyi bir hizmet veya site için sosyal düğmeler eklemenin bir yolunu biliyorsanız, yorumunuz için minnettar olurum.