Membuat Custom Facebook Share Button dengan AS3

Membuat Custom Facebook Share Button dengan AS3

Tutorial Information

ProgramAdobe Flash
VersionCreative Suite (CS)
DifficultyStandar
Estimated Time20 - 30 Menit
DownloadClick this link

Kurang lengkap rasanya jika saat ini sebuah website ataupun game online tidak terdapat fitur untuk berbagi tentang info hasil website ataupun game online yang kita…

Kurang lengkap rasanya jika saat ini sebuah website ataupun game online tidak terdapat fitur untuk berbagi tentang info hasil website ataupun game online yang kita mainkan. Fitur ini juga berguna sebagai salah satu media untuk mempromosikan website ataupun game online yang kita buat. Sebagai contoh, jika pada akhir permainan yang menggunakan sistem scoring ataupun memberikan badge (penghargaan) bagi user, maka akan lebih memberikan kesan ataupun dapat memberikan kebanggaan tersendiri jika orang lain dapat mengetahui apa yang telah dicapai oleh user pada permainan yang dimainkan user tersebut.

Tanpa berpanjang lebar lagi mari kita buat Costum Facebook Share Button menggunakan ActionScript 3.0. Ikuti langkah-langkah berikut ini:

Memilih ActionScript 3.0

Start up panel

Pilih ActionScript 3.0

Pastikan Anda memiliki Flash IDE yang support ActionScript 3.0. (Versi Flash IDE yang support mulai Flash CS3 – Flash CS6). Kemudian buka Adobe Flash dan pilih ActionScript 3.0 pada panel Startup.

Buat Symbol Button

Symbol Button

Symbol Bertipe Button

Buat newsymbol bertipe Button pada stage.

Beri Nama pada Button

instance name

Ubah instance name

Berikan instance name pada button tersebut dengan namaFacebookShare_button. *instance name bisa sesuai selera

Buat Document Class

Buat Document Class dengan nama classFacebookCostumShare. *nama class bisa sesuai selera

1.	package  
2.	{
3.	import flash.display.MovieClip;
4.	import flash.events.MouseEvent;
5.	import flash.external.ExternalInterface;

6.	public class FacebookCustomShare extends MovieClip 
7.	{

8.	// inisialisasi variabel
9.	private var judul:String;
10.	private var url:String;
11.	private var isi:String;
12.	private var gambar:String;

13.	public function FacebookCustomShare()
14.	{
15.	// registrasi event CLICK untuk tombol FacebookShare_button
16.	FacebookShare_button.addEventListener(MouseEvent.CLICK, onButtonClicked);
17.	}// end constructor

18.	/*
19.	** Function yang dipanggil ketika tombol FacebookShare_button diklik
20.	*/
21.	private function onButtonClicked(event:MouseEvent):void
22.	{
23.	judul = "Judul";
24.	isi = "Isi/SUmmary";
25.	gambar = "image url";
26.	url = "url web yang akan di share";
27.	// memanggil fungsi shareToFacebook pada javascript
28.	ExternalInterface.call("shareToFacebook", escape(judul), escape(isi), escape(url), escape(gambar));
29.	}// end onButtonClicked Function

30.	}// end class

31.	}// end package
[ActionScript]
ExternalInterface.call("shareToFacebook", escape(judul), escape(isi), escape(url), escape(gambar));

ExternalInterface class memungkinkan kita untuk melakukan komunikasi antara ActionScript dan SWF Container, sebagai contoh dalam tutorial ini ActionScript berkomunikasi dengan Javascript yang terdapat pada file HTML yang berperan sebagai SWF Container. http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html

Adapun parameter yang dibutuhkan dalam menggunakan ExternalInterface.call yaitu Nama Fungsi dan parameter-parameter yang terdapat pada fungsi yang dipanggil.

Semua parameter sebelum dikirim ke javascript di-encode menggunakan fungsi escape() agar menjadi format URL-Encoded. http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/package.html#escape()

Publish File

Publish HTML

Publish File

Kemudian publish untuk menghasilkan file html.

Menambahkan JavaScript

Selanjutnya tambahkan javascript pada tag <head></head>.

<script type="text/javascript">

function shareToFacebook(judul, isi, url, gambar)

{

var facebook = 'http://www.facebook.com/sharer.php?s=100&p[title]='+judul+'&p[summary]='+isi+'&p[url]='+url+'&p[images][0]='+gambar;

window.open(facebook, 'sharer', 'toolbar=0, status=0, width=550, height=325');

}

</script>

Ubah Parameter

Ubah nilai parameter allowScriptAccess menjadi always.

<param name="allowScriptAccess" value="always" />

Buka file index.html pada browser, kemudian klik tombol share to facebook yang telah Anda buat.

Tampilan pada browser

Tampilan pada browser

Hasil Pop Up Window Share Link to Facebook.

Hasil Pop Up Window Share Link to Facebook.

Wala! This is it, Facebook Costum Share Using ActionScript 3.0 ala BisaKomputer.com :p. Selamat mencoba.

Tag: , , , ,

2 Comments

Leave Comment
  1. edwin says:

    kalau mau buat untuk di file swf nya gimana ya? thx

  2. Edho says:

    Hai Mas,

    Kebetulan saya sedang mencari fitur share to sosmed. Saya sudah download link yang tersedia tetapi ketika saya buka di browser dan mengklik fb button kenapa tidak ada respon apa2 ya? Apa harus ada yg diubah dlu?

    Thanks..

Write Comment

Your email will not be published. The marked label is required.