引用 Perr Tang / 直接分享網頁內容到Facebook/Plurk/Twitter
現在有很多網站可以直接將網頁的摘要與網址分享到Facebook或Plurk、Twitter等微網誌上，
雖然乍看之下是很方便的事情，但這樣的分享常常不見得會讓網友「買單」、真的去分享到他的微網誌上。
然而，有的客戶還是會希望能提供這樣的「貼心功能」；於是，我們還是得「乖乖聽話」，
畢竟付錢的是老大，還是加上了這個功能。
我們可以運用「呼叫外部javascript」的方法，將javascript程式碼寫到一個外部檔案中，
例如一個名字是「shareWithFriends.js」的javascript，它全部的內容可能只寫成這樣子：
<!--
function Facebook() {
void(window.open('http://www.facebook.com/share.php?u='.concat(encodeURIComponent(location.href)) ));
}
function Plurk() {
void(window.open('http://www.plurk.com/?qualifier=shares&status=' .concat(encodeURIComponent(location.href)) .concat(' ') .concat('(') .concat(encodeURIComponent(document.title)) .concat(')')));
}
function Twitter() {
void(window.open('http://twitter.com/home/?status=' .concat(encodeURIComponent(document.title)) .concat(' ') .concat(encodeURIComponent(location.href))));
}
//-->
未來，我們只要把這個javascript存在網站的某個特定位置，就可以讓它一直被重覆使用，
非常方便！畢竟這支javascript都在做同樣的事情：「把你看的網頁網址存成一個字串，
然後再送給Facebook/Plurk/Twitter讓它們為你發佈新的微網誌。」換言之，
我們會在特定的按鈕上呼叫javascript功能來自動抓取目前網頁的標題等內容，
並發佈成一篇新的微網誌文章。
我們若要呼叫上面的javascript，得先在目前的網頁的<head>底下加入的網頁程式碼：
<script type="text/javascript" src="shareWithFriends.js"></script>
假如我們是使用Flash來呼叫的話，在Actionscript 3.0的前提下，
可以用ExternalInterface.call的方法來達成；假設有三個對應於Facebook、Plurk、Twitter的Flash按鈕，
應該要在時間軸上加入以下的Actionscript 3.0程式碼：
import flash.external.ExternalInterface;
//Facebook Button Setup
Facebook_btn.addEventListener(MouseEvent.CLICK, clickFacebook);
function clickFacebook(e:MouseEvent):void {
ExternalInterface.call("Facebook");
}
//Plurk Button Setup
Plurk_btn.addEventListener(MouseEvent.CLICK, clickPlurk);
function clickPlurk(e:MouseEvent):void {
ExternalInterface.call("Plurk");
}
//Twitter Button Setup
Twitter_btn.addEventListener(MouseEvent.CLICK, clickTwitter);
function clickTwitter(e:MouseEvent):void {
ExternalInterface.call("Twitter");
}
要用Actionscript 2.0的getURL功能也沒問題，程式碼如下：
//Facebook
Facebook_btn.onRelease = function () {
getURL("javascript:Facebook(); void(0);");
}
//Plurk
Plurk_btn.onRelease = function () {
getURL("javascript:Plurk(); void(0);");
}
//Twitter
Twitter_btn.onRelease = function () {
getURL("javascript:Twitter(); void(0);");
}
除此之外，Plurk和Twitter會在分享的時候，會自動將網頁的標題文字當成分享的連結字，例如：
<title>Perr的分享</title>，網頁的標題就是「Perr的分享」，而「Perr的分享」
就會變在Plurk與Twitter自動的貼上的文章標題。
其中，Facebook和Plurk、Twitter有些不一樣的地方！
因為Facebook原本就有提供公開分享的功能，只要按照它的格式即可：
http://www.facebook.com/sharer.php?u=要分享的網址&t=內容標題
但有趣的是，這方法似乎有些問題！因為Facebook沒有按照我給它的「內容標題」去貼出訊息，
而是用連結到的「網頁標題(title)」來當作它的「文章標題」！
怎麼辦呢？
只要增加幾個meta資料在<head>之後就可以了，例如：
<meta name="title" content="Perr的分享" />
<meta name="description" content="直接分享網頁內容到Facebook/Plurk/Twitter" />
如此一來，Facebook會將「Perr的分享」當成新的文章標題，同時也把description的內容，
也就是「直接分享網頁內容到Facebook/Plurk/Twitter」，當成新的文章內容了！
如果要提供網友的一些網站相關圖片的話，也可以在剛才上面的那段網頁程式碼後面再加上底下這段程式碼：
<link rel="image_src" href="網頁的相關縮圖網址" />
當然，縮圖並不限定只能放一個，所以我們也可以同時放置好幾個縮圖，讓網友可以「先睹為快」！
請先 登入 以發表留言。