Menampilkan checkin Foursquare di website

Anda yang memiliki akun di Foursquare mungkin sering share checkin Anda ke Facebook, Twitter, Path, dll. Selain di situs-situs dan layanan social media, Anda juga bisa menampilkan informasi checkin terakhir Anda di website atau blog, lengkap dengan peta—dan jika ada—status yang Anda tulis. Tutorial ini akan menjelaskan caranya.

Sebelum melangkah lebih jauh, tutorial ini mengasumsikan bahwa Anda:

  1. Punya akun Foursquare (doh!)
  2. Punya akses dan hak untuk mengunggah dan menyunting (upload dan edit) file-file di server web Anda. Jadi, tutorial ini kemungkinan besar tidak bisa dipakai untuk kalian yang menggunakan layanan blog gratis (biasanya yang nama blognya jadi sub-domain seperti namablog.wordpress.com).
  3. Mengerti sedikit saja HTML dan/atau PHP untuk bisa copy-paste dan menyunting beberapa baris kode.

Langkah 1
Mengunggah (upload) file ke server

Download file foursquare.php dari halaman ini lalu upload ke lokasi yang bisa diakses dari website Anda, misal: http://domain.com/foursquare.php. File PHP ini adalah library atau kumpulan kode yang diperlukan untuk mengakses API Foursquare dan menarik informasi checkin terakhir Anda.

Layar Github

Klik-kanan pada tombol Raw lalu pilih Save link as… untuk menyimpan file ke dalam komputer

Langkah 2
Mendapatkan access token ke API Foursquare

Untuk memastikan informasi yang ditarik dari database Foursquare hanya dilakukan oleh pemiliknya yang berhak, pengguna yang ingin mengakses API Foursquare harus memiliki access token. Karena itu, Anda harus membuatnya sebelum dapat menggunakan library dalam tutorial ini pada website/blog Anda.

Anda bisa memperoleh access token di sini. Link ini mengarah ke sebuah halaman Foursquare yang akan meminta izin supaya data Anda bisa diakses.

Memberi akses app BinFsq

Setelah membuka link di atas, login ke Foursquare (jika belum) dan klik tombol Allow

Foursquare access token

Tampilan layar setelah token berhasil dibuat. Salin seluruh kode di dalam kotak kuning.

Simpan access token Anda ke dalam file Notepad atau tempat lain, atau biarkan halamannya terbuka sementara Anda menyelesaikan langkah terakhir di bawah ini.

Langkah 3
Menyalin beberapa baris kode di halaman

Setelah menyimpan file foursquare.php dan memperoleh access token, salin potongan kode berikut ke halaman yang Anda inginkan informasi checkin Foursquare Anda tampil.

<?php 
// Panggil file foursquare.php
require_once 'foursquare.php';
// Tarik data checkin
$fq = new foursquare('WGPM4XXXXX1M5IWXXXXXN31ELXXXXXN0TJSXXXXXPHJVWQ4G');
?>

<div class="foursquare" style="text-align:center">
	<h4>Checkin terakhir di</h4>
	<!--Menampilkan icon venue-->
	<img src="<?php echo $fq->venueIcon ?>"><br/>
	
	<!--Menampilkan nama dan kategori venue-->
	<?php echo $fq->venueNama ?> (<?php echo $fq->venueKategori ?>)<br/>

	<!--Menampilkan peta venue (ukuran peta 400x200 px, level zoom 15)-->
	<img src="<?php echo $fq->getMapUrl(400, 200, 15) ?>"><br/>

	<!--Menampilkan alamat venue-->
	<?php echo $fq->venueAlamat . ", " . $fq->venueKota . ", " . $fq->venuePropinsi ?><br/>
	
	<!--Menampilkan waktu checkin-->
	<small><?php echo $fq->checkinTgl ?></small>
</div>

Kode ini pertama memanggil file foursquare.php yang asumsinya disimpan di direktori yang sama dengan halaman di mana kode ini diletakkan. Anda bisa mengubah path-nya jika Anda meletakkan file foursquare.php di lokasi lain, misal di 'script/foursquare.php'. Kedua, kode ini akan menjalankan class yang menarik informasi checkin Anda. Di sini Anda harus menukar access tokennya dengan yang sudah Anda buat, pada contoh di atas access tokennya adalah 'WGPM4XXXXX1M5IWXXXXXN31ELXXXXXN0TJSXXXXXPHJVWQ4G'.

Selebihnya adalah kode yang digunakan untuk menampilkan informasi checkin di halaman web/blog Anda. Jika semuanya berjalan mulus, contoh di atas akan menghasilkan keluaran seperti di bawah ini.

Checkin terakhir di


Kantor Urusan Agama Ilir Barat I (Gedung Pemerintah)

, ,
December 8, 2016, 8:36 am

Kode di atas hanya sebuah contoh bagaimana Anda bisa menampilkan informasi checkin Anda. Tentu saja Anda bisa memodifikasinya (dan memberinya style dengan CSS agar sesuai dengan tampilan website/blog Anda).

Berikut adalah kode selengkapnya yang bisa Anda pakai untuk menampilkan informasi yang terkandung dalam checkin (menggunakan checkin terakhir saya sebagai contoh). Catatan: beberapa kode pada contoh di bawah mungkin tidak memiliki keluaran, seperti 'Status' yang tidak selalu saya tulis jika checkin.

  • $fq->venueNama: Kantor Urusan Agama Ilir Barat I
  • $fq->venueKategori: Gedung Pemerintah
  • $fq->venueTipe:
  • $fq->venueIcon: https://ss3.4sqi.net/img/categories_v2/building/government_bg_32.png
    Keterangan: Gunakan dalam elemen gambar <img> dan hasilnya menjadi:
  • $fq->venueAlamat:
  • $fq->venueKota:
  • $fq->venuePropinsi:
  • $fq->venueNegara: Indonesia
  • $fq->venueLat: -2.9892406
    Keterangan: Koordinat lintang venue
  • $fq->venueLong: 104.7318594
    Keterangan: Koordinat bujur venue
  • $fq->checkinTgl: December 8, 2016, 8:36 am
  • $fq->checkinStatus: “dengan Vita”
  • $fq->getMapUrl(lebar, tinggi, zoom, huruf pin, warna pin):
    http://maps.google.com/maps/api/staticmap?center=-2.9892406,104.7318594&maptype=roadmap&size=250x150&zoom=13&sensor=true&markers=color:red|label:A|-2.9892406,104.7318594|
    Keterangan: Lengkapi paramater di dalam kurung untuk memodifikasi peta. Pada contoh di atas, saya menggunakan $fq->getMapUrl(250, 150, 13, 'A', 'red') yang hasilnya setelah digunakan dalam elemen gambar <img> menjadi:

Pada tulisan selanjunya, saya akan menulis teknik lanjutan mengenai cara membuat token dengan aplikasi Foursquare Anda sendiri, cara menyimpan informasi checkin ke dalam file cache (untuk mempercepat kode dan sebagai backup jika server Foursquare tidak bisa diakses), dan cara lain memodifikasi peta checkin (seperti yang saya gunakan di halaman depan blog ini).

Silahkan share jika Anda merasa artikel ini bermanfaat. Apabila ada pertanyaan lain mengenai cara menggunakan library ini, Anda bisa menuliskannya di bagian komentar.