Apa itu Facebook? Facebook adalah platform social media yang mempunya lebih daripada 700 juta user Di Malaysia sahaja terdapat lebih dari 10 juta user (termasuk anda) Ianya sebuah platform yang viral dan amat berguna untuk berkomunikasi Ramai kawan, lawan mahupun silent reader dan secret admirer sering memerhatikan kita di sana Apa itu Fanpage Facebook? Fanpage merupakan sebuah laman mini yang terdapat di dalam Facebook Ianya bertujuan untuk sesuatu produk, syarikat, individu untuk menarik pelanggan Ianya juga berguna untuk meningkatkan tahap kesedaran sesuatu produk itu kepada pengguna Individu juga penggunakannya sebagai satu platform untuk berhugung dengan ahli atau peminat Apakah Model pembelajaran yang kita akan belajar di sini? Kita akan belajar cara membina Fanpage dari A-Z Tetapi kita akan bermula dari asas bermakna ianya hanya basic buat permulaan Ini bagi mengelakkan mereka yang mempunyai zero knowledge akan ketinggalan Jika ada masa dan kesempatan insyaALLAH pelajaran ini akan berterusan (itupun jika ada sambutan)
[+] [+] [+] [+] [+]
Semestinya anda perlu mempunyai account Facebook Jika tiada anda boleh create di sini Setelah anda crete/daftar jangan lupa untuk add ramai friends Ini berguna untuk mempromosi Fanpage anda dikemudian hari Seterusnya anda boleh letak picture profile dan isikan informasi diri anda
[+] Pastikan account anda telah siap berdasarkan Step 1 di atas [+] Seterusnya pergi ke http://www.facebook.com/pages/create.php [+] Anda akan nampak gambar seperti di bawah:
[+] [+] [+] [+]
Sila pilih kategori yang berkaitan dengan Page yang anda ingin buat Pastikan ianya bersesuaian dengan perancangan anda Jika Page Syarikat sila pilih Company dan jika Page Product sila pilih Brand/Product
[+] Andaikata anda ingin membina Page Syarikat sila pilih Company seperti di atas [+] Isi maklumat dan info yang diminta dan jangan lupa untuk klik I agree to Facebook Pages Terms [+] Seterusnya klik Get Started [+] Selepas itu anda perlu mengisi Captcha dan hanya ikut apa yang tertera [+] Captcha di atas hanya untuk account Facebook yang belum/tidak verified sahaja
[+] Tahniah kini anda sudah mempunya Fanpage! [+] Tetapi tutorial ini tidak berhenti di sini kerana kita akan belajar sehingga part design Fanpage [+] Perhatikan Fanpage URL anda di address bar seperti di bawah:
[+] Ini merupakan URL untuk Fans anda datang melawat [+] Kita boleh memendekkannya kepada pilihan URL sendiri dan ini dipanggil Vanity URL [+] Sesetengah kategory memerlukan kita mempunya minimum 25 Fans untuk kita menukar URL tersebut [+] Jika anda sudah mempunyai minimum 25 Fans maka anda boleh menukar URL seperti Facebook.com/NamaSyarikatAnda [+] Jika anda mempunya vanity URL ia akan nampak lebih professional berbanding URL biasa yg panjang [+] Ingat Lagi? Step 1 kita perlu add friends seramai mungkin [+] Ini lah sebabnya, supaya kita dapat menarik mereka LIKE Fanpage kita [+] Anda hanya perlu klik link Share seperti gambar di bawah dan Share kepada rakan [+] Bole genap 25 Fans maka anda boleh mempunya vanity URL sendiri contohnya Facebook.com/NamaSyarikatAnda
[+] Seterusnya kita akan pelajari cara membina Fanpage [+] Anda perlu pergi ke App Static HTML dengan (klik sini) [+] Kemudian klik pada button Add Static HTML to a Page seperti di bawah
Nota: Apa itu App Static HTML? Ianya sebuah Applikasi bagi membantu kita membina website mini dan masuk ke dalam Fanpage Jadi perlu ke saya mahir coding? Ya setakat yang basic untuk anda membina fanpage contohnya seperti
![]()
dan sebagainya insyaALLAH tutorial ini akan merangkumi subject tersebut (jika ada sambutan) Apa alternatif kepada App Static HTML? Ada juga alternatif lain seperti di bawah iFrame Wrapper App (klik sini) TabPress App (klik sini) Jadi mengapa App Static HTML dan bukan iFrameWrapper atau TabPress? Ini adalah kerana kedua di atas mempunyai branding manakala Static HTML tiada Branding Sila lihat di bawah untuk penjelasan
* Jadi adalah lebih baik kita gunakan App Static HTML kerana tiada Branding (klik sini)
[+] Berdasarkan Step 4 di atas anda perlu klik Add Static HTML to a Page [+] Selepas anda klik, anda akan lihat seperti gambar di bawah
[+] Selepas klik anda akan terus dibawa ke Fanpage anda [+] Tetapi jika anda mempunya lebih dari satu Fanpage, anda akan diminta untuk memilih Fanpage untuk di 'add' [+] Jika anda sudah berjaya add Apps tersebut, anda akan lihat seperti gambar di bawah
[+] Kesemua yang di bawah profile picture itu dipanggil Tab [+] Anda akan lihat Tab Welcome dan itulah App Static HTML yang berjaya anda masukkan
[+] [+] [+] [+]
Langkah seterusnya melihatkan kemahiran coding HTML untuk membina Fanpage Adakah ianya rumit? Jawapannya Tidak jika anda mempunyai semangat untuk belajar Seterusnya klik pada button Tab Welcome anda Anda akan nampak gambar seperti di bawah
[+] [+] [+] [+] [+] [+]
Terdapat 2 petak di dalam gambar di atas dan di sinilah bermulanya segala kerja yang rumit Kenapa? dah mula takut.. hehe jangan risau Petak Enter your content here adalah tempat untuk tatapan umum dan terbuka untuk semua Petak [Optional] Fans-only content adalah untuk Fans sahaja dan ini dipanggil Fangate Fanpage hanya digunakan jika anda ingin Facebook User untuk LIKE sebelum melihat content anda Ianya dipanggil sebagai salah satu concept Viral Marketing dalam Facebook
Mari kita test sama-sama [+] Kita mulakan dengan ruangan/bahagian Enter your content here [+] Sila taip Content untuk Public! Tidak perlu Like untuk lihat content...
[+] Seterusnya bahagian/ruangan Fans Only Content pula [+] Sila taip Content untuk Fans sahaja! Perlu Like untuk lihat content...
[+] Seterusnya klik pada Save Changes seperti gambar di bawah
[+] Seterusnya klik pada Preview untuk melihat hasilnya
Inilah hasil test kita! [+] Untuk Preview Mode terdapat 2 view iaitu Public Content dan Fans Content [+] Untuk Public Content kita akan lihat seperti gambar di bawah [+] Public terdiri daripada user yang bukan Fans dan mereka yang tidak klik Like
[+] Untuk Fans pula anda akan lihat seperti di bawah [+] Content ini hanya dapat dilihat jika mereka klik pada Like Fanpage anda
Bagaimana? Mudah Bukan? [+] [+] [+] [+]
Mudahan sekarang anda sudah mendapat idea bagaimana membuat Fanpage sendiri Malah ini bakal membuka peluang perniagaan bagi anda jika ingin membuat servis membina Fanpage Seterusnya anda hanya perlu mempunyai kemahiran asa HTML sahaja Untuk lebih mudah, anda juga boleh menggunakan Applikasi Nvu
[+] Jika berkesempatan dan jika ada sambutan insyaALLAH akan diteruskan [+] Antara topik akan datang adalah [-] HTML asas untuk mencipta Fanpage [-] Photoshop asas untuk memasukkan gambar/design [-] Bagaimana menggunakan Nvu dan masukkan ke dalam Fanpage [-] Memasukkan borang atau contact form [-] Bagaimana memasang HTTPS facebook [-] dan sebagainya... insyaALLAH
As'kum w.b.t. [+] Ini merupakan sambungan kepada tutorial dari Part 1 (klik sini) jika anda terlepas [+] Mulanya saya ingat nak buka thread buat Fanpage HTML guna Nvu seperti home.html, about.html, service.html tapi mungkin itu kemudian [+] Kali ni kita belajar Page yang sama tapi shortcut dengan hanya satu(1) .html dan guna jQuery [+] Saya bukanlah pandai atau mahir sangat tetapi tujuan Tutorial ini adalah untuk kita belajar bersama [+] Terdapat pelbagai cara untuk pergi ke KL dari Johor sama ada bas atau kereta serta banyak jalan boleh dilalui dan dipilih [+] Kaedah yang dikongsi di sini pula adalah mengikut cara saya dan mungkin ada juga cara berbeza tetapi yang penting ia sampai ke destinasi [+] Mudahan sama-sama kita dapat bertukar ilmu dan pandangan bagi meluaskan pengetahuan masing2 [+] Andai kata ada yang merasakan ini sukar, sekurang-kurangnya ia dapat memberi gambaran kepada anda betapa sukar kerja programmer/designer [+] Mohon maaf jika ada terkurang atau tersilap dan saya juga mohon tunjuk ajar dari kalian semua
[+] [+] [+] [+] [+] [+]
Tutorial kali ini berkisarkan Sliding Tab Menu untuk Fanpage Sudah pasti anda tahu Menu Tab yang ada di website biasa seperti Home, About dan sebagainya Bezanya dengan ini ialah cuma ianya bersaiz skala kecil untuk dimuatkan ke dalam Fanpage Dalam pada masa yang sama ia tidak perlu menggunakan page .html yang banyak kerana semuanya di dalam 1 Page Semua coding jQuery dan css telah disediakan untuk anda Live Demo sample boleh dilihat di sini
[+] Kesabaran yang tinggi serta konsentrasi yang jitu [+] Software percuma Nvu (download sini) atau Notepad++ (download sini) [+] Facebook Account (register sini) [+] Facebook Fanpage (create sini) [+] Facebook Apps Developer Account (create sini) [+] Hosting acccount, jika tiada boleh daftar free di 1freehosting [+] Domain account, jika tiada boleh dapatkan di 1freehosting
[+] Pertama sekali buka Notepad++ atau Nvu yang telah anda download [+] Kemudian pastikan anda mulakan coding HTML anda dengan code di bawah: Code:
Tajuk Website Anda Di Sini
[+] [+] [+] [+]
Setiap yang bertanda < > adalah coding HTML contohnya ![]()
dan sebagainya Code di atas seperti adalah asas dan perlu ada dalam setiap HTML Letakkan tajuk website (website & fanpage sama cuma saiz berbea) anda di dalam Kemudian letakkan code di bawah sebelum </head><br />
<br />
Code:<br />
<br />
<!-- CSS --> <link rel="stylesheet" href="css/demo.css" type="text/css"> <link rel="stylesheet" type="text/css" href="css/slidingtabs-horizontal.css"> <!-- JavaScript --> <script src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4.4");</script> <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.slidingtabs.pack.js"></script> <script type="text/javascript"> $(document).ready(function() { // JS Coding untuk Sliding Tab $("div#tabs_horizontal").slideTabs({ // Options orientation: 'horizontal', slideWidth: 500, // Saiz Lebar #tabs_container <div> element contentAnim: 'slideLeft', contentEasing: 'easeInOutExpo', tabsAnimTime: 300, contentAnimTime: 600 }); }); </script><br />
<br />
[+] Segala bentuk file link ke .css atau .js harus diletakkan sebelum </head> [+] Bermakna ia harus diletakkan di dalam kepala HTML <head> supaya otak dia boleh berfikir dan memberi arahan kepada badan atau <body> [+] Code di atas itu adalah untuk link file .css dan .js yang akan kita create sekejap lagi bagi membuat Sliding Tab Menu [+] Err ada yang dah pening kepala ke? [+] Itulah bukan senang untuk buat coding website, ini pun baru HTML sahaja [+] Jadi bayangkan kalau buat coding lain atau bayangkan buat website dari scratch guna photoshop dan slice .psd ke HTML/CSS [+] Sebab tu adakalanya harga buat website amat tinggi kerana masa dan tenaga yang diluangkan agak panjang [+] Jadi marilah kita sama-sama hargai rakan-rakan kita yang membuat website untuk kita [+] Untuk memudahkan kerja anda maka saya telah siapkan coding .html, .css dan .js untuk anda semua [+] Jadi sekarang anda tidak perlu pening kepala lagi dan apa yang penting adalah untuk Take Action Download Di Sini [+] Tutorial_TabMenu.html [+] Folder CSS<br />
<br />
<br />
<br />
demo.css slidingtabs-horizontal.css<br />
<br />
[+] Folder JS<br />
<br />
<br />
<br />
jquery.easing.1.3 jquery.mousewheel.min jquery.slidingtabs.pack<br />
<br />
*Pastikan semua file ini dalam kedudukan betul dan jangan diubah kerana ia link sesama sendiri<br />
<br />
[+] [+] [+] [+]<br />
<br />
Un-zip file yang anda baru download tadi Anda boleh klik pada Tutorial_TabMenu.html untuk melihat sama ada berfungsi atau tidak Buka file Tutorial_TabMenu.html menggunakan Notepad++ atau Nvu (saya cadangkan Notepad++) Caranya adalah dengan tekan Right Click pada file Tutorial_TabMenu.html dan bukakan dengan Notepad++<br />
<br />
[+] Setelah anda membuka Tutorial_TabMenu.html menggunakan Notepad++ anda akan melihat semua coding di sana [+] Terdapat 4 warna di dalam coding tersebut iaitu Hitam Bold, Ungu, Merah dan Hijau [+] Anda hanya perlu menukar content/kandungan untuk Hitam Bold yang terdapat di dalam <body> </body> [+] Jangan ubah ayat atau perkataan yang berwarna lain, hanya tukar yang berwarna Hitam Bold sahaja [+] Contohnya seperti di bawah: Code:<br />
<br />
<h2>Selamat Datang ke Tutorial RWS</h2> <div class="text"> <p>Disini anda boleh letakkan intipati kandungan muka hadapan untuk Fanpage anda. Seperti website biasa, perbezaannya ialah ia berskala kecil dan user boleh pergi ke next page tanpa perlu keluar dari Facebook.</p> <blockquote>Kaedah ini lebih pantas kerana ia tidak perlu menunggu untuk Page Loading</blockquote> <p>Perlu juga diingatkan bahawa tutorial ini adalah PERCUMA dan diminta jangan sesekali dibukukan menjadi ebook kerana ilmu itu harus dikongsikan bersama. Anda boleh menggunakan sample tutorial ini untuk membina Fanpage anda sendiri.</p> <p>Sedikit pengetahuan HTML diperlukan untuk mengedit Tabs Menu ini. Apa yang penting ialah untuk membaca tutorial dengan jelas dan membuat eksperimentasi trial and error. Apa yang diperlukan ialah software Notepad++ dan anda hanya perlu edit content bahagian yang berwarna hitam sahaja. Pastikan ada mempunyai backup file andaikata ada file coding didalam ini terdelete. Mudahan ilmu ini bermanfaat buat semua dan marilah kita sama-sama membina sebuah Fanpage yang unik dan tersendiri. </p> [+] Anda hanya perlu menukar ayat kandungan mengikut citarasa anda [+] Setiap kali tukar pastikan anda klik Save dan buka semula Tutorial_TabMenu.html untuk melihat hasil yang telah diubahsuai [+] Maksud saya buka Tutorial_TabMenu.html adalah buka seperti membuka website dan bukan membukanya melalui Notepad++<br />
<br />
[+] [+] [+] [+]<br />
<br />
Tahniah! Sliding Tab Website anda telahpun siap Kenapa ia dipanggil Sliding Tab? Kerana bila anda klik pada Tab lain ia akan ada Slide Effect Ianya sama seperti website lain cuma yang ini tidak memerlukan banyak Page HTML Bermakna anda boleh buat 4 Tab (atau lebih) contohnya Home, About Us, Our Service dan Contact Us<br />
<br />
[+] Yang asal hanya ada 2 Tab dan terpulang pada anda untuk menambahnya [+] Yang penting perlu ingat bahawa ini adalah untuk Facebook Fanpage yang bersaiz 500px [+] Maka adalah afdal untuk membuat maksima sehingga 4-5 Tab sahaja [+] Terdapat 2 coding yang perlu anda tambah iaitu Coding Tab dan Coding Content [+] Coding Tab bermaksud Tab Home, About, Service dan sebagainya [+] Coding Content adalah isi kandungan bagi setiap Tab tersebut [+] Coding Tab yang asal adalah seperti di bawah: Code:<br />
<br />
<ul id="tabs"> <li><a href="#content_1" id="tab_1" class="tab active" rel="nofollow">Menu Utama</a></li> <li><a href="#content_2" id="tab_2" class="tab" rel="nofollow">Tab 2</a></li> </ul> [+] Tab 1 - Menu [+] Tab 2 - Tab 2 [+] Anda hanya perlu tambah seperti di bawah: Code:<br />
<br />
<ul id="tabs"> <li><a <li rel="nofollow"><a <li rel="nofollow"><a <li rel="nofollow"><a<br / rel="nofollow">
<br />
href="#content_1" href="#content_2" href="#content_3" href="#content_4"<br />
<br />
id="tab_1" id="tab_2" id="tab_3" id="tab_4"<br />
<br />
class="tab active">Menu Utama</a></li> class="tab">About</a></li> class="tab">Service</a></li> class="tab">Contact</a></li><br />
<br />
</ul> [+] Perhatikan Tab 2 saya telah ubah kepada About dan saya tambah Service dan Contact [+] Jangan lupa untuk meletak nombor pada #content dan id seperti contoh di atas [+] Coding Content pula adalah seperti di bawah: Code:<br />
<br />
<div id="content_1" class="tab_view"> <h2>Selamat Datang ke Tutorial RWS</h2> <div class="text"> <p>Disini anda boleh letakkan intipati kandungan muka hadapan untuk Fanpage anda. Seperti website biasa, perbezaannya ialah ia berskala kecil dan user boleh pergi ke next page tanpa perlu keluar dari Facebook.</p> <blockquote>Kaedah ini lebih pantas kerana ia tidak perlu menunggu untuk Page Loading</blockquote> <p>Perlu juga diingatkan bahawa tutorial ini adalah PERCUMA dan diminta jangan sesekali dibukukan menjadi ebook kerana ilmu itu harus<br />
<br />
dikongsikan bersama. Anda boleh menggunakan sample tutorial ini untuk membina Fanpage anda sendiri.</p> <p>Sedikit pengetahuan HTML diperlukan untuk mengedit Tabs Menu ini. Apa yang penting ialah untuk membaca tutorial dengan jelas dan membuat eksperimentasi trial and error. Apa yang diperlukan ialah software Notepad++ dan anda hanya perlu edit content bahagian yang berwarna hitam sahaja. Pastikan ada mempunyai backup file andaikata ada file coding didalam ini terdelete. Mudahan ilmu ini bermanfaat buat semua dan marilah kita sama-sama membina sebuah Fanpage yang unik dan tersendiri. </p> </div> </div> [+] Perhatikan ia bermula dengan 2 <div> dan berakhir dengan 2 </div> dan ini adalah penting [+] Anda hanya perlu copy paste dari Content mana-mana Tab dan Paste di penghujung 2 </div> tersebut [+] Dan jangan lupa untuk menukar div id="content_1" kepada content_3 atau content_4 [+] Hasilnya anda akan dapat seperti yang di bawah:<br />
<br />
[+] Tahniah! Kini anda telahpun mempunyai website 4 Tab dengan bersaiz 500px untuk Facebook Fanpage anda [+] Jika anda mahir dengan HTML anda boleh memasukkan code seperti bold, italic, blink dan sebagainya seperti contoh Tab 2 [+] Kini apa yang perlu anda buat ialah untuk menyimpan semua file ini di dalam 1freehosting.com yang telah anda register [+] Kemudian hanya perlu create Facebook Apps dan anda sudah boleh masukkan ke dalam Fanpage anda seperti contoh di sini [+] Terima Kasih atas kesudian anda untuk meluangkan masa untuk membaca tutorial yang tidak seberapa ini [+] Tutorial untuk menyimpan di hosting dan masukkan ke dalam Fanpage akan menyusul tidak lama lagi<br />
<br />
As'kum w.b.t. [+] [+] [+] [+]<br />
<br />
Ini merupakan sambungan kepada Tutorial Part 2 (klik sini) Kita juga akan belajar dimana untuk dapatkan FREE Hosting dan sub-Domain Mudahan anda telah berjaya praktikkan Tutorial Part 1 dan Tutorial Part 2 dengan jayanya Mohon maaf jika ada terkurang atau tersilap dan saya juga mohon tunjuk ajar dari kalian semua<br />
<br />
[+] Tutorial kali ini akan memberikan anda gambaran bagaimana untuk masukkan design anda ke dalam Facebook Fanpage [+] Fanpage membenarkan anda memasukkan content dengan bersaiz 520px menggunakan konsep iFrame [+] Tidak kiralah jika ianya dari content Tutorial Part 2 mahupun design HTML anda sendiri [+] Contoh iFrame adalah seperti di bawah:<br />
<br />
[+] [+] [+] [+] [+] [+] [+]<br />
<br />
Kesabaran yang tinggi serta konsentrasi yang jitu Facebook Account (register sini) Facebook Fanpage (create sini) Facebook Apps Developer Account (create sini) Hosting acccount, jika tiada boleh daftar free di 1freehosting Domain account, jika tiada boleh dapatkan di 1freehosting Content untuk iFrame dan ini kita gunakan content Tutorial Part 2 untuk dijadikan contoh<br />
<br />
[+] [+] [+] [+] [+] [+] [+]<br />
<br />
Pertama sekali anda harus mempunyai hosting Hosting adalah tempat dimana anda menyimpan semua files dan data Kebiasaannya ramai yang menggunakan HostGator (luar negara) atau Net KL (dalam negeri) Kali ini saya bongkarkan rahsia untuk dapatkan FREE Hosting Anda harus pergi ke 1freehosting Ini adalah FREE/PERCUMA dan anda akan mendapat 10GB Space dan 100GB Bandwidth Klik pada Get Free Hosting dan daftar<br />
<br />
[+] Selepas mendaftar anda akan diminta untuk membuka email yang anda daftar dan verify [+] Anda akan nampak notis seperti di bawah:<br />
<br />
[+] Seterusnya anda harus membuka email anda dan semak email yang diterima daripada 1freehosting [+] Cari email daripada 1freehosting dan klik pada link verify untuk meneruskan pendaftaran anda tadi<br />
<br />
[+] [+] [+] [+] [+] [+] [+]<br />
<br />
Seterusnya anda akan dibawa ke page registration 1freehosting seperti di bawah Pastikan anda pilih I will choose your free sub-domain Isikan nama pilihan sub-Domain anda contohnya www.fanpagetab.hostingsiteforfree.com Pilih 1FreeHosting untuk hosting plan Isikan ruangan Password dan Password Again Isikan ruangan Enter words from picture Setelah isi semua klik pada Create<br />
<br />
[+] [+] [+] [+]<br />
<br />
Setelah berjaya account anda akan diaktifkan Anda akan nampak paparan seperti dibawah dan jika tiada anda hanya perlu klik Refresh Tahniah! sekarang anda sudah mempunya Hosting Percuma dengan 10GB Space dan 100 GB Bandwidth Klik pada Switch untuk membuka Account Hosting yang telah anda dapatkan secara Percuma tadi<br />
<br />
[+] Anda akan dibawa ke Hosting Panel 1freehosting seperti gambar di bawah [+] Apa yang menarik ialah hosting ini bukan sahaja boleh menyimpan file/data facebook anda tetapi anda juga ada Website Builder [+] Ini bermakna ada boleh membuat website menggunakan website builder yang disediakan [+] Ok seterusnya kita klik pada File Manager 1<br />
<br />
[+] Anda akan di bawa ke page seperti di bawah [+] Anda hanya perlu klik pada Public HTML dan anda akan masuk ke directory anda [+] Sekarang kita klik pada New Dir dibahagian kiri sekali [+] Kenapa perlu create New Directory? Ini supaya mudah sebab anda boleh simpan file untuk Fanpage Tab lain tanpa perlu keliru<br />
<br />
[+] Pilih nama directory anda contohnya Fanpagetab [+] Klik pada button tick berwarna hijau<br />
<br />
[+] Tahniah! Sekarang folder anda telah berjaya di 'create' [+] Sekarang klik dan masuk ke dalam folder/directory yang baru create tadi<br />
<br />
[+] [+] [+] [+]<br />
<br />
Sekarang tiba masanya untuk kita upload files untuk iframe ke facebook Ingat lagi file yang anda dapat dari Tutorial Part 2 dalam bentuk .zip Itulah file yang kita akan upload masuk dan jika anda ada file sendiri anda hanya perlu .zip kan sahaja Klik pada button Browse dan cari lokasi file anda<br />
<br />
[+] Jika file anda telah berjaya diupload anda akan lihat seperti paparan di bawah<br />
<br />
[+] [+] [+] [+] [+] [+]<br />
<br />
Tahniah! Anda telah berjaya meng'upload'kan file yang diperlukan untuk iFrame Facebook Fanpage Sekarang anda hanya perlu unzip file tersebut dengan tekan button unzip di atas kanan Seterusnya pastikan anda ingat akan link lokasi File Tutorial_TabMenu.html anda di dalam Hosting Contohnya w w w.fanpage.hostingsiteforfree.c o m/fanpagetab/Tutorial_TabMenu.html (contoh sahaja) Link ini harus tepat dan betul kerana ia penting apabila nak iFrame ke Facebook nanti Jika link ini salah maka ia tidak akan muncul di Fanpage anda<br />
<br />
[+] [+] [+] [+] [+] [+]<br />
<br />
Step seterusnya pastikan anda sudah mempunyai Fanpage Jika tiada Fanpage anda perlu lihat Tutorial Part 1 Di sini kita akan belajar nak create Apps untuk iFrame ke Fanpage kita Pergi ke https://developers.facebook.com/ Klik pada Apps bahagian atas (dalam petak merah tu) Dan selepas itu klik pada Create New Apps<br />
<br />
[+] Apabila anda Create New Apps anda akan nampak pop-up seperti di bawah [+] Anda akan diminta untuk mengisi App Display Name dan App Namespace<br />
<br />
[+] [+] [+] [+]<br />
<br />
Contohnya App Display Name letak Contoh Fanpage Tab Contohnya App Namespace letak contohfanpagetab (tanpa jarak) Kemudian klik pada I agree to the Facebook Platform Policies. Dan klik pada Continue<br />
<br />
[+] Anda akan nampak page seperti di bawah [+] Pastikan anda ingat akan nombor App ID anda kerana ia penting nanti untuk iFrame [+] Sekarang anda hanya perlu klik pada edit icon untuk dapatkan favicon fanpage sendiri<br />
<br />
[+] Contoh favicon fanpage adalah seperti di bawah [+] Anda boleh lihat di bawah profile picture fanpage anda<br />
<br />
[+] Kemudian scroll mouse anda ke bawah sedikit dan klik pada Page Tab [+] Isikan maklumat di dalam Page Tab ini dan ini adalah penting kerana ia akan link ke fanpage anda [+] Antaranya Page Tab Name contohnya anda boleh letak Welcome atau Selamat Datang [+] Page Tab URL pula adalah lokasi file Tutorial_TabMenu.html anda [+] Secure Page Tab URL pula letakkan link yang sama tetapi cuma tambah https diawalannya *kalau ikutkan hosting anda perlu ada SSL cert dan jika tiada boleh dapat FREE di Social-Server.com [+] Kemudian klik pada Save Changes<br />
<br />
[+] [+] [+] [+]<br />
<br />
Sekarang tibalah masa untuk iFrame hasil kerja anda ke Fanpage anda Taip dan pergi ke URL ini http://www.facebook.com/add.php?api_key=YOURAPPID&pages Tetapi PASTIKAN anda tukar YOURAPPID kepada App ID anda sendiri Anda akan nampak pop-up seperti di bawah dan hanya perlu pilih Fanpage anda (jika ada banyak)<br />
<br />
[+] Jika anda ada satu sahaja Fanpage anda boleh terus klik pada Add button<br />
<br />
TAHNIAH! Sekarang anda boleh pergi ke Fanpage anda dan lihatlah hasilnya.<br />
<br /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://adoc.pub/report/apa-itu-facebook-apa-itu-fanpage-facebook-apakah-model-pembe" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "Apa itu Facebook? Apa itu Fanpage Facebook? Apakah Model pembelajaran yang kita akan belajar di sini?"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2024 ADOC.PUB. All rights reserved.
<div class="pull-right">
<span><a href="https://adoc.pub/about">About Us</a></span> |
<span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> |
<span><a href="https://adoc.pub/term">Terms of Service</a></span> |
<span><a href="https://adoc.pub/copyright">Copyright</a></span> |
<span><a href="https://adoc.pub/contact">Contact Us</a></span> |
<span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://adoc.pub/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177279549-1');
</script>
<script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://adoc.pub/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function( event, ui ) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_ADOCPUB_cookie_box() {
document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/";
hide_ADOCPUB_cookie_box();
}
function hide_ADOCPUB_cookie_box() {
var cb = document.getElementById('ADOCPUB_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var ADOCPUB_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('ADOCPUB_cookie_box_viewed');
if (ADOCPUB_cookie_box_viewed) {
hide_ADOCPUB_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
