Güzel sosyal medya düğmelerinin bir komut dosyası. Kendi sosyal düğmeleri. Düğme görüntülerini sunucuya yükleme

Ancak bu betiğin bir dezavantajı var - düğmelerden biri tıklandığında tarayıcı davranışını işleyen bir betik. İşte, iki sorunu kolayca görebileceğiniz bir kısmı:

Vkontakte: function (purl, ptitle, pimg, text) (url = "http://vkontakte.ru/share.php?"; Url + = "url =" + encodeURIComponent (purl); url + = "& başlık = " (! LANG: + encodeURIComponent (ptitle); url + ="&description=" + encodeURIComponent(text); url += "&image=" + encodeURIComponent(pimg); url += "&noparse=true"; Share.popup(url); }, !}

İlk sorun küçük ve çoğu bana şöyle diyebilir: “Hey, dostum bunu 2012'de yazdı! Sadece çizgiyi değiştir ve hepsi bu. ” Ve sana katılıyorum, sadece değiştirebilirsinvkontakte.ru'dan vk.com'a gidin ve soruyu kapatın.

İkincisi, her servis için yeni bir blok yazılması gerekiyor. Bunu yapmak da çok sorunlu değil, sadece kopyalayıp yapıştırın ve gerekli parametreleri kaldırın / ekleyin.

Ama bu komut dosyası sonunda ne yapar? Sadece listelenen parametreleri geçen bir açılır pencere oluşturur. Bu satırlar:

Açılır pencere: işlev (url) (window.open (url, "", "araç çubuğu = 0, durum = 0, genişlik = 626, yükseklik = 436");)

Biraz değiştirdiğim tam olarak bu betiğin çalışması. Ama daha fazlası aşağıda. Düğmelerin kendilerine ve nasıl çalıştıklarına bir göz atalım.

İlk olarak, paylaşım butonları için birkaç değişkene ihtiyacımız var:

• $ Başlık- Sayfanın başlığı (başlığı)
• $ Açıklama- Sayfa açıklaması
• $ Resim URL'si - sayfa görüntüsünün yolu
• $ Bağlantı - sayfaya doğrudan bağlantı

Kaç tanesinin gerekli olduğu ve ne oldukları açıkça anlaşılsın diye onları geleneksel olarak adlandırdım. Sitenize nasıl alınacağı - manuel veya otomatik olarak - yalnızca yürütüleceği uygulamaya bağlıdır. Örneğin, bir WordPress CMS'de şöyle görünecektir:

• $ Başlık- bu
• $ Açıklama —
• $ Resim URL'si —
• $ Bağlantı —

Şimdi, ihtiyacımız olan yere, değişkenlerin yerine gerekli değerleri değiştirdiğimiz (gerekirse) aşağıdaki kodu ekliyoruz:

Bu kadar! Çalışmanın sonucunu bu makalenin sonunda görebilirsiniz.

Yabancı analogların yanı sıra web siteleri için yerli tasarımcıların ve sosyal medya düğmelerinin komut dosyalarının gözden geçirilmesi. Kısaca, anlaşılır ve net.

Web sitesi için sosyal medya düğme tasarımcıları

2. Siteye bağlantı almanın kolay bir yolu - QIP.RU
Düğmeyi siteye yerleştirin ve ziyaretçilere favori site materyallerini yer imlerine, bloglara ve sosyal ağlara ekleme fırsatı verin. Üç adım: düğmenin nerede işaretleneceği (site, Blogger veya WordPress), düğmelerin stilini (kullanıma hazır) ve düğmeyi alın.

3. Sosyal ağlara içerik eklemek için düğmeler - Pluso
Düğmeleri yerleştirin ve ziyaretçilere beğendikleri sayfaları sosyal ağlarda paylaşma, yazdırma, e-posta gönderme ve yer imleri ekleme fırsatı verin.

4. Sosyal aktivite hizmeti - UpToLike
Renk, şekil, boyut ve özel efektler ayarlama özelliğine sahip özelleştirilmiş sosyal medya düğmeleri. Ek özellikler PicShare resim paylaşım aracı, "Alıntı" işlevi ve özelleştirilmiş Takip etme işlevidir.

5. Bir düğme! - yer imlerinin ve sosyal ağların tüm hizmetleri için
Tür düğmesini seçin. Düğmenin kurulacağı yer: web sitesi, Blogger veya WordPress. Bir düğme ekleyin.

Site için sosyal medya düğmelerinin komut dosyaları

1. Site için güzel sosyal düğmeler - goodshare.js
Düğmeleri hemen hemen her cihazda görüntüleyin. Temiz kod. Kısa belgeler. SEO dostu.

2. Sosyal yer imleri ve ağlar için komut dosyası düğmeleri - Share42
Sitede kullanmak istediğiniz hizmetlerin boyutunu seçin ve simgelerini işaretleyin. İstediğiniz seçenekleri seçin. Nasıl görüneceğini görün ve / veya hazır bir komut dosyası indirin. Komut dosyasını WordPress sitenize, Drupal'a vb. yükleyin.

3. jQuery kullanarak güzel sosyal medya düğmeleri - Sosyal Beğeniler
Sosyal ağlar için aynı tarzda sayaçlara sahip "beğen" düğmeleri komut dosyası: Facebook, Twitter, VKontakte, Odnoklassniki, Moi Mir, Google+ ve Pinterest.

Bir web sitesi için sosyal medya düğmelerinin yabancı analogları

1. Paylaş Düğmeleri - AddThis
Paylaşma düğmeleri, dağıtılan içerik aracılığıyla diğer kaynaklardan ve sosyal ağlardan ziyaretçi çekerek sitenizin hedef kitlesini artırmanıza yardımcı olacaktır.

4. Sosyal Paylaşım - Posta
Sosyal medya paylaşımından daha fazla değer elde edin. Hizmet, sitenin organik trafiğini artıracak olan ziyaretçiler için sosyal ağlarda paylaşım sürecini kolaylaştıracak.

5. Herhangi Bir Web Sitesi için Paylaş Düğmeleri - AddToAny
Herhangi bir web sitesi için sosyal medya düğmeleri kodunu alın. Düğme türünü ve stilini seçin, e-postayı ve diğer seçenekleri belirtin veya platformlardan birini seçin: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad veya FeedFlare. Düğme kodunu alın.

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 şey bunları sitenizin tasarımına uyumlu bir şekilde sığdırmaktır.

Özellikleri ve işlevleri nelerdir?

Siteniz popüler sosyal medya ile 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österebileceğinden, 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

"Neden ona ihtiyaç var?" - sen sor. Muhtemelen, zamana ayak uydurmaya çalışıyorum - burjuvazinin gerisindeyiz ve site tanıtımları şu anki gerçekliğimizden biraz farklı.

Burzhunet'teki bloglara bakarsanız, hemen hemen hepsinde en popüler sosyal ağlara ve yer imlerine bir makale duyurusu eklemenize izin veren çeşitli kayan paneller bulunur. Burjuvanın halka satın alarak ilerlemesi artık oldukça zorlaştı ve sosyal sinyallerin önemi inanılmaz bir şekilde artmaya başladı.

Panel, makalelerin paylaşım sayısını artırmanıza ve dolayısıyla etkilemenize olanak tanır. Madem böyle bir şey bizleri bekliyor, olayların biraz önüne geçmek doğru olur.

Neden bir Share42 paneline ihtiyacınız var, avantajları

Rus İnterneti ile en alakalı olan bu dört sosyal ağ için düğmeli bir panele sahip olmak istedim. bu mümkün sosyal sinyallerülkemizde henüz burjuvalar kadar her şeye kadir değiller, çünkü ilgili bir seçimi gerçekleştirmek için henüz yeterli değiller.

Ancak, küresel bir Armageddian bizim sapkın anlayışımıza göre Runet'e geldiğinde onları toplamaya başlamak ve tamamen silahlanmak daha iyidir - etkide önemli bir azalma ve bağlantı manipülasyonu için daha sert ceza.

Genel olarak Google ve üzerinde farklı sorgular girerek panelin uygun bir versiyonunu ararken Dimox.name sitesine denk geldim fakat orada güzel bir panel görünce açıklamasını aramaya gerek görmedim. kendi kaynağına kurulumu.

Bu tür şeyleri kendisinin (eklentiler olmadan) yaptığını biliyorum, ancak bugün gerçekten nüanslara ve ayarlara dalmak istemedim. Birkaç parça kod almak ve estetik bir bakış açısıyla ve çalışan bir versiyondan mükemmel bir sonuç elde etmek istedim. yüzen sosyal medya düğmeleri.

Sonra Share42 hizmetiyle karşılaştım ve üzerinde aynı sosyal medya butonlarını görünce biraz şaşırdım - Dimox damgalama kullanıyor. Yetenekli bir kunduracının tüketim mallarına gitmesi gibi bir şey. Bununla birlikte, internette biraz dolaştıktan sonra, kendi kendini seçme, yapılandırma ve yapılandırma için ücretsiz bir hizmetin başlatılması hakkında yazdığı yere rastladım. sosyal düğmeler için hazır komut dosyası kodu alma.

Site için düğmeler oluşturmak için yardım istemekten bıktı, bence şu anda piyasadaki tüm tekliflerin en iyisi olan ayrı bir proje açtı. Bunları sıralayayım profesyoneller gözüme çarpan:

Şimdi eksileri hakkında:

1. En azından ve hakkında temel bir anlayışa sahip olmanız gerekir. Yayınlarımı okumak için hemen acele edeceğinizi düşünmüyorum, ancak gelecekte bunu yapma niyetinizi umuyorum (sonuçta denedim, yazdım ve bu makalelerin ortaya çıkması yalnızca hızlı bir abone çıkışına neden oldu) - bu üzücü).

Ayrıca, sizin tarafınızdan kullanılanın en azından yaklaşık olarak nasıl düzenlendiğini hayal etmeniz gerekecektir. Örneğin, kodun içine girmenize gerek yok - kullanabilirsiniz (bu komut dosyası için denememiş olsam da).

Dezavantajlar sizin için önemli değilse (veya gerçeği aramak için hemen harekete geçmeye hazırsanız) ve avantajlar önemliyse, bu makaleyi daha fazla okuyabilirsiniz. Ne denir - geçiş yapmayın. Size çok basit bir kurulum ve Share42'de oluşturulan sosyal medya buton çubuğunun görünümü ve nasıl kurulacağı konusunda rehberlik edeceğim. Beni suçlama ama blogum bu motorda çalışıyor.

Share42'yi yapılandırma ve komut dosyasını siteye yükleme

Bu klasörü WordPress eklentilerinin bulunduğu dizine attım, bu yüzden sihirbazın dördüncü adımında tam olarak şu yolu belirtmem gerekiyordu:

Ayrıca WordPress'in önüne bir işaret koymak zorunda kaldım çünkü blogumun kullandığı motor bu. Paylaşım ayarları ile her şey yapılır, yalnızca sihirbazın beşinci ve altıncı adımlarında önerilen Html ve CSS kodunu eklemek kalır. Aslında, eğitimsiz kullanıcılar için genellikle ciddi sorunların ortaya çıktığı yer burasıdır.

Ayarlarınızda değişiklik yaptığınızda bu kodun içeriğinin anında değiştiğini unutmayın (Ajax açıkça harika ve korkunç). Bu nedenle, dikey bir kayan çubuk seçerken, bir tane yerine iki parça CSS kodu eklemeniz gerekecektir (yatay bir çubuk seçerken). Ancak bunlar çok etkileyici ve hoş olsa da tüm ayrıntılar (Dimoks'a şan).

İlk önce basit hakkında konuşalım - CSS kodu ekleme... Bir veya iki kural parçacığını kopyalayın ve şablonunuzun veya dış görünümünüzün kullandığı basamaklı stil sayfası dosyasını bulun.

WordPress'te genellikle Style.css olarak adlandırılır ve kullandığınız temanın (/ wp-content/temas/tema adı) bulunduğu klasörde bulunur. Joomla'da, şu anda kullanmakta olduğunuz şablonun bulunduğu klasörde stil dosyasını aramanız gerekir (/ şablonlar / şablon adı)

Bu dosyayı örneğin düzenlemek için açın ve kopyaladığınız stil kodunun parçalarını en sonuna ekleyin (Html ​​kodunu başka bir yere yapıştıracağız). Değişiklikleri kaydedin ve açılır teklifi kabul ederek bu değişiklikleri uygulamayı Filezila'ya giderek unutmayın.

Eh, şimdi üç satırla uğraşmanın zamanı geldi Html komut dosyası kodu Share42... Yazar, bunları makalelerden önce veya sonra eklemenizi önerir. WordPress'te bu kolay değil, çok basit. Temanızın bulunduğu klasörden düzenleme için single.php dosyasını açın (unutmayın, / wp-content / theme / WordPress temasının adında bulunur).

Kodu makalelerden hemen sonra yapıştırabilirsiniz. Bunu yapmak için, the_content işlevine sahip satırı bulun ve önerilen parçayı hemen arkasına ekleyin, örneğin şöyle: