星期四, 2月 11, 2010

直接分享網頁內容到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="網頁的相關縮圖網址" />

當然,縮圖並不限定只能放一個,所以我們也可以同時放置好幾個縮圖,讓網友可以「先睹為快」!

17 則留言:

cat 提到...

謝謝您~
因為您的文章,終於解決我的問題:)
非常感謝^^

Unknown 提到...

哇哇哇!!好感謝你唷^^
我終於會了:D

Canon CHOW 提到...

程式我寫好了, 請問在特定的按鈕上呼叫javascript功能呢, 我不會如何寫.....請指教

perr 提到...

以呼叫Facebook()這個預先設定好的javascript功能名稱來說,如果AS3可以用「ExternalInterface.call("Facebook");」,AS2可以用「getURL("javascript:Facebook(); void(0);");」。

Canon CHOW 提到...

感謝你哦^^

CaGe Wei 天井創意 - 烤橘色 提到...

謝謝你的分享,這解決了我無法發佈中文的問題,只是再IE 及 Safari 會有彈跳視窗的網頁錯誤...目前還不知道如何解決..

匿名 提到...

感謝您的教學^^

我是用Actionscript 2.0來製作的,但發佈後卻出現:

在運算符號 '=' 後必須接著運算元 getURL("javascript:Facebook(); void(0);");

遭遇未預期的 '}'


請問問題出在哪?麻煩您撥冗指教


謝謝!

IRIS 提到...

你好,感謝您的分享。
我有照著你的方式做,我是用AS3.0不過在flash裡面我貼上下面的語法
Plurk_btn.addEventListener(MouseEvent.CLICK, clickPlurk);
function clickPlurk(e:MouseEvent):void {
 ExternalInterface.call("Plurk");
}

發布時出現ExternalInterface.call("Plurk")語法錯誤
請問這該怎麼解決呢?麻煩你了

perr 提到...

如果妳有先把javascript的功能都設定好,Flash就可以呼叫得到!妳是否有使用瀏覽器來進行測試?

匿名 提到...

請問如果要從outlook做分享該怎麼做

perr 提到...

說實話,我從來沒想過要從Outlook做分享!因為我在公司用Outlook,家裡才用Gmail…但是想想:假設真的可以在你的Outlook按下「分享」!你是要把整封郵件寄到FB成為新的郵件訊息?還是讓別人可以直接連到你私人的Outlook信箱中看這封有趣的信件?這多少涉及了安全性的問題,所以才沒人這麼做…

藍瓶文創 提到...

您好~請問
網頁發佈之後 縮圖的部分變成隨機取了首頁上的三張圖片而不是我指定的縮圖
該如何解決呢? 謝謝您

Unknown 提到...

Facebook_btn.onRelease = function () {
 getURL("javascript:Facebook(); void(0);");
}
這個部份我有點不懂,是在按鈕裡加嗎?但會一直跳出錯誤訊息,不好意思我是那邊用錯了

perr 提到...

請在按鈕出現的時間點,將程式碼加在時間軸上 :)

Unknown 提到...

謝謝您,原來是要把as放在影格上,但我照你說的as2的語法貼,flash會說
字行2在運算符號'='後必順接著運算元
字行3 遭遇未預期的'}'
請問是什麼問題捏

Unknown 提到...

您好:這個部份我已用出來,但有參考一下http://keitaroas.blogspot.tw/2011/05/flashfacebook.html,他這個出處也是你的
我想詢問一下我希望他連到臉書的視窗可以指定大小,我有爬文一下,我在你後面的語法加入了
function Facebook() {
 void(window.open('http://www.facebook.com/share.php?u='.concat(encodeURIComponent(location.href)),'scrollbars=yes,resizable=yes,width=600,height=400'));
}
可是視窗還是無法變成600*400,請問一下那邊有出錯嗎

銓尹行銷顧問有限公司 提到...

版主您好我已經按照您提供的方式處理過但一直無法只分享頁面內容的資料 ps:body我只要分享標籤內的資料跟圖片就好/body

能請您協助排除這問題嗎? 我是靜態頁面

參考頁面網址於下 ps:非廣告請勿誤會

http://www.pctop.com.tw/q&a_modify-fb.html

敬請協助 感恩您!!!!!