Yandex'ten arkadaşlarınızla paylaşın. Sosyal Düğmeler Paylaş - Kendimizi Yazın 5 daha fazla paylaşmak için ekle

Yazardan: Selamlar. Günümüzde, sosyal ağlar, 3 milyardan fazla insanın onlara kayıtlı olduğu bir seviyeye geliştirdiler. Potansiyel olarak çok güçlü bir izleyici kitlesidir, bu nedenle bugün size siteye sosyal ağların düğmelerini nasıl ekleyeceğinizi söyleyeceğim.

WordPress web sitesine ekleme

En çok gerçeği ile başlayacak basit yolWordpress varsa, bu iş için bazı eklenti kurmak kolaydır. Ne? Örneğin, Juiz Social Post Sharer'ı kullandım. Genel olarak, basitçe eklentileri arayışında sosyal sözcüğü girin ve orada olana bakın. Avantaj burada sadece bir şey yapılandırmak zorunda değilsiniz.

Yandex ayrıca, düğmeleri yapılandırabileceğiniz ve yerleştirebileceğiniz bir sayfa geliştirmiştir. Bu sayfada seçebilirsiniz gerekli Hizmetler (ve yaklaşık 25'i). Sağda seçim yapabilirsiniz görünüm Blok. Kullanıcıların kaç kez basıldığını gösterecek sayaçlar olabilir. Bu, sırayla, malzemenin okuyucular için faydalı olup olmadığını izlemenize yardımcı olacaktır.

Javascript. Hızlı başlangıç

Doğal olarak, her üç seçeneği de kullanmanız gerekmez, bazıları daha iyidir. Bloğun nerede olduğu ve başında ve sayfanın sonunda görmüştüm.

Artık makaleleri görüntüleyen bir kod içeren bir dosya bulmanız gerekir. Wordpress'te, örneğin, genellikle Single.php veya benzer şekilde denir. Öyleyse, makalenin ardından düğmelerinle bir blok koymanız gerekirse, The_Content hattını arayın. Eklenebilecek arkasında. Şablonunuzun geliştiricisi kodda yorum yaptıysa, size yardımcı olacaksınız.

Site dosyalarını düzenleme bazı yollar olabilir. Örneğin, doğrudan motorun eşanjörü (görünüm - editörü) içinden yapmak için. Bu durumda, kod vurgulanmamıştır, bu yüzden yönlendirmek için çok uygun değildir. Başka bir şekilde - FTP üzerinden. FTP istemcisini kullanarak siteye bağlanın, WP içeriğine gidin - Temalar. Burada, içinde aktif olan şablonu bulmanız gerekir. şu an. Biz ona gidiyoruz ve aynı single.php'i buluyoruz ya da başlığına benzer bir şey arıyoruz.

Kod dosyasında, The_Content satırını arayarak (Ctrl + F) olarak bulun. Bu koddan sonra bir yere yerleştirin.

Yorumlar yukarıdaki bu ekran görüntüsünde yeşil renkte vurgulanır. Gördüğünüz gibi, geliştirici, makalenin metninin bu yerde gösterildiğini açıkça belirtti. Bu harika, sadece makalenin hemen ardından kodu yerleştirin ve istediğiniz sonucu alın.

Pluso'dan düğmeler.

Javascript. Hızlı başlangıç

JavaScript'in temellerini keşfedin pratik örnek Bir web uygulaması oluşturma konusunda

Düğmelerin stilini seçebilir, arka planlarını, konumlarını ve boyutlarını özelleştirebilirsiniz. Ayrıca yerleşik bir metreye sahip olan simgeleri de seçebilirsiniz. Pluso'dan düğmelerin bir başka avantajı, şaşırtıcı görünümleri ve bunları hemen hemen her tasarıma gömme yeteneğidir.

Her şey yapılandırıldığında, kodu kopyalayın ve karşılık gelen bloğu görmek istediğimiz yere ekleyin.

Başka bir seçenek - Paylaş42

Önceki seçenekler bir şey sevmediyse, sosyal ağların düğmelerinin siteye nasıl yerleştirileceği başka bir yol var. Bu bir Share42.com hizmetidir. Muhtemelen, muhtemelen yaratılış sırasında, şu anda 43'ü olmalarına rağmen 42 Sosyal Hizmet Düğmesi vardı.

İşlemi ayrıntılı olarak tanımlamayacağım, çünkü her şey zaten sitede dekore edilmiş adım adım talimatlar. Bu simgeler tasarımını değiştiremezsiniz, ancak yalnızca boyut. Ancak, yaşasın.

Fare ile üzerine tıklayarak seçmeniz gereken simgeler. Ayrı olarak, favori tarayıcınıza eklemek, RSS ve "yukarı" düğmesine bağlantı eklemek gibi, bu tür ilginç özelliklerin varlığını not etmek istiyorum.

Sonra, panel türünü seçebilirsiniz: yatay veya dikey mi? İkincisi seçilirse, düğme sayısı sınırlı olabilir. Kodlamayı UTF-8'den ayrılmasını tavsiye ederim. Ayrıca, servisin simgesini, sayfanızdaki kullanıcıların buna geçip bu düğmeleri de yükleyebilmesi için düğmelerin simgesini de ekleyebilirsiniz.

Ayrıca, bir RSS simgesi eklemeyi planlıyorsanız, FIDDA'ınızın adresini belirlemelisiniz ve düğmelerdeki tıklama sayısını göstermek istiyorsanız, iki son kene işaretlenmelidir.

Aşağıda 2 düğme bulunmaktadır. İlk önce, kurduğunuz sosyal düğmelerin nasıl görüneceğine bakmanıza izin verir. İkinci indirme komut dosyasını kullanarak. Sitenize FTP üzerinden indirilmesi gerekiyor kök klasörü.

Bir sonraki adım, servis sayfasındaki bu klasörün yolunu belirtin. Genellikle, Site.com'u değiştirmek için yeterlidir. alan adı. Her şey, kaynağı çalıştıran Bundan önce CMS'yi seçerek kodu takmak için kalır. Kodu nereye ekleyeceğinizi anlamanız gerekir, umarım.

Hiç şüphem yok ki, sosyal düğmeler yapabileceğiniz birkaç normal hizmet olduğundan ve bunları ekleyen çok sayıda komut dosyası ve eklenti var. Bugün seni en iyi şekilde listeledik, bence seçeneklerimle.

Bugün, İnternet projenize sosyal ağlara ve hizmetlere düğme eklemeyi öğrendik. Şimdi senin faydalı malzemeler Minnettar okuyucularınızdaki sosyal ağlarda otomatik olarak dağıtılabilir. Ve üzerinde her şeye sahibim.

Javascript. Hızlı başlangıç

Web uygulaması oluşturmanın pratik bir örneğinde JavaScript'in temellerini keşfedin

FriendFeed - Bilgi toplama, gerçek zamanlı olarak çalışan sosyal ağlardan, bloglardan, mikrobloglamadan toplandı. FriendFeed ile, arkadaşlarınızı internette bulabilecek ilginç materyalleri öğrenebilir ve tartışabilirsiniz!

Surfingbird, internette en ilginç içeriği sunan bir hizmettir. Bunu yapmak için, kayıt yaptırmanız, ilgi alanlarınızı belirtmeniz ve sırayla bu servis Belirtilen ilgi alanlarına bağlı olarak ilginç fotoğraflar, video, notlar sunacaktır. İlginç bir hizmet, onunla daha ayrıntılı bilgi sahibi olmak gerekli olacak!

Blogumun Sevgili Okurları, sunduğu son dört hizmette herhangi bir hesap var mı? Benimle ilgilendim, kesinlikle kayıt olacağım!

Şahsen, sayaç olarak adlandırılan ilk seçeneği seçtim. Gönderinin önerilerini gösterecek, başka bir deyişle, kaç kez gönderiye referansı paylaştılar. Ekran seçeneğini seçtikten sonra, blogda yerleştirilmesi gereken kodu kopyalamanız gerekir.

Davamda ("Sayaçlar" ekranı seçtiğim gerçeği göz önüne alındığında) kod böyle olduğu ortaya çıktı:

İçerik - Bu, gönderinin metnidir.

Ancak önerilen kodu düzenlerseniz, aşağıdaki ekran şunlar olacaktır:

Yashare-Auto-in (
Marj: 10px Otomatik;
Metin Hizası: Merkez;
}

Yashare-Auto-in'nin kodla eklenen bir sınıf olduğu yer. Marj: 10px otomatik girintili yatay ve dikey, sırasıyla ve metin-hizala: Merkez, merkezdeki nesnenin yeridir.

Blogun gelişimi ivme kazanıyor, görünüm değişiyor ve geliştiriliyor, blog yavaş yavaş ilginç içerikle doldurulur, tüm değişiklikleri ve blog güncellemelerinden haberdar olmak için bloga abone olmanızı tavsiye ederim.

Kodlamaya dalmadan önce, daha önce sağladığımız kaynaklara dikkat edin ve dikkat edin. küresel web. Bu arada, en popüler olanı düşüneceğiz.

Dikkatimize layık bir başka hizmet -, aynı basit yapucudır, yalnızca hizmet ve ağlarla daha fazla düğmenin daha büyük, bazıları ise ilk kez gördüm. Yandex.technologies'in ana farkı - Bulutlu değil, doğrudan sunucumuzda çalışılacak tamamen oluşturulan bir komut dosyası elde ediyoruz.

Herkese ve kafasında bu kadar harika çözümler varsa, tekrar "bisiklet icat etmek" olmayacak gibi görünüyor. Fakat hayır, birisi tarafından yazılmış bir kişi tarafından yazılmış, yukarıda da rahatsız etmek için çok tembel olduğumuz için sorunsuz bir şekilde iyidir. Tabii ki, düzenli olarak çalışacak ve işlevlerini yerine getirecek, ancak toplam sitelerin toplam kütlesi için yazılı evrensel bir çözümdür. Kişisel küçük ihtiyaçları ve sözleşmelerinizi dikkate almaz.

İlk: Düğmelerin tasarımı aslında demirdir. Evet, sosyal ağların kendileri tarafından tanınabilir ve sağlanır, ancak sadece ihtiyaçlarımıza karşılık gelmez. Eh, kenarın alanı yuvarlatılmış ve sitemizin tasarımı, düğmenin kare olduğunu, ne yapılması gerektiğini gerektirir? - Sprite ve Redraw! Denenen, biliyor, biliyor - dava nangresizdir: bir tuşun değiştirilmesi, sprey üzerine yerleştirmek için beş altı numune "doğru" ile doludur. Ve bu sadece bir / birkaç düğmenin değiştirilmesi ve sitenin Gotik tarzındaki ve tüm düğmelerine ihtiyaç duyulduğunda karanlık?

İkincisi: Yandex'in güvenilirliğinde, şüphe etmek gerekli değildir, ancak düğmelerin, sayaç sayacının aksine, bazı nedenlerden dolayı sert yüklenir ve sayfanın ana içeriğinden nadiren benzemiyor. Bu, özellikle sayfayı aslında anında uçarken, iyi bir yüksek hızlı bağlantı ile belirgindir ve düğmelerle birkaç blok vardır.

Üçüncüsü: Test için, Paylaş24'te komut dosyasını oluşturun - büyük. Çok ihtiyaç duymamız gereken hatlardan her şey mi? - Düşünmüyorum.

Şimdi yazma komut dosyasına dönüşelim, üç bölümden oluşacak: HTML, CSS ve aslında, kodun kendisi JavaScript'te yazılmıştır. Ek olarak, jquery kütüphanesini kolaylaştırmak için kullanılacağım.

Gerekli tüm dosyaları bağlayın:

Şimdi komut dosyasını share.js dosyasına ekleyin, bu görüntüye benzeyecektir:

Var sayla Paylaş \u003d (Twitter: İşlev ($ BU) (VAR DATA \u003d share.data ($ this); eğer (veri) (VAR URL \u003d "http://twitter.com/share?"; URL + \u003d "Metin \u003d "+ Kodulu bileşen (veri. URL); Paylaş.Popup (URL);); false döndürün;), VK: İşlev ($ this \u003d share.data ($ this); if (veri) (VAR URL \u003d "http: // vkontakte .ru / share.php? "; URL + \u003d" URL \u003d "+ kodöretik (data.url); url + \u003d" & title \u003d "(! Lang: + kod çözme bileşeni (data.title); url + \u003d"&description=" + encodeURIComponent(data.text); url += "&image=" + encodeURIComponent(data.img); url += "&noparse=true"; share.popup(url); }; return false; }, facebook: function($this){ var data = share.data($this); if(data){ var url = "http://www.facebook.com/sharer.php?s=100"; url += "&p=" + encodeURIComponent(data.title); url += "&p=" + encodeURIComponent(data.text); url += "&p=" + encodeURIComponent(data.url); url += "&p=" + encodeURIComponent(data.img); share.popup(url); }; return false; }, data: function($this){ if($this){ return $.parseJSON($this.parent("div").attr("data-share-data")); }; return false; }, popup: function(url){ window.open(url, "", "toolbar=0, status=0, width=626, height=436"); return false; } }; !}

Sayfaya işaretleme ekleyin:

Yapı oldukça basittir, yani Share sınıfı olan sargı, DIV'yi yukarıda belirtilen veri paylaşımının niteliği ile takip eder. Dize, değerleri ile dört parametreden oluşturulur.

• uRL - paylaştığımız adres;
• img - resim, boş bir dize belirlemek zorunda değilse;
• başlık - Sayfa Başlığı;
• metin - İhtiyacınız olan açıklama.

Div'in içinde kendinizin üzerinde onclick olayıyla kendinizdir. Tıklama, yukarıda açıklanan yöntemlerden biri olarak adlandırılır.

Sadece insan görüş düğmelerini vermek ve CSS eklemek için kalır:

Paylaş (arka plan rengi: #ececec; ekran: satır içi blok; dolgu: 7px 5px;) .Share div: Sonra (içerik: "; ekran: blok; temizle: her ikisi de; ilk: 0;) .Share Div: İlk - Çocuk (Marj-Sol: 0;) .Share .Twitter, .Share .vk, .Share .Facebook (share.png); Marj-sol: 7px; Sınır-yarıçapı: 3PX; Yükseklik: 24px; Genişlik: 24px; şamandıra : Sol; imleç: işaretçi;) .Twitter (arka plan rengi: # 00CED; arka plan-pozisyon: 0 -61px;) .Share .Twitter: Hover (arka plan rengi: # 008abe;) .Share .vk (arka plan -Color: # 48729E; arka plan-pozisyon: 0 -32px;). .Share .Facebook: Hover (arka plan rengi: # 30487a;)

Sonuç olarak, bir tür almak için CSS düğmelerini ekledikten sonra:

Bu yazının bu yazısında, örnekte, sadece üç sosyal ağ kullandım, eğer başkalarını bağlamanız gerekiyorsa, çok fazla zorluklanmayacaktır. Bunu yapmak için, ayrıca HTML ve CSS'yi de kaydolmayı unutmamak için paylaşım nesnesine yeni bir yöntem ekleyin. Repost'un sosyal ağda meydana geldiği bağlantılar iki şekilde elde edilebilir:

• Her zaman yardım etmeyen sosyal ağ API'sinden yararlanın;
• Firebug kullanarak benzer bir hizmetten veya web geliştiricisi için başka bir araçtan tanımlamak için.

Temas halinde

Kimseye nasıl iletilebileceklerin listesini genişletmede çok fazla değil. Halen, ortalama ile ilgilenen hemen hemen her tür veriyi kapsar. sahibi iPhone. veya iPad. Bu dışında e-posta, resimler, videolar ve müzik, navigasyon koordinatlarını, iletişim listeleri ve adresleri, tematik kaynaklara referansları iletebilirsiniz ve belirli Dosyalar "Bulutlar", kısa multimedya notlarında, haberciler vasıtasıyla yaratılmış ve daha fazlası. Düşünceyi formüle etmek doğrudur - göründüğünde yeni hizmetVeri biçiminizi kullanarak, sistemde bir yeri vurgulamak zorundadır, ancak şimdiye kadar her şey dengelenir.

Bununla birlikte, Apple, IOS uygulamalarının dünyasının kesinlikle gelişeceğini ve dolayısıyla bu nedenle bu standart olmayan yeni başlayanların oluşumu zaman meselesidir. Muhtemelen, Kupertino ek yüklerden kurtulmaya karar verdi ve uygulamaların yazarlarına "paylaşım" fonksiyonlarının uygulanmasında çalışmalarını söylemeye karar verdi. Geçmişte bir Apple ile bir anlaşma yapılması için sert bir gereklilik, API'ler açık - cesaret, meraklılar - yenilikçiler. Potansiyel olarak sosyal olarak yönelimli programların yaratıcıları için umut verici bir çalışma yönüdür, aynı zamanda sonucun sorumluluğunun da endişeleridir.

İstisna, yalnızca şirketin kendi ürünleri için yapılır. Posta, Mesaj, Genel erişim Fotoğrafa. - Her zaman aktif kalırlar. Ancak, şimdi bette hakkında olduğu gibi, bu ve diğer yenilikler hala Eylül ayına kadar değişebilir.

En yeni görünen hikayeler aracı nispeten yakın zamanda ortaya çıktı, ancak zaten blogcular arasında ve aralarında olduğu gibi tanınmayı fethetmeyi başardı. Mağaza, ana şeritin üstünde, bu yüzden daha sık görülürler. Fotoğraf Yolu'ndaki yayınlanmış bağlantı, bir kullanıcıyı sosyal ağda bir web sitesine veya başka bir sayfaya göndermenizi sağlar. Bu sayede toplayabilirsiniz ek trafik Siteye veya blogunuzda ve ayrıca - hikayeyi başkalarının geçmişine karşı tahsis edin.

2 yol Tarihte bir bağlantı ekle

Belirli sayıda aboneden sonra (10K'dan fazla)

Hikayelere referans ekleme işlevi, doğrulanmış veya "seçilmiş" - rastgele işletme hesapları. Bugün, aboneleri 10.000 kişiyi aşan tüm iş hesapları sosyal ağa ekleyebilir.

Bir bağlantı eklemek için basit bir algoritmayı izleyin:

1. Ekle simgesine tıklayın yeni hikaye - Üstte, ekranın sol tarafında, yayınlanan kullanıcı hikayelerinin yanında bulunur.
2. Galeriden bir fotoğraf veya video ekleyin veya kamerayı kullanarak bir anlık görüntü veya kısa bir video alın.
3. Sağ üst köşedeki bağlantılar simgesine tıklayın. Alanı düzenlemek veya bir bağlantı eklemek için açacaksınız.

Birçok kullanıcının yayınlanan tarihteki bağlantıda nasıl hareket edeceğini bilmediğini unutmayın. Bunları Hedef İşlem'e itin - Aramayı bir fotoğrafa veya videoya ekleyin. İlginç bir şey öğrenmek için bağlantıyı atlayın. Örneğin, "Daha fazla bilgi edinmek için Harcama" veya "Mağaza sitesine gitmek için" daha "tıklayın."

Reklam kurarken

Reklam oluştururken bir bağlantı ekleme Daha fazla zaman alıcıdır, aynı zamanda daha verimli bir işlemdir. Reklamcılığı yapılandırmak için önce Facebook'ta Business Hesabının yapılandırmasına ve "Reklam oluştur" seçeneğine tıklamanız gerekir. Derhal Facebook Reklam Yöneticisine gidin.

Yerinde kişisel dolap "Bir reklam oluştur" düğmesine tıklayın ve basit bir işlem algoritmasını izleyin.

Reklamın amacını seçin. Hikayelerdeki referanslar için, "trafik", "bir uygulamayı yükleme", "dönüşüm" de dahil olmak üzere 6 gol mevcuttur. İş hesabının biçimine ve teşvik edilebilir bağlantıya bağlı olarak uygun hedefi seçin.

Kampanyanın amacını seçin.Burada tıklama veya görüntüleme seçebilirsiniz. Yani, bağlantıya tıklayın ya da kullanıcı indirmelerini yağmur yağacakken sayfayı ziyaret etmek için ödeyeceksiniz.

Hesap açmak. Daha önce Facebook'ta bir reklam oluşturmadıysanız, reklam ofisinin zaman dilimini, ülkesini ve para birimini belirlemeye teklif edilecektir.

İzleyiciyi ayarlamak. Bağlantı yol açtığı bir yer seçin - sitede, uygulama veya haberci. Ardından istenen parametreleri belirtin hedef kitle: Cinsiyet, yaş, ilgi alanları ve diğerleri.

Reklam alanı seçin. Varsayılan olarak, reklam üç sitede gösterilecektir. Sadece instagram hikayelerine ihtiyacınız varsa, "Yerleşimleri Düzenle" nin üzerine tıklayın ve "instagram", "hikayeler" de bir kene bırakın.

Bütçeyi kurun ve çubuk stratejisini seçin. Günlük bütçe limitini veya miktarını tüm kampanyaya ayarlayabilirsiniz ve sistemin kendisi eşit bir şekilde dağıtacaktır. Ardından Çubuk Stratejisi'ni seçin - varsayılan olarak, sistem en düşük fiyatı seçer. İsterseniz, manuel olarak yapılandırabilirsiniz, bunun için "Sınırı Yükle" e tıklayın. Ne düşük, reklamın göstereceği daha az şeydir.

Reklam biçimini seçin. Bir resim veya bir video seçebilirsiniz. Pazarlama açısından video kullanmak daha iyidir - reklamın 15 saniyelik bir zaman sınırına sahip olmasına rağmen, fikri daha iyi kullanıcılara daha iyi iletmek ve eylem için daha belirgin bir temyiz eklemenizi sağlar.

Gerekli alanları doldurduktan sonra bir önizleme göreceksiniz. Bu sayfada, görüntüleri veya silindirleri ilan etmek, eylem için bir arama ekleyebilir, URL'yi ekleyebilir ve değiştirebilirsiniz. Kaydettikten sonra, reklamınız seçilen parametreler ve yerleşik bütçe için CA'yı göstermeye başlayacaktır.

Ve doğrudan bir bağlantı gönderebilirsiniz

Direct instagram başkalarında kişisel mesajlar sistemi gibi görünüyor sosyal ağlarda. Bir veya birkaç kullanıcıyı bazı yazılara gönderirseniz, sadece göreceklerdir - kasette yayınlanmayacaktır.

Bugün, Instagram'da mesajlara mesajlara bir bağlantı ekleme işlevi kesinlikle her şey için kullanılabilir. Bir bağlantı eklemek için, sadece dizine gitmek için, göndermek isteyen kullanıcıyla bir sohbet seçin ve bağlantıyı manuel olarak girin veya önceden kopyalanan bir URL ekleyin. Bağlantı etkin olacak ve bir başlık resmine sahip gelişmiş snippet ve sayfa açıklaması otomatik olarak gönderilecektir.

Özetleyelim: Instagram için bir link yayınlama

• Geçmişe ekle - 10.000'den fazla aboneye sahip olanlar için kullanılabilir.
• Reklam hikayelerine ekleyin - herkes için kullanılabilir, ancak nakit masrafları gerektirir.
• Doğrudan gönder.