Bu konuda size vereceğim widget, daha önceki konudaki widget'ten daha iyi olduğunu söyleyebilirim. Direk çevrelerinize ekleyebiliyorsunuz ve siteyi +1 butonuyla beğenebiliyorsunuz. :)
Sizde sitenize Google+ sayfanızın yada profilinizin widget'ini eklemek istiyorsanız aşağıdaki kodlardan yararlanabilirsiniz.
Yapılması gerekenler:
1- Aşağıdaki kodlardan kullanmak istediğinizi seçin. HTML5 Valid, HTML5 Async JavaScript, HTML Valid size topladığım bilgilerden oluşturduğum 3 tane kod seçeneği sundum.
2- {plusPageUrl} yazan yere kendi sayfanızın yada profilinizin linkini girmeniz gerekmekte.
3- Kodunuzu düzenledikten sonra sitenizde istediğiniz yere koyunuz ve kullanmaya başlayın. :)
HTML5 valid olan kodumuz:
<script></script>
HTML5 valid, Asynchronous(ASYNC) JavaScript aktif etmek için kullanmamız gereken kod. :
<script>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
HTML5 ASYNC nedir?
Kısaca açıklamak gerekirse, dinamik js'leri sayfa yüklenirken çok daha hızlı yüklenmesini sağlamakta. Ufak bir örnek göstermek gerekirse Microsoft'un test sayfasına davet ediyorum sizi.
HTML valid olan kodumuz:
<script></script>
Google+ iki boyutta widget yapmış, biri normal badge diğeride smallbadge . Açıklacak olursak biri büyük, biri küçük widget.
Arasındaki fark nedir?
Arasında pek bir fark yok birinde +1 butonu bulunmakta, diğerinde +1 butonu bulunmamakta. Birisinin yüksekliği 131px, diğerinin 69px arada yarı yarıya fark var. Bu widget'in bir kötü yanı genişliği ayarlıyamıyoruz, 300px'e sabitlemişler. Ben sitemde malesef kullanamıyorum dışarı taşma yaşıyorum.
Peki diğer widget'i nasıl kullanırız?
Yukarıda vermiş olduğum kodlarda size="badge" kısmını, size="smallbadge" olarak değişirseniz istediğiniz widget'i elde etmiş olursunuz. HTML Valid olan kodumuz içinde data-size="badge" kısmını, data-size="smallbadge" olarak değiştirmeniz gerekmekte.
Yakında tam olarak aktif olucak olan widget sayfasını sizlere tavsiye ediyorum. Bu aktif olucak sayfadan bu kadar uğraşmanıza gerek kalmadan gerekli id girdiğinizde size kodu direk verecek. Ben size yinede verim o sayfayı.
Connect Your Site to Your Google+ Page
Kaynak: http://www.okansaglam.com.tr/sitenize-google-plus-sayfanizin-widgetini-ekleyin.html