Instalasi Comments dan Page Plugin

      No Comments on Instalasi Comments dan Page Plugin

Untuk meningkatkan interaksi pengguna dengan blog perlu disediakan fitur ruang khusus untuk pengguna, bisa semacam forum, shoutbox ataupun ruang komentar. Interaksi pengguna (siswa) dengan administrator (guru) dapat dengan mudah dibuat menggunakan fitur Comments Plugin Facebook (https://developers.facebook.com/docs/plugins/comments/) dan Page Plugin Facebook (https://developers.facebook.com/docs/plugins/page-plugin). Berikut ini dijelaskan langkah-langkah instalasi kedua plugin itu secara ringkas.

Instalasi Comments Plugin

1. Masuk ke akun Facebook

2. Masuk ke Comments Plugin di https://developers.facebook.com/docs/plugins/comments/

3. Scroll ke bawah pada teks Comments Plugin Code Generator

4. Masukkan alamat halaman blog yang akan diberi Comments Plugin ini, misal http://contoh.blogchem.com/materi/, masukkan ke bawah isian URL to comment on.

5. Isi Width sesuai keperluan, bisa menggunakan harga tertentu, misal 200px atau harga persentase (%).

6. Isi Number of Posts dengan jumlah komentar yang akan ditampakkan, supaya tidak menghabiskan ruang blog sebaiknya tidak terlalu banyak, cukup 3, 4 atau 5.

7. Atur Urutan berdasarkan: Teratas, Terbaru atau Paling Lama

8. Setelah terisi semua maka akan muncul priview Comments Plugin seperti berikut:

commentplugin

9. Klik button biru bertuliskan Get Code untuk mendapatkan kode programnya. Sebagai contoh didapat kode berikut

Kode 1:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.5&appId=852728711455690";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Kode pertama ini harus disisipkan di bagian file header.php persis setelah <body> pembuka. File header.php ini terletak di dalam folder wp-content > themes > aldehyde (nama tema-nya).

Caranya:

    • jalankan notepad++,
    • masuk ke subdomain, misal ke http://contoh.blogchem.com, seperti yang sudah dipraktekkan.
    • masuk ke folder wp-content > themes > aldehyde (nama tema-nya).
    • klik dobel pada file header.php sehingga akan dimunculkan di bagian sebelah kiri. kode-1
  • Klik button Save sehingga akan tersimpan di ruang hosting secara otomatis.

Kode 2:

<div class="fb-comments" data-href="http://contoh.blogchem.com/materi/" data-width="100%" data-numposts="5" data-order-by="reverse_time"></div>

Tempatkan kode 2 ini di bagian mana saja yang ingin kita munculkan. Misal di halaman materi, bukalah halaman materi yang ada di blog kita dalam format HTML (Teks), lalu tempelkan kode 2 di atas pada posisi yang kita inginkan.

Klik Publish, setelah tersimpan coba jalankan atau buka halaman itu di browser.

Lihat hasilnya seperti berikut:

commentmateri

Membuat Halaman Facebook

1. Masuk ke akun Facebook

2. Masuk ke Buat Halaman (Create Page) di https://www.facebook.com/pages/create/?ref_type=bookmark untuk membuat halaman Facebook baru.

3. Pilih Perusahaan, Organisasi atau Institusi.

4. Pilih Kategori, misal Pendidikan, lalau beri Nama Perusahaan, misal “Kasmui BlogChem”, klik button biru “Memulai“.

5. Jika perlu isi “Beri penjelasan tentang apa halaman anda”

6. Isi situs web, misal “http://kasmui.blogchem.com”, lalu klik “Simpan Info” atau Lewati saja.

7. Unggah Foto Profil dengan memilih “Unggah dari Komputer” atau “Impor dari Situs Web”

8. Setelah foto muncul klik button Selanjutnya.

9. Klik Tambahkan ke Favorit atau Lewati, lalu klik button Selanjutnya.

10. Selanjutnya masuk ke halaman Pemirsa Halaman Pilihan, boleh diisi atau Lewati.

11. Misal klik Lewati (bisa diisi nanti),

12. Sudah jadi halaman Facebook tinggal menambahkan foto sampul dengan klik button “Tambahkan Sampul“.

 

Instalasi Page Plugin

Setelah membuat  halaman Facebook langkah selanjutnya adalah membuat plugin halaman (Page Plugin) itu supaya dapat diletakkan di Website.

Langkah-langkahnya sebagai berikut:

1. Masuk ke akun Facebook

2. Masuk ke Page Plugin di https://developers.facebook.com/docs/plugins/page-plugin

3. Scroll sedikit ke bawah yang ada tulisan Facebook Page URL.

4. Isi input di bawahnya dengan alamat halaman Facebook yang baru dibuat, misal tadi adalah https://www.facebook.com/Kasmui-BlogChem-466863240182923/,

5. Atur Widtth dan Height, misal Width = 100%, Height = 400

6. Centang 

7. Akan muncul tampilan plugin halaman Facebook yang baru dimasukkan alamatnya

pageplugin

8. Klik button biru bertuliskan Get Code.

9. Muncul kode scrip plugin yang harus ditempelkan, kode skrip pertama sudah dilakukan ketika membuat Comments Plugin di atas, jadi tidak usah dilakukan, sedangkan kode skrip 2 harus ditempelkan di tempat di mana kita inginkan untuk menampilkannya, biasanya di sidebar sebagai widget.

10. Blok dan Copy kode skrip 2

11. Buka dashboard WordPress, lalu pilih menu Appearance > Widgets

12. Pilih atau klik widget  Text (Arbitrary text or HTML)

13. Pilih atau centang Sidebar, lalu klik Add Widget,

14. Isi Title, misal Facpage Facebook, lalu Paste (tempelkan) kode skrip 2 ke bagian Content

15. Klik Save untuk menyimpan dan Close.

16. Geser widget ini ke bagian paling atas dari sidebar agar mudah dilihat pengguna

17. Selesai, tinggal menghubungkan blog dengan plugin halaman ini menggunakan plugin Jetpack yang otomatis akan memasang widget Facebook Page Plugin.

18. Silahkan install plugin Jetpack melalui menu Plugins > Add New, ketik di bagian search dengan teks Jetpack, Install dan Activate.

19. Masuk ke Dashboard > Appearance > widget, pilih Facebook Page Plugin (Jetpack) dan tempatkan pada posisi widget yang diinginkan. Lihat gambar berikut:

dashboard-jetpack-facebook

20. Isi Title, misal Fanpage Kasmui.com, isi pula Facebook Page URL, contoh: https://www.facebook.com/kasmuicom/, sebagaimana alamat halaman yang sudah dibuat di atas.

21. Centang Show Faces dan Show Cover Photo dan klik button SAVE

 

Leave a Reply

Your email address will not be published. Required fields are marked *