2013年6月12日 星期三

[note] JavaScript 使用FB API 發佈文章至塗鴉牆

首先先建立好開發者的APP 申請。

申請流程網路上已有很多教學。在此不在多述。

教學點我(轉載)

建立好APP開發者之後,我們可以取得APP ID,

使得可以用APP ID 拿來做我們的發佈程式。



首先我們要使用的是Facebook JavaScript SDK

裡面所提供的FB.ui

官方說明 : 說明點我

裡面有所有的函式說明及宣告 ,定義等。

接下來做完準備之後,即可以來使用做一個簡單的發佈程式。

<STEP.1>
必須先引入Facebook的API 在 <head> 標籤裡面加入script

<script src="http://connect.facebook.net/zh_TW/all.js"></script>

並且在<body></body>標籤裡面加入需宣告使用 <div id="fb-root"></div>
<STEP.2>
接著加入javascript 必須先初始化facebook 應用程式以及要使用的APP
<script type= 'text/javascript'>
FB.init({ appId: '你所申請的APP ID',
    status: true,
    cookie: true,
    xfbml: true,
    oauth: true
});
</script>

<STEP.3>
加入使用FB.UI  塗鴉牆程式
<script type= 'text/javascript'>
function push(){

  FB.ui(
    {
      method: 'stream.publish',
      attachment: {
        name: 'WWW-HW6-FB-TEST',
        message:'test',
        caption: 'Facebook publish via JavaScript SDK',
        description: ('TEST ! Facebook JavaScript SDK'),
        href: 'http://www.everytrail.com/',
        media: [{
        type: 'image',
        src: 'http://images.everytrail.com/pics/fullsize/2512059-CIMG5237.JPG',
        href: 'http://www.google.com'}]
      },
      action_links: [
        { text: 'google', href: 'http://www.google.com' }
      ]
    }
  );
}
</script>


<STRP.4>
做一個簡單的按鈕來使我們可以啟動這個程式
<input type="button" value="按我發佈" onclick="push()" />

結果如圖下:
1)

2)
3)


沒有留言:

張貼留言