Wednesday, May 5, 2010

Ganti Shoutbox Kalian Dengan Google Friend Connect Comments

Saya lihat, banyak sekali Blogger yg masih menggunakan Shoutbox dalam memanjakan visitornya untuk dapat meninggalkan pesan atau apapun yg mereka mau. Tapi sayangnya, banyak juga visitor yg nakal yg justru memanfaatkan Shoutbox tersebut sebagai ladang untuk menebar Spam atau mempromosikan URL blognya semata. Kita semua tahu bahwa Spam itu terkadang sangat menjengkelkan. Sudah dihapus, ada lagi, ada lagi.
Nah... buat kalian para admin blog yg mungkin mengalami hal serupa dan ingin mengganti Shoutboxnya dengan media interaksi yg lain, berikut ini saya coba memberikan satu alternatif yg tidak begitu jauh berbeda dengan shoutbox-shoutbox pada umumnya.

Adalah Google Friend Connect Comments, sebuah media untuk berinteraksi, yg masih berkonsepkan sama dengan Shoutbox. Siapapun bisa meninggalkan pesannya disini asal memiliki akun Google. (buat yg belum punya silakan daftar dulu disini)
Dan buat admin atau tuan rumah, bisa juga membalas pesan para visitornya dengan menekan tombol reply. Tersedia juga fungsi tambahan yg ada pada sistem komen ini yaitu, kita diijinkan menyertakan tautan video di dalam komen. Dan satu lagi, kita juga bisa men-translate komen ke dalam bahasa yg kita mau. Mungkin inilah yg membuat Gadget komen ini menjadi unik dan lain daripada yg lain. Kalaupun kita tidak suka dengan salah satu komen, kita juga bisa membuangnya dengan menekan tombol delete.

Untuk memasang Gadget ini di halaman blog, kita harus melakukannya dengan dua tahap.

Tahap 1
Pertama-tama, login dulu ke Google Friend Connect lalu ceklik Gadgets dan pilih Comments
Ikuti langkah-langkah berikut :

1. Option.
- Scope:
tentukan apa yg boleh dikomentari pengunjung. Seluruh situs, konten pada satu halaman tertentu atau unsur spesifik/ID.
"ID" disini hanya mengidentifikasi komentar yg terkait dengan unsur tertentu (produk, lagu, klip video, dsb). ID ini juga tidak dianggab memiliki arti apapun di tempat lain di HTML.
- Start with this text in the comments area: _ _ _ _ _ _ _ _ _ _
contoh, ---tinggalkan pesan kalian disini---
- Comments header: _ _ _ _ _ _ _ _ _ _
- izinkan pengunjung mengeposkan tautan YouTube? Ya/Tidak
- izinkan pengeposan anonim? Ya/Tidak

2. Choose the Gadget size.
Kita dapat memilih ukuran gadget ini. Setel Width: (dalam piksel) dan Number of posts to show: sehingga gadget tersebut sesuai dengan halaman blog kita.
- Expand and contract: _ _ _ _ _ _ _ _ _ _

3. Choose colors.
Pilih serangkaian warna agar gadget komen ini sesuai dengan warna blog.
Warna yg perlu disesuaikan antara lain,
- latar belakang endcap
- teks endcap
- tautan endcap
- batas
- kepala berita konten
- latar belakang konten
- latar belakang alternatif
- teks konten
- teks sekunder konten
- tautan konten
- tautan sekunder konten.

4. Create the HTML code.
Ceklik tombol 'Generate code' untuk memunculkan beberapa baris kode HTML Gadget yg baru saja kita buat.
Contoh kode HTML yg diberikan kira-kira seperti ini,
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1476985317156200685" style="width:282px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['DEFAULT_COMMENT_TEXT'] = '- add your comment here -';
skin['HEADER_TEXT'] = 'Comments';
skin['POSTS_PER_PAGE'] = '5';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderWallGadget(
{ id: 'div-1476985317156200685',
site: '11989357825267385820',
'view-params':{"disableMinMax":"true","scope":"SITE","features":"video,comment","startMaximized":"true"}
},
skin);
</script>

Copy seluruh kode HTML tersebut dan untuk sementara titipkan dulu di Notepad.

Langkah 2
Login ke Blogger dan di halaman dashboard, ceklik Layout. Tambahkan Gadget di sidebar, pilih HTML dan JavaScript.
Ambil kembali kode yg dititipkan tadi dan pastekan disini lalu SIMPAN.

Lihat hasilnya di halaman blog dan cobalah untuk meninggalkan pesan. Buat kalian yg penasaran tapi belum sempat memasang, silakan mencoba dulu disini.
Bagus bukan? Photo profil google kalian ikut terpasang.

Comments :

33 comments to “Ganti Shoutbox Kalian Dengan Google Friend Connect Comments”

matur nuwun...tutorialnya kang...boleh nih..ntar di pasang...di template enggal...

Fajar said...
on 

bisa ikut narsis....hehe...
yg bisa nulis cuma yg punya account google jadinya ya? dan ketika nulis pesan harus login....boleh juga....

narti said...
on 

wah makasih yaw trik nya
next time dicoba ahhh
:D

darahbiroe said...
on 

makasih yaw
tutorialnya
bolehkan dicoba
hehheh
"d

antok said...
on 

Saya ingin pasang ini, Pak. Tapi bingung mau diletakkan dimana.

eka said...
on 

Pilihan yang bagus! Akan kami coba! Tapi bagaimana dengan link mereka yang sudah tertanam di shoutbox, kasian kalau dihilangkan!

aura keyboard said...
on 

Ehm..begitu ya mas. Terima kasih infonya,sangat bermanfaat

ajeng said...
on 

wah...yang kek beginian yang saya suka :D ijin copas ya sobat.
matur nuwun infonya.


salam adme ayem

andipeace said...
on 

memang lebih bagus dan rapi kelihatan ya kang

Munir Ardi said...
on 

oke juga ni mas.
saya malah baru tau ada yang kayak beginian dr Google :D

Zippy said...
on 

kayaknya akan lebih menarik mengunakan Ini,ketimbang Shouth Box atau yang lainnya. numpang Ctrl + D dulu ya..thnks tas Inponya

oding said...
on 

assalamualaikum..
nah, tutorial yang menarik kang.
sy blm punya shoutmix bahkan google friend connect comment,
tar mau nyoba kang

Neng Rara said...
on 

boleh dicoba nih....
jadi serba google

rizal said...
on 

info yang bermanfaat, tq kang :)

Aulawi Ahmad said...
on 

Mantap mas Sugeng tutorialnya kpn2 klo lg ingin edit2 akan segera dicoba,makasih infonya sangat bermanfaat nich untuk menghindari spam...:D

infophone-kdr said...
on 

Thanks infonya mas Sugeng dan kpn2 klo ingin edit2 langsung dicoba...:D

infophone-kdr said...
on 

makasiiiy...infonya...^_^

Tour, Food, and Health said...
on 

saya baru tahu google ada shoutboxnya...
Sayangnya wordpress kagak bisa dipasang beginian ya kang :)

azzaam said...
on 

Makasih tutorialnya kang...nanti akan saya coba..

Sudino Dinoe said...
on 

mantab
trims tuk artikelnya
salam hangat dari blue

bluethunderheart said...
on 

mantab
trims tuk artikelnya
salam hangat dari blue.........

bluethunderheart said...
on 

ok deh, tks tipsnya

Sang Cerpenis bercerita said...
on 

infonya bagus niy..mengena..tapi sejauh ini tamu saya masih dalam kendali yang bagus, kalo mule nakal-nakal memang perlu treatment ini niy..

salam,
tfd

Tour, Food, and Health said...
on 

kalo gak ada akun gmail... agak susah tuh

Komputer Tips- soul said...
on 

wah, ide bagus. untung shoutmix saya belom pernah ada yg isengin.. hehe

Meutia Halida Khairani said...
on 

cbox dulu aja...

Komputer Tips- soul said...
on 

setuju mas. ane AANTI SPAM!!

C. A. R. L. said...
on 

Thanks atas info'a

aditmaru said...
on 

menarik juga nih... coba aaah. thank infonya

Ramdhan said...
on 

thanks gan, its working o mu blogspot. orang yang bagi ilmu, tidak pernah serat dalam menerima rejeki.

Toko-Hoki said...
on 

mantaaaaaap

adijanta said...
on 

Jadi tambah ilmu nih.
Terima kasih

Abu Farras said...
on 

mantap mass...

obat tradisional asam urat said...
on 

Post a Comment

[ Full Page Comment Form ]

Please leave your comment after reading. If you don't have a google account, you can comment with name / URL.
URL column is optional.

Don't include links in your comment !!!