İçerik
- Özetle Grafik Protokolünü Açın
- Başlarken
- Temelleri bir araya getirmek
- Doğru Açık Grafik türünü seçme
- Aktiviteler
- İşletmeler
- Gruplar
- Organizasyonlar
- İnsanlar
- Yerler
- Ürünler ve Eğlence
- Web siteleri
- Meta verilerinizi genişletme
- Başka ne sağlayabiliriz?
- Açık Grafik etiketlerinizi güncelleme
- Dağıtmadan önce test edin
- Sayfanıza "Beğen" düğmesi ekleme
Bu eğiticide, sitemizi daha Facebook dostu hale getirmek için Facebook’un Açık Grafiğinden nasıl yararlanabileceğimizi göreceğiz. Bunu yapmanın birçok avantajı vardır, ancak esas olarak harici web sayfanızın bir Facebook sayfasına eşdeğer olmasına izin verir. Bu nedenle, bir kullanıcı sayfanızı "Beğendiğinde", sayfanız ile kullanıcı arasında bir bağlantı kurulur. Sayfanız daha sonra kullanıcıların profilinin "Beğeniler ve İlgi Alanları" bölümünde görünecek ve ayrıca kullanıcıya güncellemeler yayınlama olanağına da sahip olacaksınız. Ayrıca toplu halde görüntülenen kopyayı ve küçük resmi de tanımlayabilirsiniz.
Peki bunu nasıl başaracağız? Şaşırtıcı derecede basit. Yapılandırılmış bir veri kümesi sağlayarak (Açık Grafik Protokolünü kullanarak), sitenizin Facebook'ta nasıl temsil edildiğini tanımlayabilirsiniz.
Özetle Grafik Protokolünü Açın
Açık Grafik Protokolü aslen Facebook tarafından oluşturulmuştur. İlk sürüm, ek yerleştirmenin bir yolu olan RDFa'ya (veya özniteliklerde Kaynak Açıklama Çerçevesine) dayanmaktadır. meta> içindeki etiketler kafa> bir web sayfasının nesne bir sosyal grafikte, bu örnekte Facebook. Daha anlamsal bir web oluşturmak için mevcut açık standartlar kullanılarak oluşturulmuştur.
Başlarken
Başlamak ve sayfalarınızı grafik nesnelerine dönüştürmek için gereken tek şey, ilgili Açık Grafik protokolünü eklemektir. meta> etiketler ve sayfalarınıza "Beğen" düğmesi.
"Beğen" düğmesini biraz sonra yerleştirmeyi ele alacağız, ancak önce meta> sayfa nesnenizi tanımlamak için etiketler.
Kullandığımız etiketleri oluşturmak son derece basittir ve aşağıdaki gibi görünür:
meta property = "og: title" content = "Grafik Eğiticisini Aç" />
Bunun kesinlikle geçerli bir meta etiket olduğunu görebilirsiniz. Tek yaptığımız şu şekilde bir özel mülk özelliği kullanmaktır og: property. Özellikler, Açık Grafik protokolü tarafından tanımlanır ve sayfanızı tanımlamak için ihtiyacınız olan hemen hemen her şeyi kapsar (bunları kısa bir süre içinde daha ayrıntılı olarak ele alacağız).
Açık Grafik protokolünün dört gerekli özelliği vardır:
og: title - Nesnenizin başlığı (ör. "Açık Grafik Eğitimi")
og: tür - Nesnenizin türü (ör. "Makale")
og: resim - Nesnenizi temsil eden bir resim
og: url - Nesnenizin standart URL'si
Bu gereksinimlerle ilgili dikkate alınması gereken birkaç önemli nokta vardır:
Tür - Bu, desteklenen türler listesinden her zaman geçerli bir nesne türü olmalıdır
Resim - Resminiz en az 50 piksele 50 piksel olmalı ve maksimum 3: 1 oranında olmalıdır
URL - Bu, grafiğin içinde benzersiz ve kalıcı kimlik olarak kullanılacaktır
Birden fazla ürün sağlayabileceğinizi belirtmek gerekir. og: görüntü alanları; Bir kullanıcı sayfanızı "Paylaştığında" veya "Beğendiğinde", profil akışında sayfanızı temsil etmek için hangi resmi kullanacağına dair bir seçim yapacaktır.
Bu gereksinimlere ek olarak, Facebook, sayfanızı Facebook'a bağlamak için gerekli iki alan daha eklemek için temel meta verileri genişletti:
og: site_name - Siteniz için okunabilir bir ad (ör. ".Net Dergisi")
fb: yöneticiler veya fb: app_id - Facebook kullanıcı kimliklerinin veya uygulama kimliklerinin virgülle ayrılmış listesi
Son olanların önüne "fb' onun yerine 'og’. Bunun nedeni, Facebook'un sayfayı yönetebilecek tam kullanıcı kimliklerini veya uygulama kimliklerini bağlamasına izin vermesidir. Sayfanıza her ikisini de eklemek geçerlidir veya uygun değilse onları dışarıda bırakabilirsiniz.
Facebook, açıklama etiketi olan başka bir mülk eklemenizi önerir:
og: açıklama - Sayfanızın kısa (bir ila iki cümle) açıklaması.
Açıklama özelliğini dahil etmek, sayfanız hakkında biraz fazla ekstra bilgiyi anında başkalarına ulaştırmanın harika bir yoludur.
Temelleri bir araya getirmek
Tüm bunları özümsedikten sonra, geçerli bir Açık Grafik nesnesi oluşturmak için bir araya getirildiğinde hepsinin nasıl göründüğünü görmek mantıklı geliyor. Yaptığım bazı mix'leri tanıtmak için kişisel sayfalarımdan birine katıştırdığım kodu kullanacağım:
! - FACEBOOK AÇIK GRAFİĞİ -> meta property = "og: title" content = "Mike Mackay - Ev Isıtma Karması (Mayıs 2011)" /> meta property = "og: type" content = "mix" /> meta özellik = "og: image" content = "http://dj.mikemackay.co.uk/uploads/thumbnail.webp">
Open Graph kodumda türü “mix” olarak belirledim. Gelecek listeden "karışım" ın aslında tanımlanmış bir nesne türü olmadığını fark edeceksiniz: bu grafikte kabul edilebilir bir kullanımdır ve birazdan açıklayacağım. Grafikte bu belirli nesnenin yöneticisi olarak Facebook kullanıcı kimliğimi de belirttim.
Doğru Açık Grafik türünü seçme
Nesnenizin grafikte gösterilmesi için türünü belirtmeniz gerekir. Gördüğümüz gibi, bu og: type özelliği kullanılarak yapılır. Desteklenen mevcut nesne türleri sekiz çerçeve grubuna girer ve aşağıdaki gibidir:
Aktiviteler
- aktivite
- spor
İşletmeler
- bar
- şirket
- kafe
- otel
- restoran
Gruplar
- sebep olmak
- Spor Ligi
- Spor takımı
Organizasyonlar
- grup
- hükümet
- kar amacı gütmeyen
- okul
- Üniversite
İnsanlar
- aktör
- atlet
- yazar
- yönetmen
- müzisyen
- politikacı
- profil
- alenen tanınmış kişi
Yerler
- Kent
- ülke
- dönüm noktası
- state_province
Ürünler ve Eğlence
- albüm
- kitap
- İçmek
- Gıda
- oyun
- film
- ürün
- şarkı
- televizyon şovu
Web siteleri
- makale
- Blog
- İnternet sitesi
UPC kodu veya ISBN numarası olan ürünler için, bunları ek olarak şunu kullanarak belirtebilirsiniz: og: upc ve og: isbn özellikleri.
Facebook, "Web Siteleri" kategorisine giren içerik için aşağıdakileri önermektedir:
"Kullanın için makale bir haber makalesi, blog yayını, fotoğraf, video vb. gibi geçici içeriği temsil eden herhangi bir URL İnternet sitesi bu amaç için. İnternet sitesi ve Blog bir sitenin tamamını temsil edecek şekilde tasarlanmıştır, og: tür türlerle etiketleyin İnternet sitesi veya Blog genellikle yalnızca bir alanın kökünde görünmelidir. "
Bu liste çoğu kişi ve sayfa için yeterli olmalıdır: ancak, belirli bir nesne türünün tam olarak uymadığı durumlar vardır ("karışımlar" örneğime göre); bu durumlarda kendi tipinizi belirleyebilirsiniz. Bunu yapmanın dezavantajı, bu türlerin Facebook'ta "diğer" olarak temsil edilmesidir.
Facebook, en sık kullanılan türleri aktif olarak izleyeceğini ve bunları desteklenenler listesine ekleyeceğini söylüyor. og: türler Vaktinden.
Meta verilerinizi genişletme
Bazı sayfalarda, bir kafe, şirket veya otelin konumu gibi nesne hakkında ek veriler eklemek isteyebiliriz. Açık Grafik, web sayfalarınız hakkında ek bağlam sağlamak için ihtiyaç duyduğunuz kadar og: özelliği oluşturarak bunu karşılamanıza olanak tanır.
Diyelim ki bir sayfa ve Londra'da bir restoran olan şirketimiz hakkında bir nesne oluşturduk. Daha sonra, kendi özel mülklerimizi sağlayarak, konumumuzun ve iletişim verilerimizin ek ayrıntılarını grafiğe ekleyebiliriz:
meta property = "og: street-address" content = "123 Herhangi Bir Sokak" /> meta property = "og: city" content = "Londra" /> meta property = "og: postal-code" content = "XY1 2ZZ" /> meta property = "og: country-name" content = "İngiltere" />
Ardından, rezervasyonlar ve sorgular için iletişim bilgilerini de sağlıyoruz:
meta property = "og: email" content = "[email protected]" /> meta property = "og: phone_number" content = "02071234567" />
Ek meta verileri gerekli özelliklerimizle bu şekilde birleştirerek, doğrudan grafiğin içine bir dizi değerli veri sağlayabiliriz.
Başka ne sağlayabiliriz?
Sormana sevindim. Open Graph ayrıca doğrudan ses veya video eklemenize izin verir. Örneğin, bir grupta olduğunuzu (veya hatta onları tanıtmaktan sorumlu olduğunuzu) ve yeni bir parça çıkardığınızı varsayalım. Elde edebileceğiniz en fazla pozu istiyorsunuz ve medyayı doğrudan ekleyerek hedef kitlenizi gerçekten kolayca maksimize edebilirsiniz.
meta property = "og: audio" content = "http://www.myband.com/song.mp3" /> meta property = "og: audio: title" content = "Hayali Şarkı" /> meta property = " og: audio: artist "content =" Hayali Grup "/> meta property =" og: audio: album "content =" Hayali Albüm "/> meta property =" og: audio: type "content =" application / mp3 "/ >
Birisi sayfanızı "Beğenme" veya "Paylaşma" yı kullandığında, ses doğrudan o kullanıcının gönderisinde sunulacaktır. Bu, herhangi bir arkadaşının parçayı doğrudan profil sayfasından dinlemesine izin verecektir.
Bunun yerine grubun yeni müzik videosunu tanıtmak isteseydik, şunları yapabilirdik:
meta property = "og: video" content = "http://www.myband.com/new-video.swf" /> meta property = "og: video: height" content = "640" /> meta property = " og: video: width "content =" 385 "/> meta property =" og: video: type "content =" application / x-shockwave-flash "/>
Yükseklik, Genişlik ve tip bu durumda isteğe bağlıdır, ancak şu anda Facebook'un yalnızca SWF formatında video yerleştirmeyi desteklediğini unutmamak önemlidir.
Videonuzun haber akışında görüntülenmesini istiyorsanız, işaretlemenize geçerli bir og: image etiketi eklemeniz gerekir.
Açık Grafik etiketlerinizi güncelleme
Nesneniz Facebook'a girdiğinde, sayfanızın Açık Grafiğini güncellemekte özgürsünüz. meta> normal olarak etiketler.
Şunu not etmek son derece önemlidir: og: title ve og: tür yalnızca başlangıçta düzenlenebilir: sayfanız 50 "Beğeni" aldığında og: title özellik grafikte sabitlenir. Sayfanız 10.000 "Beğenme" almaya devam ettiğinde, og: tür düzeltildi.
Sabitlendikten sonra bu mülklerin verilerini değiştirirseniz, orijinal değerlerini koruyacağından değişiklik Facebook'ta görünmeyecektir. Facebook bunu, sizi daha önce sayfanızı beğenmiş olan kullanıcıları şaşırtmaktan veya kafa karıştırmaktan korumak için yapar.
Dağıtmadan önce test edin
Geliştirmenin temel kurallarından biri, zaten bileceğinizden eminim, herhangi bir şeyi hayata geçirmeden önce test etmeniz, test etmeniz ve yeniden test etmenizdir. İken meta> etiketler doğrudan sayfadaki hiçbir şeyi etkilemeyecek, Facebook'ta bir etkisi var. Geçersiz etiketlere veya özelliklere sahip olmak, sayfanızın doğru bir şekilde temsil edilmesini engeller ve muhtemelen yanlış bilgiler içerebilir veya daha kötüsü hiçbir bilgi içermeyebilir: Sonuçta, maksimum görünürlük önemlidir.
Neyse ki, Facebook faydalı bir araç sağlıyor. Açık Grafik testi durumunda, bu resmi Facebook URL Linter'dır:
Developers.facebook.com/tools/lint
Yeni Open Graph etkin URL'nizi (veya test URL'nizi) girin, "Lint" e basın; Facebook içeriğinizi alacak, etiketlerinizi ayrıştıracak ve bilgilerinizi doğrulayacaktır. İstenmeyen bir şey bulursa, etiketlerinizi düzeltmeye tam olarak nereden başlayacağınızı bilmeniz için bir uyarılar ve / veya hatalar listesi sunulur. Etiketlerinizi gerektiği gibi düzenleyin ve ardından linterde yeniden test edin.
Düzgün ve hatasız olması için sayfanızı ihtiyaç duyduğunuz kadar test edebilirsiniz.
Sayfanıza "Beğen" düğmesi ekleme
Bulmacanın son parçası, kullanıcıların harici sayfanızı kolayca "Paylaşmasına" veya "Beğenmesine" olanak sağlama yeteneğidir. Facebook, bir şeyin (programlı olarak) başarılması ne kadar zor olursa, insanların bunu yapma olasılığının o kadar düşük olduğunu bilir. Bunu göz önünde bulundurarak Facebook, sayfanızda bir "Beğen" düğmesi oluşturmanıza ve uygulamanıza yardımcı olacak çok basit bir araç geliştirdi:
developer.facebook.com/docs/reference/plugins/like/
Esasen iki "Beğen" uygulaması vardır: XFBML ve Iframe. XFBML sürümü daha çok yönlüdür ancak Facebook JavaScript SDK'sını sayfanıza yüklemenizi gerektirir. Iframe sürümü hala size temel kullanım sağlar ancak olay dinlemeye veya dinamik yeniden boyutlandırmaya izin vermez. Sayfanıza en uygun yöntemi seçmelisiniz.
Kodunuzu oluşturduktan sonra tek yapmanız gereken onu sitenize yapıştırmaktır. Sayfanızı yenileyin ve sitenizi süsleyen o tanıdık "Beğen" düğmesini görmelisiniz.
Seninki ile meta> tüm ayarları ve parlak yepyeni "Beğen" düğmenizi yerinde etiketlediğinde, artık yeni Open Graph nesnenizi dünyaya dağıtmaya hazır olmalısınız.
