Merhaba arkadaşlar,
Bir süredir yükseklisans kaydı, iş değiştirme telaşı yüzünden bloğa yazı atamadım. İşleri düzene sokup tekrar yazacağım yazının konusunu düşünmeye başladığımda ise aklıma hem yazılım hemde yeni girdiğim şirket ile ilgili bir blog yazısı yazmak geldi. Bu düşünce doğrultusunda en belirgin konu ise “bir siteye widget nasıl eklenir?” oldu.
Yeni girdiğim Broadage Sports firması Beinsport, NtvSpor, Tivibu Spor, bilyoner.com vb. gibi sitelere widget ve api aracılığı ile spor verisi sunmaktadır. Biz de bu örnek altında https://www.broadage.com/ adresinde yer alan deneme widget larından birisini sitemizin içerisine implement edeceğiz. Toplanın adım adım başlıyoruz…
Öncelikle https://www.broadage.com/signup/free adresine giderek free trial için bir kayıt oluşturalım. Mail üzerinden aktivasyon yapıldığı için geçerli bir mail adresi vermeyi ve password kısmında büyük-küçük harf, numara, sembol kullanmaya dikkat edelim. Ayrıca website kısmında geçerli bir web sitesi yazmalısınız. (Kayıt sonrası Account Settings altından değiştirilebilir). Ben bloğumun domainini yani www.enesaysan.com adresini yazdım.
Şimdi mail adresimize giderek gelen mail üzerinden aktivasyonu gerçekleştirelim ve sisteme giriş yapalım.
Dashboardumuza gidelim.
Şimdi üst menüden Widget Settings => Get Widgets seçeneğine tıklayarak sitemize eklemek istediğimiz widgetı seçeceğimiz ekrana ulaşalım. Burada size bir sürü farklı widget ve konfigurasyon seçeneği sunulmaktadır, ben bir Beşiktaş taraftarı olarak Beşiktaş kadrosunu görüntülemek istiyorum. Bu yüzden sol tarafta yer alan menüden Squad Stats seçerek, konfigurasyon kısmında General Options altındaki Select Tournament kısmında Turkish Super League ve Select Team kısmında Beşiktaş (Herkes kendi takımını seçebilir 😀 ) seçiyorum.
İşin zor kısmı bitti, şimdi sağ tarafta widgetın altına inerseniz sistem size yaptığınız seçime göre html ve script çıktıları üretmekte. Tek yapmanız gereken sitenizin ilgili alanına bunları yapıştırmak.
Ben hemen masaüstümde Visual Studio Code editörü ile WidgetTrial.html adıyla bir dosya oluşturdum. Şimdi sayfamızın içini widgetı ekleyecek şekilde düzenleyelim. Yapmamız gereken dashboard da bize üretilen html ve scripti bu sayfa içerisine yapıştırmak. (Widget ekleyip kullanmak bu kadar basit 😀 )
<!DOCTYPE html>
<html>
<head>
<script>
(function(b, s, p, o, r, t) {
b["broadage"] = b["broadage"] || [];
if (!b["broadage"].length) {
r = document.createElement(s);
t = document.getElementsByTagName(s)[0];
r.async = true;
r.src = p;
t.parentNode.insertBefore(r, t);
}
b["broadage"].push({ "bundleId": o.bundleId, "widgets": o.widgets, "accountId": o.accountId });
})(window, "script", "//cdn-saas.broadage.com/widgets/loader/loader.js", {
"bundleId": ["soccer-sqs"],
"accountId": "YourAccountID",
"widgets": {
"soccerSquadStats": [{
"element": "DOM_element_id_in_your_website_1547893498149",
"teamId": 3,
"options": {
"lang": "tr-TR"
}
}]
}
});
</script>
</head>
<body>
<div id="DOM_element_id_in_your_website_1547893498149"></div>
</body>
</html>
Sayfamız şuan hazır fakat domain kontrolü olduğu için,
bunu kayıt olurken belirttiğimiz (Sonradan da değiştirilebilir ) web site adresinin altına atmalıyız. Ben bunun için ftp kullanıyorum, bu hizmet için de FileZilla programından yararlanacağım.
Eğer bir hata yapmadıysak domainadresimiz/WidgetTrial.html
(Siz kendi domaininizi yazmalısınız) adresi altında beşiktaşın kadrosunu görmemiz gerekir.
Evet arkadaşlar başarılı bir şekilde kadromuzun widgetını sitemize ekledik. Sizde kontrol etmek isterseniz;
https://enesaysan.com/WidgetTrial.html
Not: Deneme sürümü olduğu için widget 15 gün aktif olacaktır.
Support dökümanı için adresi ziyaret edebilirsiniz.
https://www.broadage.com/account/support/tech-docs
Bir yazımın daha sonuna geldim, hepinize iyi hafta sonları dilerim. Kalın sağlıcakla 😀
Güzel Bir Websitesi
Tamam güzel ama bu tür blog yazılarına yerleştirmenin bir yolu var mı, kendi sitemde yazı oluşturarak içerisine uygulamak istiyorum ancak bir türlü olmadı myblog.tc
Alp merhaba, demek istediğini tam olarak anlamadım. Bana enesaysan8@gmail.com üzerinden mail atabilirsin.