Sosyal ağ metre. Sosyal ağların düğmeleri

Merhaba, Sevgili Blog Okuyucular web sitesi. Tabii ki, ve bu görevin eklentisi kullanabilirsiniz, ancak kendin yap, çok zor değilEvet, ve özellikle onlara sahip olduğumdan beri daha az olacaktır ve çok fazla çalışıyor (bağlantıya göre makaleye bakınız). Aldığım sosyal ağın simgeleri, daha önce bir ayrıntıda yazmış olduğum (umarım bu Dimox buna karşı bunu umursamayacak).

Ve alakalı ve e-postayı kabul ettim.

Düğmelerden bir sprite oluşturun ve siteye HTML kodunu yerleştirin.

Sonunda gerekli gruplar Ve oluşturduğunuz sosyal ağlardaki sayfalar, bu gerekli tüm bağlantıları aldıkları anlamına gelir, siteye düğme ekleyerek birbirinden ayrılabilirsiniz. Tabii ki, her bir sosyal ağ için uygun bir simge seçmek ve gerekirse, boyutunu gerektiğinde ve gerekirse azaltın.

Ama öyle değil en iyi yol. Neden? Sosyal ağın her bir resmini yüklemek için, sunucunuz için ayrı bir istek gerçekleştirilecektir. Bir düzine simgeniz olacak - sunucuya herhangi bir şekilde ek yük oluşturacak on sorgu anlamına gelir. Bizim için uygun değiliz, özellikle de uzun zamandır olduğu için.

Bisikleti yeniden icat etmemeye karar verdim (bir sprite oluştur), ancak Ball42'nin tasarımcısını oluşturan birini kullandı (bununla birlikte çalışmanın açıklamasına bağlantı neredeyse daha yüksek). İçinde, bu sosyal ağları, ihtiyaç duyacağınız simgeleri seçebilirsiniz ve Kod ile birlikte CSS Sprite, yani. fiziksel olarak bir grafik dosyasıİhtiyacınız olan tüm sosyal ağ simgelerinin ve aboneliklerin yayınlanacağı yer RSS Renta (ve gerekirse e-posta).

Dört ana ağ ve birkaç simge seçtim 24 ila 24'e simge büyüklüğü ile haberlere abonelik için bir kaç simge, bu yüzden sprite buna benziyor (yine de orada yazılıyordu, ancak önemli değil):

Şimdi tüm malzemelere sahibiz - gruplara veya sosyal ağ sayfalarına ve simgelerin sitelerinde görüntülemek için bağlantılar var. Bütün bunlar sadece doğru hazırlamak için, yani. Atmak. Blogum WordPress'te çalışıyor, bu yüzden düğmelere birine kod ekleyeceğim. Benim durumumda, BT BARBAR.PHP olarak adlandırılır. HTML Kodu Son derece basit ortaya çıkıyor:

En ilginç olanı iyi. Yardım ile, Sprite'imizin hangi alanımızın bu belirli bir yerde bir arka plan şeklinde gösterileceğini belirliyoruz (bizim durumumuzda, bu arka plan bir köprü tarafından yönetiliyor). Çok uzun süre nasıl çalıştığını açıklayın, bu nedenle aşağıdaki makaleyi okuyun ve her şey netleşecek (görsel örnekler de vardır). Tembelse, daha sonra hediye 24'te olmadığını fark edebileceğiniz diquses ile deneyin.

Evet, bir sprite dosyası FTP'yu sitenize doldurun ve () arka plandaki yolu () belirtin. Bu kadar. Çalışmazsa, yukarıdaki bağlantılara göre dikkatlice materyalleri okuyun, ve eğer tamamen işe yaramazsa, durumunuzu yorumlarınızı açıklayın (ayrıntılı - Detaylı - Meydanı ile sonuçlandırmak için PHP etiketlerinde unutun. parantez).

Sana iyi şanslar! Blog sayfalarında belirsiz toplantılara web sitesi

devam edebileceğiniz daha fazla makaraya bakın

");">

İlgilenebilirsin

Blok düzeni - Site için iki sütun, üç renkli ve lastik düzeni oluşturun

Peck değil mi? Ve yem ziyaretçilerinin araçları çok harcadı. Ve düğmeler sosyal ağlar Site yüklü? Açık! Yüzündeki hastalığın tüm belirtileri - sitenin sıkıntısı. Tedavi edeceğiz.

Sitenin neden sosyal ağların düğmelerine ihtiyacı var?

Site sayfalarında bulunabilirlik sosyal düğmeler Sadece zorunlu bir özellik veya şık bir aksesuar değildir. Her şeyden önce, sosyal düğmeler, kaynak sahibinin sitenin fonu tasarruf etmesine yardımcı olur. Aynı zamanda, terfi ziyaretçilerin yardımıyla gerçekleşir. Ve sahibi sadece sitesini yüksek kaliteli içerikle doldurmak ve yeni kullanıcıların akışını beklemek için kalır.

Ancak bu düğmeler sadece sitelerin sahiplerine de ihtiyaç vardır. Yerleşimleri, sosyal ağlar için kendileri için önemlidir. Bu düğmelerin her biri, bir sosyal portala giden bir referanstır. Ve bu referans alışverişi sayesinde destekleniyor yüksek seviye Sosyal ağlar içindeki özel etkinlik kendileri. Bu nedenle popüler sosyal ağlar ve web sitelerinin düğmelerinin hazır kodlarını sağlar.

Her zamanki sosyal düğme nedir?

Örneğin, VKontakte Sosyal Düğme komut dosyasını alın. Kodu:

Kodun bu kısmı "CAP" site sayfasına yerleştirilmelidir. Bu kod, sosyal düğmeye basıldığında yürütülmesi gereken komut dosyasını belirtir. İşte düğmenin resmini görüntülemekten sorumlu olan kodun ikinci kısmı:

İkinci kod parçası, düğmenin görüntüleneceği sayfanın bölümüne yerleştirilmelidir:

Düğmenin görünümü kolayca düzeltilebilir. Bunu yapmak için özel bir bölüme gidin teknik Destek Sosyal ağ sitesinde. Burada, kodunun oluşturulacağı uyarınca, düğmenin stilini ayarlayabilirsiniz.

Kolay yerleştirme seçenekleri

Sitemizdeki tüm popüler sosyal ağları web sitenizde göndermenize izin veren uzmanlık hizmetleri vardır. Bu, her birinin komut dosyalarını ayrı ayrı eklemek daha kolaydır. Bu hizmetlerin en popülerlerini düşünün:

• AddThis - Bu hizmet İngilizce konuşan bir arayüze sahiptir. Ancak aynı zamanda, dünyanın herhangi bir sosyal ağının bir düğmesini eklemenizi sağlar:

Sosyal düğmeler panelinin konumu birkaç şablonda seçilebilir. Hesabın ücretsiz sürümünde, kapsamlı yan panel mevcuttur. Ayrıca var Ücretsiz sürüm WordPress için eklenti. Servis sitesine kaydolduktan sonra, sosyal düğmelerdeki geçiş istatistiklerine erişim mevcuttur.

• SPARES42 - Sosyal düğme panelinin görünümünü ayarlama olasılığı ile "ince" olasılığı ile net ve basit bir arayüz. Bu durumda, yapılandırma işlemi eşlik eder adım adım talimatlar uygulanması gereken eylemlerin açıklaması ile. Bu nedenle, hizmet deneyimli web yöneticileri için bile uygundur:

Başka bir artı bu servis Birden fazla popüler CMS için destek ile Sosyal Düğme panelinin komut dosyasının üretilmesidir.

Sosyal Düğmeler ve WordPress

Popüler CMS, sosyal düğmelerin grup kurulumunun çeşitli eklentilerini yarattı. Eklentinin kurulumu örneğini göz önünde bulundurun WordPress için Sosyal Hisse Düğmeleri.

Bu genişlemeye olan olumlu partiler tamamen rusça konuşan arayüz, basitlik ayarları ve popüler sosyal ağlar runet altında "bileme":

WordPress için sosyal düğme eklentisini yükleme prosedürü.

1) Sitenin idari paneline gidiyoruz. Soldaki "Eklentiler" sekmesini, "Yeni Ekle" sekmesini seçin.
2) sayfada " Eklentileri yüklemek»Arama alanında, uzantı adını girin ve" Ara eklentisi "düğmesine tıklayın:

3) Arama sonuçlarında, istediğiniz genişlemenin adını buluruz. Bundan sonra, "Kurulum" bağlantısını tıklayın:

4) Arşiv ve kurulumu yükledikten sonra, karşılık gelen bağlantıya basarak eklentiyi etkinleştirin:

5) Sol konsolundaki aktivasyonu yapıldıktan sonra görünecektir yeni Kısım Paylaş düğmeleri:

Eklenti ayarları birkaç öğeden oluşur:

WordPress için birkaç kanıtlanmış eklenti:

• Sabit Sosyal Düğmeler - Bu eklenti, yukarıdan, aşağıdan veya yandan "birleştirilebilen", siteye yüzen bir sosyal panel eklemenizi sağlar;
• HTML Sosyal Hisse Düğmeleri - Bu eklenti sadece ile oluşturulan sosyal düğmeler içerir cSS'yi kullanma. ve HTML.

Sosyal Düğmeler ve Joomla

Bu motorun altında, sosyal düğmelerle çalışmak için birçok eklenti de oluşturulur. SOCBUTTONS örneğine genişleme yükleme işlemini göz önünde bulundurun. Bu eklentinin özellikleri:

• Motorun en popüler sürümlerine destek;
• Sadelik Ayarları;
• Görünüm özellikleri her düğme için ayrı ayrı ayarlanır;
• Kurulum paketinin küçük ağırlığı.

Prosedür:

1) Joomla'daki sitenin idari kısmına gidin ve simgesini seçin " Genişleme yöneticisi».
2) Burada genişlemeyi yüklemek için kaynakla belirlenir:

3) Genişletmeyi yükledikten sonra, git " Yönetici eklentileri"Ve sadece etkinleştir yüklü Genişletme. Bunu yapmak için sayfanın üstündeki yeşil simgeye tıklayın:

4) Yapılandırmak için, listedeki genişlemenin adına tıklayın. Bu eklentide, ekran ayarları ayrı ayrı her sosyal düğme için ayarlanır:

Joomla için bazı kanıtlanmış uzantılar:

• Sosyal yer imi - Bu eklenti hemen çeşitli sürümlerde var. Her biri belirli bir pozisyonda bir sosyal panel bulmanızı sağlar ( yatay, dikey olarak veya genel olarak yüzer hale getirir);
• JL Gibi - Bu eklenti harici komut dosyalarının ek indirilmesini sağlamaz, istatistikleri sosyal ağlardan oy kullanmanıza izin verir.

Komut dosyası veya eklenti?

Eklentinin kurulumu en basit ve hızlı bir seçenektir. En sık yüklendikten sonra, tüm site düzgün çalışır. Ancak, motor sürümünü daha yeni olana güncelledikten hemen sonra her şey çökebilir.

Motorun ve eklenti sürümlerinin uyumsuzluğu nedeniyle, sitenin sitesinde sorunlar ortaya çıkabilir. Çoğu zaman, herhangi bir tasarım öğesinin yanlış görüntülenmesi ile ilişkilidirler. Bizim durumumuzda, bunlar sosyal ağların düğmeleridir. Ardından, özel bir eklenti yerine çıplak bir komut dosyası kullanmak bazen daha iyi olduğunu anlamaya gelir.

İÇİNDE yeni sürüm PHP'deki motor Yöntem ve fonksiyonların yapısı çok nadiren değişir. Bu nedenle, komut dosyası, böyle bir güncellemenin işlemini kolayca "transfer eder".

Sosyal düğmeler kodu, uzmanlık hizmetlerinden birinde elde edilebilir. İncelemeleri yukarıda sunulmuştur. Örneğin, Pay42 servisini alın. Popüler motorlar için sosyal düğmelerin oluşturulmasını destekler. Prosedür.

Bloguma selamlar. Bugün, HTML'de yapıştırabileceğiniz gibi size adım adım göstermek istiyorum ve cSS düğmeleri sosyal ağlar. Tam sıfırla başlayalım ve sonunda istenen sonucu alıyoruz. İleri!

İşaretleme ve Temel Stiller

Bağlantı adreslerinde, sadece ızgarayı koydum. Tabii ki, gerçeklikte kullanıldığında, her referansın geçişin uygulanacağı bir çalışma adresine sahip olması gerekir.

Bu tür stillerin şunları olduğu için ekleyeceğiz.

Paylaşın (Genişlik: 280px; Marj: 0 Otomatik; Dolgu: 10px; Arka Plan: # D3CDEE;) .Share i (Marj-sağ: 15px; Renk: Siyah; Metin-dönüşüm: Büyük harf;)

Referanslar için (boyutlar, girintiler, arka plan) ve yazıt için biraz tasarlanmış bir konteyner var.

Simgeleri süsledik

Sosyal (ekran: satır içi blok; genişlik: 40px; yükseklik: 40px; arka plan: # BDC3C7; dikey hizalama: orta; kenar boşluğu sağ: 10px;)

Ekran mülkü: Inline-blok yaptık, böylece bağlantılarımız blok elemanlara dönüştürüldü, ancak aynı zamanda bir üst üste dayanabilme yeteneğini korudu. Sonra, boyutunu belirtin ve sağa girin, böylece bloklar birbirine uymuyor.

Peki, neden dikey hizalamız var: orta? Bu özellik, konteynerdeki metni, tam olarak merkezde dikey olacak şekilde çizer. Ayrıca hücrelerimize bu aşamada onları görsel olarak görecek bir arka plan soracağız. Boş bir şekilde ortaya çıktı. Sonunda simgeleri ekleme zamanı.

Son aşama

Bir veya başka bir sosyal tanımlayacak olan simgenizin hazırlanan bloklarının her birine yerleştirildik. ağ. Bunu yapmak için, bir resim sprite bağlamak ve her şeyi yerine koymak için arka plan konumunu kullanarak en doğru yöntemi kullanmayı öneriyorum.

Kısacası, böyle bir resme ihtiyacımız var. Ben yaklaşık 120 ila 40 var.

CSS stillerinde aşağıdaki kuralları ekleyin:

Sosyal-VK (Arka Plan: URL (Icon.png);) .Social-FB (Arka Plan: URL (ICON.PNG) -40PX 0;) .SOSIAL-TW (Arka Plan: URL (ICON.PNG) -78PX 0;)

Çıkıştaki simgelerle tamamen dekore edilmiş bir blok alıyoruz.

Nasıl aldığını anladın mı? Değilse, açıklarım. Her bağlantı bloğunun bir boyutu 40 ila 40'a sahiptir. Buna göre, 120 ila 40 bir arka plan görüntüsü belirlediğimizde, blok sadece tamamen konaklayamaz ve bunun sonucunda olabildiğince çok şey içerebilir.

Varsayılan olarak, bu durumda, genişliğin ilk 40 pikselinin ve arka plan görüntüsünün yüksekliğinin yüksekliği çekilecektir, ancak yükseklikte ve böylece her şey sırayla - Görüntü tamamen bloklara girer. Buna göre, yalnızca Facebook ve Twitter simgeleri için arka plan konumunu kaydetmek için kalır.

Arka planda geri kazanma: arka plan: URL (icon (icon.png) -40px 0, sosyal-FB bloğunun, arka plan resminin belirtilen konumdan görüntülenmesi gerektiğini, soldaki ve yüksekliğin genişliğindeki kırk pikselin gösterilmesi gerektiğini açıkça belirtiyoruz. Ofset olmadan, çünkü gerekli değildir. Bu kadar basit, aslında.

Başka ne yapabilirim?

Belki bir şekilde ayrıca bir şekilde bir sosyal ağ bloğu vermek istiyorsunuz. Birkaç fikir var. Öncelikle, köşeleri yuvarlamak için tüm simgeleri ekleyebilirsiniz.

Sosyal (sınır yarıçapı: 5px;)

İkincisi, onları bir çerçeve ekleyebilirsiniz.

Sınır: 3px katı mor;

Tasarıma göre, Menekşe bu durumda bizim için uygundur, bana öyle geliyor. Ayrıca konteynerin köşelerini referanslarla da yuvarlayabilirsiniz.

Yine, çok fazla tasarım seçeneği. Ve elbette, renkleri kolayca değiştirebilirsiniz. Bu yazıda, size böyle bir tasarım öneriyorum, ama şimdi kendi yolunda kolayca yapabilirsiniz: sarı, yeşil, kırmızı ve diğer simgeler.

Sonuç

Gördüğünüz gibi, kendi başınıza bile, siteye kolayca sosyal düğmeler ekleyebilir ve bu HTML ve CSS'de bize yardımcı olabilirsiniz. En azından, görsel olarak her özel siteyi tasarlamak için gerekli olduğu için simgelerimizi düzenleyebiliriz.

Bunda, bugünün makalesini bitirdim. Bir dahaki sefere CSS'de başka bir şey yaratıyor

Merhaba sevgili arkadaşlar. Bugünün makalesi, hizmetler ve eklenti olmayan bir sosyal düğme bloğu oluşturmaya adanmış olacaktır. Ve hatta bu blokta bile, site ziyaretçilerinin sayfayı yazdırmasını sağlayan düğmeleri içerecektir, makaleye bir bağlantı gönderir. e-posta Ve makalenize ipotek yapın. Bugün bu düğmeler neredeyse her sitede bulunabilir. Sadece burada hizmetler veya eklentiler kullanılarak uygulanırlar. Ve size kendin nasıl yapacağını göstereyim.

Müşteri sitelerinde ve blogunuzda kullandığım hizmetler - ve. Bu hizmetler, görevi kolayca gerçekleştirmenize izin verir.

Servis ve eklentilerden önce kendi sosyal düğmelerinin avantajı nedir?

1. Tabii ki, tartışılmaz bir faktör, sitenin indirilmesi hızıdır. Öyleyse, örneğin, bir blog kullandığım PLUSO hizmeti, en iyi durumla indirmek için 633 milisaniye ekler.

Ve bu blokta birleştirilen yalnızca sosyal düğmelerin gerekli görüntüleri kullanılır. Tüm stiller en aza indirilir. Ayrıca basit bir HTML çerçevesi.

1. Önerdiğim yöntem herhangi bir harici referans içermiyor. Hayır, bağlantılar var, ancak hepsi iç bağlantılar gibi olacaklar. Eğer istersen, her zaman yapabilirsiniz. Ve sonra hiç görünmeyecekler.

1. Büyük ölçüde basit kurulum. HTML blok kodunu Site sayfasının kaynak koduna eklemek için yeterli, Sprite'yı indirin, ekleyin css stilleri Ve kurulum tamamlandı. Dosyanın görüntüleri ile yalnızca dosyanın yolunu düzeltmeniz gerekecektir.
2. Bu ürün hızlı ve artı değil, kendi sosyal düğme bloğuna doğru eksi değil. Çip, kendi bloğunuzun push-buton metre yok olmasıdır. Ve eksi için sayılabilir. Ancak, diğer taraftan, her bir butona koymak mümkündür ve düğmelere kaç kez basıldığını ve ziyaretçilerinizi sosyal ağlarda paylaşmayı kesinlikle bileceksiniz.
3. Hizmetler tarafından toplanan istatistikler, siteniz artık üçüncü şahıslara iletilemez.

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

Makaleden sonra düğmeler düzenlendiğinde klasik seçeneği düşüneceğiz.

Bir blok sosyal düğme eklemek için makalelerin (Single.php) ve kaynak kodun çıkarılmasından sorumlu olan dosyayı açarak yapabilirsiniz. Ya bu, dosya işlevi dosyası (fonksiyonlar.php) ile yapılabilir.

Her iki seçeneği de göstereceğim ve kendiniz için uygun seçerim.

Single.php ekleme bloğu

UYARI: Tüm Eylemlerin Başlangıcı Yedekleme Single.php dosyası!

Yönetici panelini açın WordPress - "Görünüm" — "Editör" — "Bir giriş (Single.php)".

Kaynak kodunda, makalenin çıktısının bittiğinin ve yorumların veya sayfa navigasyonunun başladığı bir yeri arayın. Sosyal düğme bloğunun HTML kodunu eklemesi gerekecek bu yerde.

Ekran görüntüsüne dikkatlice bakın, makalenin sonuçlanmasından sorumlu kodlara odaklanın. ve yorumlar . Ve aşağıdaki kodu yerleştirin.

Tabii ki, şablonlarınızda bazı farklılıklar olacaktır, ancak bunu çözeceğinizden eminim, bu konuda zor bir şey yok. Ve ayrıca, bir yedekleme, korkacak bir şey yok.

Ve burada HTML'nin kendisi sosyal düğmelerin kod bloğu:

Koddaki açıklamalar: Bu, Score.share ile bir DIV bloğudur, bu da sosyal ağlara bağlantılar içeren. Bağlantı ayrı bir açılır pencerede açılır, bu onclick \u003d window.Open bunun için. Makaleye referans bu kodla gerçekleştirilir. . Her bağlantının, düğmenin görüntüsünün atandığı kendi sınıfına sahiptir.

Bunda, kaynak kodundaki ekleme tamamlandı. Ve sonra CSS stillerini bağlamanız gerekir.

Kaynak Koduna Blok Ekleme Single.php Tema işlevleri aracılığıyla

UYARI: İş hazırlığı, - Dosya fonksiyonlarını yedekleyin.php!

Bu seçeneği kullanmak için, Function.php dosyasını açmanız ve bu kodu en son eklemeniz gerekir:

/ * Sosyal Stokları Takma * / Add_action ("Comments_template", "SOC_BUTTON"); Fonksiyon SOC_BUTTON () (?\u003e Ve kodu ekledikten sonra dikkatli olun, boşluklar ve diğer karakterleriniz olmamalıdır. Ya sadece PHP kodu kapatılması?\u003e. Aksi takdirde, site çalışmayı bırakacaktır.

Koddaki açıklamalar: Sosyal ağ düğmelerinin görüntüleneceği yer, yorum_template API ile belirlenir. Bu anahtarda yorum yapmadan önce yer tarafından belirlenir. Sosyal kod kodunun kendisi, açılış ve kapatma php'in ters etiketlerinde sonuçlandırılmıştır. Kodda onları kırmızı olarak belirledim. Bu, tüm hile takımıdır. hTML Kodu PHP'de, tema işlevleriyle.

Bunda ve bu bittiği gibi, görüntüleri siteye indirmek için gidin.

Görüntü düğmelerini sunucuya yükleyin

Örneğin, sosyal düğmelerin görüntüleriyle birkaç sprite hazırladım. Onları indirebilirsiniz.

Örnek olarak kullandığım Sprite, sadece 3.97 KB ağırlığında ve yalnızca gerekli düğmeleri içeriyor. Sprite olduğundan, veritabanına olan istek sadece yalnız ve her düğme için ayrı olarak değil.

Görüntüleri indirin veya kendinizi hazırlayın ve bunları sitenize indirin. Bence bu sorunlarla ilgili herhangi bir sorun olmamalıdır. Daha sonra, bu sprite bağlantısı, düğmeleri CSS stilleriyle tasarlamak için gerekli olacaktır.

CSS stillerini bağlama

Bu adım elbette, ilk önce yerine getirebilir, ancak tüm karmaşık teknik çalışmaları tamamen yerine getirmeyi tercih ederim ve CSS stilleri ile hoş önemsizlere başladıktan sonra.

Öyleyse, sitenizin tasarımından sorumlu Style.CSS dosyasını açın. Ve bu stilleri takın:

A paylaşın (ekran: satır içi blok; dikey hizalama: devralma, miras, marjı: 5px 0 0 2px; dolgu: 0px; yazı tipi boyutu: 0px; genişlik: 40px; yükseklik: 40px; arka plan: URL ("http: // test ..png ") tekrar tekrar kaydırma 0px 0px saydam;) .Share a.vkontakte (arka plan: URL (" http: //test..png ") tekrar tekrar kaydırma -168px 0px saydam;) .Share agoogle (Arka Plan: URL ("http: //test..png") tekrar tekrar kaydırma -252px 0px saydam;) .Share a.LiveJournal (arka plan: URL ("http: //test..png") yok Kaydırma -336px 0px şeffaf;) .Share a.Twitter (arka plan: URL ("http: //test..png") tekrar tekrar kaydırma -42px 0px saydam;) .Share a.mail (arka plan: URL ("HTTP) : //Test..png ") tekrar tekrar kaydırma -294px 0px şeffaf;) .Share a.odnoklassniki (arka plan: URL (" http: //test..png ") Yok - tekrarlama kaydırma -126px 0px saydam;) .Share A.Pinterest (arka plan: URL ("http: //test..png") tekrar tekrar kaydırma -210px 0px saydam;) .Share a.LiveInternet (arka plan: URL ("http: //test..png) ") Tekrar tekrar kaydırma -378px 0px şeffaf; ) .Share a.evernote (arka plan: URL ("http: //test..png") tekrar tekrar kaydırma -420px 0px saydam;) .Share A.Bookmark (arka plan: URL ("http: // test .. Png ") tekrar tekrar kaydırma -462px 0px saydam;) .Share a.Email (arka plan: URL (" http: //test..png ") tekrar tekrar kaydırma -504px 0px saydam;) .Share A.Print (). Arka plan: URL ("http: //test..png") tekrar tekrar kaydırma -546px 0px saydam;) .Share A.Digg (arka plan: URL: URL ("http: //test..png") tekrar tekrar kaydırma -588px 0px Şeffaf;) .Share A.Spring (arka plan: URL ("http: //test..png") tekrar tekrar kaydırma -630px 0px saydam;)

Koddaki açıklamalar: Class.Share, bloğun genel bir görünümünü, her bir düğmenin boyutunu, girintilerinin boyutunu, girintileri ve birleşik bir arka plan ayarlar. Ve sonra her bir bağlantının kendi sınıfı ve her referansı vardır, düğmeye arka plan özelliğine bir düğme atanır. Düğmeler CSS sprite olarak yapılır ve her bir düğme, 40 piksel bir genişliğe ve yüksekliğe sahiptir ve bunlar arasında her bir düğme için görüntüyü doğruluğu ile belirlemenizi sağlayan bir girinti 2px vardır. Yani, ilk düğme 0 gibi ve ikinci 42 ve benzeri olarak belirtilir. Kodda, bu değerler turuncu ile gösterilir. Sprite'ye referans da turuncu renkle vurgulanır, spreyin yolunda değiştirirsiniz.

Bu konuda, sosyal düğme bloğunu oluşturma süreci tamamlandı. Güvenle kontrol edebilirsiniz.

Ayrıca, tüm işlemin görsellik gösterdiği bir video eğitimine sahibim, kutup düğmelerinin çalışmalarını gösteriyor. Sitelerinizi ve bloglarınızı görün ve uygulayın.

Şimdi her şey. Görev ile başa çıktı. Yeni makalelerde ve video öğreticileriyle tanışmak için iyi şanslar diliyorum.

İÇİNDE son zamanlarda Site ve bloglardaki sosyal ağların düğmelerini yüklemek moda oldu ve şaşırtıcı bir şey yok. İlk olarak, düğmeler, "Huskies" ve "Hearts "'u, toplumdaki makalelerin tanıtımını pozitif olarak etkilemenizi sağlar. İkincisi, sosyal ağlarda bireysel site sayfalarına bağlantıların paylaşılmasına izin veren ayrı düğme çeşitleri vardır - VKontakte, Facebook, Odnoklassniki, Twitter, vb. Ek ziyaretçileri çeker. Üçüncüsü, atılan makaleler çok sayıda "Seviyor" ve "kalpler", sitenin okuyucularından büyük bir güvenin tadını çıkarın.

Bu nedenle, bir web kaynağını geliştirmeye yardımcı olmak için sosyal ağların düğmelerinin siteye nasıl yükleneceğini bilmek çok önemlidir. En popüler sosyal ağlar dikkate alınacaktır.

• Temas halinde
• Facebook
• Odnoklassniki.
• Google "+1"
• Twitter
• Benim Dünyam

Sosyal ağların kendileri tarafından sunulan standart düğmelerin montajı burada değerlendirilecektir. Bu durumda her düğme, diğerlerinden ayrı olarak kurulması gerekecektir, biraz zaman alır, ancak çok iyi görünüyor.

1.1. Temas halinde

1.1.1 Kaydet düğmesi

Düğme oldukça esnek, üzerindeki yazıt istenen herhangi bir şekilde değiştirilebilir (varsayılan "kaydet").

Öncelikle sayfaya gitmeniz gerekir, orada, butonun görüntülenmesi için web sitenizde yüklenecek komut dosyası kodunu alacaksınız.

Burada 5 birini seçebilirsiniz stiller: Düğme, metre olmadan düğme, bağlantı, simgeleri olmadan bağlantı, simge.

Alan metin"Standart yazıt" Kaydet "ile değiştirmenizi sağlar.

Bir URL olarak, sayfanın adresini düğme veya başka bir sayfanın aynı adresi ile seçebilirsiniz (seçiminizde). İlk durumda, düğme bağlantısını, düğmenin kendisinin bulunduğu sayfaya paylaşacaktır. İkinci durumda, düğme, bulunduğu yerden bağımsız olarak belirttiğiniz referansı paylaşacaktır.

Eklemek için kodiki bölümden oluşur : İlk önce etiketler arasında herhangi bir yerde bulunmalıdır. ve, İkincisi, düğmenin görüntülenmesi gereken yerdedir. Siteye bir düğmeyi yükleme hakkında .

1.1.2 "Ben severim"

Düğmenin ikinci seçeneği - widget " severim" Siteye kurmak daha kolay olacak, çünkü Sonunda, sitenin doğru yere yerleştirilmesi gereken kodun sadece bir kısmını alırsınız.

Düğmeyi yapılandırmak için bu bağlantının . Aynı zamanda bir dizi parametreyi doldurmanız gerekir.

Sitenin adı - Sitenizin kısa ve şimdiki adını belirlemek daha iyidir.

İnternet adresi - Adresi belirtin ana Sayfa Senin siten.

Sitenin ana alanı - Sitenin ana aynasını belirtin ("Host" operatörünün parametresinde bulunabilir), bunu yapmayı zor bulursanız, ardından VKontakte teklifini bırakın.

Düğme seçenekleri - Bunlar düğmelerin farklı stilleridir, onu etkilerler. görünüm.

Yükseklik düğmeleri - Geometrik boyutlar "severim".

İsim düğmesi - İki seçenek mevcut (ilginç severim).

Eklemek için kod - VKontakte'deki Sosyal Ağ düğmesini görüntülemek için gereken kod.

1.2 Facebook

Düğme bu sayfada yapılandırılmıştır. Zorluklar ortaya çıkabilir, çünkü Formdaki yorumlar yazılmıştır. ingilizce diliAma aşağıda okuyabilirsin kısa Açıklama Her alan.

Urliçin.Sevmek - Düğme için sayfa URL'si (alan doldurulmazsa, düğmenin bulunduğu sayfa adresi alınacaktır).

Gönder.Buton. - Bir kenenin varlığı içerir yeni fırsat - Facebook'a bir link gönderin (ek bir düğme görüntülenir - "Gönder"). Açtığınızda, iki düğme aynı anda görüntülenecektir.

Düzen Stili. - Düğme stili, görünümünü etkiler (standart kabul edilir) buton_miktar).

Genişlik.- Pikseldeki düğmenin genişliği.

Yüzleri göster. - Bu düğmeye önceden basmış olan kişilerin avatarlarını etkinleştirdiğinizde görüntülenecektir.

Yazı tipi - Düğme yazı tipi türü.

Renk uyumu. - Düğmenin yanındaki boşluk arka planı (beyaz ve siyah).

Görüntülemek için fiil - Düğme adı (severim, tavsiye ederim).

Almak.Kod. - Komut dosyası kodunu oluşturan düğme.

1.3 Sınıf arkadaşları ve dünyam

Bu sosyal ağ, Rusça konuşan internette geniş popülerlik kazandı, çok sayıda insan var, bu nedenle "Sınıf" düğmesinin "ODNOKLASSNIKI" ve "SİTEYE" Dünya ".

Gitmeniz gereken düğmeleri ayarlamak için. Her birini kendi yolunuzda ayarlayarak ayrı ayrı düğme ekleyebilirsiniz ve her iki düğmeyi de aynı anda düzenleyebilirsiniz.

Yükseklik boyutu - Geometrik boyut düğmeleri.

Görünüm - Düğme çerçevesinin görünümü.

- Düğme seçimi (gibi, sınıf)

Sayaç - Push Press Sayacı (sağda, sayacın üstünde) açma ve kapatma.

Düğmelerinde metin - Düğmeler için mevcut olan üç isimden birini seçin.

Eklemek için kod - Siteye yüklenecek komut dosyası kodu.

1.4 Google "+ 1"

Yeni bir sosyal ağ, kısa sürede büyük bir izleyici kitlesini attı. "+1" düğmesi olmadan siteyi hayal etmek zordur, çünkü Sadece bir sosyal ağa bağlantılar eklemenize ve "artılar" sayısını artırmanıza izin vermez, ancak sitenin sonuçlarını üstteki sonuçlarını da etkileyebilir. arama motoru Google.

Bununla ilgili tüm detaylar yanı sıra, düğmenin kurulumu ve ayarları bulunur.

1.5 Twitter

Kısa mesajların en popüler hizmetini terk etmek imkansızdır. Kendinizi bu sosyal ağdan yükleyin ve insanların sitenize bağlantıları ne kadar hızlı paylaşacağını görün. BU butonunu yapılandırabilirsiniz.

Öncelikle istediğiniz düğmeyi seçmeniz gerekir (ilk seçeneğe ilgi duyuyoruz - "Link Gönder" düğmesi).

Bundan sonra, doldurmak istediğiniz sayfada birden fazla alanlı bir form görünecektir.

Link gönder - Bir düğmenin bulunduğu bir sayfayı veya başka birinin seçilmesi.

Metin- Düğmenin yanında görünen metni seçin (düğmede değil).

Sayacı göstermek - Düğmedeki tıklama sayısını saymayı etkinleştirin veya devre dışı bırakın.

Üzerinden - Twitter'a (pratikte etkilenen hiçbir şey) bağlantılar eklemenin bir yolunu seçme.

işaret- Twitter'da yayınlanacak bir etiket seçimi (pratikte hiçbir şey etkiledi).

Büyük düğme - Düğmenin geometrik boyutunu arttırın.

Twitter adaptasyonundan vazgeç - Twitter stillerinin reddedilmesi (alanı kene olmadan bırakmak daha iyidir).

Dil - Bir düğme dilini seçin.

Sağda, siteye eklenecek kod oluşturulur.

1.6 ya.ru.

Bunu yapmak için, istenen komut dosyası kodunu oluşturan birkaç alanı doldurun.

Boyut- Küçük veya büyük boyutlu düğme.

Stil- Düğme veya simge arasındaki seçim.

Bir tezgahı olan - Düğmeye tıklayarak açın veya kapatın.

Görünüm düğmesi - Düğmenin nasıl görüneceğine bir örnek.

Başlık- Sayfanın başlığını seçin (keyfi veya geçerli sayfa başlığı).

Eklemek için kod - Siteye eklenen istenen kod.

2. Site için Hazır Düğmeleri

Ancak, her bir düğmenin kodunu sitenize ekleme arzusu mevcut değilse, bir kerede sosyal ağların bir grup düğmesi oluşturan standart komut dosyalarını kullanabilirsiniz. Bu durumda, yalnızca sitenize böyle bir komut dosyası kodunu eklemek yeterlidir ve hemen en popüler sosyal ağların düğmelerine sahip olacaksınız.

Bloğu yapılandırmak ve istediğiniz sosyal ağları seçmek için bu bağlantıyı gözden geçirin. Aşağıdaki ekran, istenen sosyal ağların düğmelerini önerilenden seçebileceğinizi ve bloğun görünümünü hafifçe düzenleyebileceğinizi göstermektedir.

Hizmetler Seti - Site için sosyal ağların düğmelerinin seçimi (bir onay işareti olanlar sitede görüntülenecektir).

Kodu - Siteye eklemek istediğiniz istenen komut dosyası.

2.2 "Pluso" Düğmeleri

Son zamanlarda, sosyal ağların düğmelerinin yapıcısı - Pluso yaygın olarak popüler olmuştur. Siteye bu bağlantıdan gidebilirsiniz.

Tasarımcı oldukça esnek, çok fazla ayar var, böylece sosyal ağların düğmelerini oluşturabilir ve site tasarımına mükemmel uyum sağlayabilirsiniz.

Öncelikle, birkaç teklif edilen düğme ve metre stilini seçmeniz gerekir (yatay, dikey, renk, renksiz, vb.).

O zaman seçerek bir dizi parametreyi yapılandırmanız gerekir.

• blok yeri (dikey, yatay);
• düğmeler rengi (parlak, karanlık);
• blok değeri (büyük, küçük);
• sayaç (varlık veya yokluk);
• arka plan (renksiz veya renk);

Kod, belirttiğiniz parametrelere göre oluşturulacaktır, daha sonra siteye eklenmelidir.

S.hare42.

Siteniz için düğmeleri tanımlamanıza izin veren başka bir servis - schare42.com/tr.

Bu jeneratör, düğmelerin boyutunu yapılandırmanıza, gerekli sosyal ağları mevcut, mevcut büyük bir sayıdan ve simgelerin görünümünü düzenlemenizi sağlar.

Düğmelerin ve istenen sosyal ağların boyutunu seçin ve daha sonra ek seçeneklerin ayarına gidin.

Simgeleri ile panel tipi - Düğmelerin bloğunu görüntülemek ("dikey yüzer" sürümü) çok ilginçtir.

Görünür simge sayısını sınırla - Görüntülenen düğme sayısını seçin (diğerleri bağlantının arkasına gizlenecektir).

Site kodlaması - Sitenizin kodlamasını seçin.

Site42.com Web Simgesi Ekle - Bir keneyi kaldırmanız gerekebilir.

Sayaçları göster - Push-buton ölçüm cihazının (yalnızca jquery çalıştığında) etkinleştirilmesi.

Bu komut dosyasını yüklemek oldukça karmaşıktır, ancak Pay42 web sitesinde açıklanan adım adımdır.

3. Sitede düğmeler nasıl yüklenir

Siteye yerleştirmek istediğiniz kod iki bölümden oluşursa (VKontakte düğmesi durumunda olduğu gibi), parçaların her biri ayrı ayrı ayarlanır. Kod iki parçaya ayrılmazsa, bu adım atlanabilir.

Kodun ilk kısmı etiketler arasında eklenmelidir. ve. Bunu yapmak için, WordPress Yönetici paneline gidin ve şablon düzenleyicisine gidin.

Bir dosya bulmanız gereken şablon düzenleyicisinde "Başlık" (başlık.php)o zaman değilse - "Ana Desen" (index.php). Şimdi bir etiket bulmalısın veya. Bu dosyalarda böyle bir etiket yoksa (tüm konular farklı, iyi olabilir), o zaman her birinin etiketini düzenlemek ve aramak için tüm dosyaları açmak zorunda kalacaksınız. . "CTRL + F" tuş kombinasyonunu kullanabilirsiniz.

Gerekli etiketleri bulur almaz, kodun ilk bölümünü yerleştirebilirsiniz. kapanış etiketinden hemen öncekafa\u003eYanlışlıkla diğer komut dosyalarının kodlarına zarar vermemek.

Kodun ikinci kısmı, Site için seçilen sosyal ağların düğmelerini görmek istediğiniz yere yerleştirilir. Kod yalnızca bir bölümden oluşursa, yalnızca bu işlemi yapmak yeterlidir.

Çoğu zaman, düğmeler makaleden önce veya sonunda eklenir. Basitçe, elbette, ikinci seçenek. Buna bakacağız.

Makalenin bittiği yeri (sayfanın ana metin kısmı) bulmanız gerekir. Bunu yapmak için dosyayı düzenleyin "Bir giriş" (tek.php).

Şimdi, makalenin ana içeriğinin çıktısından sorumlu olan operatörü bulmanız gerekir. Benim durumumda, hemen sonra "The_Content" ve düğmelerin düğmesini yerleştirir.

Benzer şekilde, kodu makalenin başında yerleştirebilirsiniz, yalnızca makalenin başlığı ve metni arasında bir yer bulmanız gerekir.