Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP
Code

Desain dan kode aplikasi Facebook terpadu

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Yusuf Samin (you can also view the original English article)

Selamat datang di bagian tiga dari "Desain dan kode aplikasi Facebook yang terintegrasi." Pada titik ini, saya mengasumsikan bahwa Anda telah membuat HTML dan CSS untuk app Anda. Jika tidak, maka merujuk ke entri pertama dalam seri ini. Dalam bagian ini, kita akan mengambil aplikasi kami ke tingkat berikutnya!


Mengejar


Ikhtisar

Dalam pelajaran ini, kami akan mengurus:

  • menambahkan beberapa efek keren yang menggunakan jQuery Perpustakaan keren
  • menyiapkan aplikasi kami di Facebook app konfigurasi panel baru serta settingFacebook PHP SDK.
  • Membawa data dari Feedburner menggunakan Yahoos YQL api
  • Menarik data dari Facebooks graph api.

Begitu melekat dengan saya, buatlah secangkir teh, dan happy coding!


Langkah 1 - jQuery

Sebelum kita mulai dengan mengubah HTML kita untuk PHP, kita perlu membuat beberapa objek HTML fungsional. Kita dapat melakukan ini dengan mudah menggunakan jQuery Perpustakaan. Jika Anda belum mulai menggunakan jQuery Perpustakaan belum, maka sekarang adalah pasti waktu yang sangat baik untuk memulai. Ini merupakan pengantar untuk Javascript dan Sejujurnya tidak terlalu sulit untuk digunakan. Bahkan, Anda dapat membuat beberapa efek besar hanya dengan beberapa baris kode. Di app blog kami, kita akan menggunakan jQuery untuk dua hal. Pertama, kita akan menggunakannya untuk pencarian filter langsung, dan kedua, untuk tab halaman kami untuk memungkinkan pengguna untuk memiliki pengalaman yang halus karena mereka transisi dari setiap halaman.

Jika Anda ingat dari tutorial sebelumnya, kami menyertakan JavaScript file ke dalam header dokumen HTML kami. Sekarang saatnya untuk membuat file itu. Jadi melompat ke editor kode favorit Anda, dan namai file 'myjava.js'. Kita mulai dengan membuat dokumen siap. Ini menjelaskan jQuery untuk memuat segala sesuatu di dalamnya setelah DOM sudah siap untuk dimanipulasi.

Tab

Facebook app tabs

Ketika DOM sudah siap, kita menyembunyikan semua tab. Kami kemudian memudar setiap halaman di ketika tab yang sesuai adalah diklik atau membuat 'aktif'. Kami juga menghapus class active dari tab dan menyembunyikan semua konten halaman lain.

Filter pencarian

Item berikutnya kita akan menggunakan jQuery untuk pencarian filter kami. Ini akan memungkinkan pengguna untuk menyaring hasil pencarian mereka secara real time seperti yang mereka ketik. Hal ini dilakukan dengan mengambil nilai langsung bidang form dan filter dengan apa pun yang sesuai dalam kami 'posting' divs. Filter kemudian akan menunjukkan 'post' div yang berisi nilai dan menyembunyikan apapun yang tidak diinginkan.


Langkah 2 - PHP

Sekarang saatnya untuk membawa file statis ini hidup dan mulai menarik data dari Facebook dan Feedburner. Sekarang mungkin adalah waktu yang baik untuk mengubah nama file Anda dari index.html ke index.php dan download PHP SDK. Anda dapat men-download salinan terbaru SDK PHP Facebook dari:

Facebook PHP SDK


Langkah 3 - Setting Up aplikasi dalam Facebook kami

Setting up application in Facebook

Sekarang kita sekarang perlu untuk mengatur app canvas halaman Facebook kami. Meskipun hal ini telah dibahas sebelumnya, Facebook baru-baru ini telah diperbarui dengan halaman setup app; Jadi penting untuk pergi melalui konfigurasi baru. Pertama, meng-upload index.php ke web hosting akun kamu. saya sudah upload punya saya untuk subfolder misalnya. www.yourdomain.com/tut Ketika selesai, Anda dapat men-setup app Anda dengan mengunjungi https://developers.facebook.com/apps.

Pada titik ini, klik pada tombol 'create new app' di sudut kanan atas. Masukkan nama aplikasi Anda dan Anda kemudian akan dibawa ke halaman pengaturan. Facebook memungkinkan Anda untuk menciptakan banyak variasi aplikasi - dari desktop ke ponsel. Dalam kasus kami, kita perlu memilih 'App on Facebook'. Terdapat lima bidang penting yang Anda butuhkan untuk mengisi aga aplikasi Anda bisa bekerja. Mereka yang disorot dalam gambar di atas. Setelah ini telah dilakukan, jika Anda pergi ke apps.facebook.com, diikuti oleh apa pun yang Anda masukkan 'app namespace.' Dalam kasus saya, ini adalah 'webdesigntuts' jadi saya app domain adalah: http://apps.facebook.com/webdesigntuts/

Ketika Anda pergi ke url Anda, Anda harus melihat file index dalam ruang canvas di Facebook.


Langkah 4 - konfigurasi SDK Facebook PHP dan Setup

Setelah membawa app ke Facebook, sekarang saatnya untuk menarik data dari grafik Facebook API dan memungkinkan orang untuk login masuk dan keluar dari aplikasi kami.

Dalam direktori aplikasi kami, menambahkan folder baru dan panggil itu 'fb' Buka folder SDK yang Anda download dari GitHub. Di dalamnya, Anda harus menemukan beberapa contoh: src dan beberapa tes. Mengambil isi dari src folder dan seret ke dalam folder fb. Ini adalah sedikit yang kita butuhkan untuk menyambung Facebook. Dalam file index.php kami, menambahkan kode di bawah ini dimulai dengan termasuk SDK Facebook dari kami 'fb' folder, dan menambahkan unik app id dan kunci rahasia Anda. Dalam kode di bawah ini, Anda dapat melihat bagaimana ini harus di setup. Kita pada dasarnya terhubung ke Facebook dan mengambil user id dari orang yang menggunakan aplikasi kami. Jika pengguna telah disahkan, maka kami yang menghasilkan sebuah variabel untuk logout url atau jika mereka belum, kami menghasilkan satu untuk login url.


Langkah 5 - login masuk dan keluar

Di antara if dan else pernyataan, kami ingin menutup dan mulai tag PHP sehingga kita dapat menyisipkan html kita bahwa kita diciptakan sebelumnya ke halaman PHP. Sekarang jika Anda meng-upload halaman Anda ke web Anda space dan menyegarkan Facebook app canvas, Anda sekarang harus mampu melihat app. Jika Anda login di Anda akan melihat; Jika tidak, Anda akan melihat url login seperti dalam gambar di bawah

Design and Code an Integrated Facebook App

Kami sudah setup aplikasi kami dalam Facebook dan telah menciptakan sebuah login dan out untuk pengguna kami. Semua yang tersisa adalah untuk mengganti data dummy kami dengan data yang nyata.


Langkah 6 - menarik Data dari YQL menggunakan JSON

Pelajari lebih lanjut tentang YQL.

Bit pertama data yang kita akan menarik ke aplikasi kami adalah post blog. Hal ini di dapatkan dalam dari Feedburner RSS feed kami. Kami mengumpulkan menggunakan YQL. Jika Anda belum menggunakan YQL sebelumnya, maka Anda harus benar-benar mencobanya. Ini super sederhana untuk menggunakan dan fleksibilitas yang ditawarkan mengagumkan. Jika Anda tidak akrab dengan itu Anda dapat mempelajari lebih lanjut tentang ini di sini dan di sini.

Apa yang kita lakukan pada dasarnya adalah mengirim permintaan untuk YQL menggunakan sintaks mirip yang dapat digunakan dalam MYSQL. Kami kemudian men-decode data yang dikembalikan ke dalam format JSON yang mudah dibaca, dan menyimpan dalam variabel sehingga kita bisa mengambil bagian-bagian tertentu dari array dalam post blog kita.

Kita perlu membuat tiga permintaan untuk YQL. Mereka adalah sebagai berikut:

  • webdesigntuts-summay feed - ini berisi sebagian besar data yang kita butuhkan untuk post blog kita. Ini berisi judul, url, penulis, mempublikasikan tanggal dan ringkasan artikel.
  • webdesigntutsplus feed - satu-satunya informasi yang kita butuhkan dari ini adalah comment count. Kita perlu untuk memanggil satu ini karena data ini tidak terkandung dalam webdesigntuts-summary feed.
  • webdesigntuts-summary feed (lagi) - kali ini, bukannya mengumpulkan semua data, kami hanya mengumpulkan kategori untuk digunakan di sidebar.

Ini perlu dimasukkan sebelum penutupan PHP tag sebelum kami mulai HTML. Anda dapat melihat ini ditunjukkan dalam kode berikut:


Langkah 7 - mendapatkan jumlah Like dari sebuah halaman Facebook

Pada tahap ini, kita akan membuat panggilan ke Facebook graph API. Mirip dengan bagaimana kita membuat panggilan YQL, namun, ada beberapa sedikit variasi antara keduanya. Ini sangat sederhana untuk dilakukan dan harus menjadi bagian dari kode yang Anda menyimpan di folder potongan aku yakin itu akan datang berguna. Kami menetapkan variabel likes ke = '0', membuat panggilan dan kemudian katakan; Jika array yang dikembalikan mengandung 'likes' kemudian mengatur kami variabel likes jumlah likes yang dikembalikan.


Langkah 8 - menampilkan Data dinamis

Design and Code an Integrated Facebook App

Sekarang bahwa kita memiliki semua data kami yang disimpan dalam variabel PHP, kita perlu untuk mengambil data dan menampilkannya pada halaman kami. Untuk post blog kita, kita melakukan ini dengan menciptakan sederhana foreach loop dan menggunakan $feed sebagai nilai. Kita kemudian dapat echo keluar nilai-nilai individu dari array JSON kami dengan menggunakan nama bagian yang kita ingin echo. YQL konsol harus membantu Anda menemukan bagian-bagian ini dengan menggunakan tree mode.

Dalam blok kode di atas, perhatikan bahwa kita telah echo keluar jumlah komentar dari '$yqlfeed2'. Bagian komentar memiliki dua bagian: url komentar dan Komentar nomor. Url komentar part(0) pertama, dan jumlah komentar kedua, part[1]. Kita hanya memerlukan jumlah komentar. Kami juga auto increment item dengan menetapkan '$i = 0,' dan kemudian menggunakan 'item[$i ++]' dengan melakukan ini, nomor item akan bertambah setiap kali posting diulang keluar dan akan kembali jumlah komentar untuk setiap post individu.

Satu perkara untuk diperhatikan adalah bahwa kami telah digunakan built in fungsi PHP, subtr - substr ($item-> pubDate, 0, -9). Alasan mengapa kita melakukan ini adalah karena mencari karakter aneh pada akhir kami tanggal dan waktu. Ini hanya menghilangkan karakter terakhir sembilan (-9), dan meninggalkan kami tanggal dan waktu muncul seperti yang diharapkan.


Langkah 9 - menampilkan Username, gambar dan jumlah like

Design and Code an Integrated Facebook App

echo jumlah like sederhana; kami menciptakan variabel, '$likes' sebelumnya, jadi kita hanya perlu echo itu. Facebook PHP SDK juga secara otomatis menciptakan beberapa variabel untuk kita; sekali lagi ini adalah kasus sederhana menggemakan echo. Yang perlu kita lakukan adalah mengganti data dummy kami dengan data dinamis.


Langkah 9 - menampilkan kategori

Pada kode diatas, kita hanya loop melalui YQL query yang terkandung dalam '$yqlfeed3'. Kami juga menggunakan built in lain fungsi PHP, str_replace. Kami menggunakan ini untuk mengganti spasi dalam kategori dengan tanda '+'. Ini adalah supaya kita tidak akan memiliki link rusak ketika kita mencoba untuk mengarahkan pengguna ke kategori di Webdesigntuts+.


Langkah 10 - Final Tips dan trik untuk aplikasi Facebook

Secara otomatis mengubah ukuran ruang Facebook App Canvas

Trik pertama saya ingin tunjukkan membantu kita mendapatkan sekitar bug di Facebook canvas iframe. Dalam pengaturan Facebook app, Anda dapat mengaturnya sehingga iframe secara otomatis mengubah ukuran untuk menyesuaikan konten Anda; Namun, itu juga menempatkan scrollbar mengerikan di aplikasi Anda di sebelah kanan Facebook sidebar. Ini tidak terlihat terlalu besar, sehingga kita dapat memecahkan masalah ini dengan sedikit sederhana JavaScript yang dapat ditempatkan setelah pembukaan body tag. Ini akan mengubah ukuran canvas kami agar sesuai dengan konten, dan sidebar akan menjadi ke kanan Facebook sebagai lawan dari aplikasi kami.

Facebook App Login Popup

Facebook app login popup

Trik berikutnya yang saya ingin menunjukkan kepada Anda adalah, ketika pengguna pertama kali mengunjungi app Anda, mereka akan diminta untuk login/otorisasi. daripada hanya menampilkan link, kita dapat memiliki otorisasi popup Facebook. Anda tahu yang saya bicarakan, saya yakin Anda telah melihat mereka satu juta kali. Ini dapat dicapai dengan menambahkan sedikit lain JavaScript setelah penutupan kami else pernyataan PHP.


Kesimpulan

Jadi itu bro! Ini membawa kami 'Desain dan kode aplikasi Facebook terpadu' seri untuk ditutup. Saya harap Anda sudah sebanyak menyenangkan menciptakan itu seperti aku sudah menulis tentang hal itu.

September ini, di konferensi F8 tahunan, Facebook mengumumkan bahwa mereka telah melampaui 800 juta pengguna tahunan. Cara untuk pergi ke Facebook! Seperti yang Anda lihat, ini adalah platform yang bagus untuk mempromosikan diri Anda, merek Anda, atau produk Anda. Apa cara yang lebih baik untuk memanfaatkan hal ini dibandingkan dengan membuat aplikasi Facebook native tampilan dan nuansa Anda sendiri. Facebook juga mengumumkan, pada hari yang sama, penemuan ulang dari profil pengguna, disebut Timeline. Dengan Timeline datang cara tambahan baru untuk aplikasi akan diintegrasikan ke dalam profil pengguna/timeline.

"Film yang anda kutip. Lagu-lagu yang Anda miliki di ulangi. Kegiatan yang Anda cintai. Sekarang ada kelas baru aplikasi sosial yang membiarkan Anda mengekspresikan siapa Anda melalui semua hal yang Anda lakukan."

Design and Code an Integrated Facebook App

Ini adalah masa yang menggembirakan bagi kita pengembang aplikasi! Jika Anda belum memiliki mencoba, apa yang Anda tunggu? Tidak hanya berpikir tentang membangun aplikasi berikutnya, turun pantat Anda dan buatlah. Aku akan melihat ke depan untuk melihat apa yang Anda datang dengan dan bagaimana Anda dapat mengambil apa yang telah Anda pelajari, dan menempatkan sendiri spin di atasnya. Merasa bebas untuk meninggalkan link ke aplikasi dan kreasi di komentar di bawah ini.

Sampai nanti, happy designing dan coding!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.