Google Friend Connect Social Bar 可置於部落格最上方的社交工具列

gfcbar-01

Google Friend Connect」是Google開發的一個社交網路平台,這個平台不是像Facebook或Twitter、Plurk那樣固定在某一個特定網頁當中,Google Friend Connect(簡稱GFC)是散佈式的系統,它提供了安裝元件與開發平台,然後每個部落格、網站站長可以將GFC元件裝進自己的網站裡面,如此一來就讓自己的部落格添加了社交、社群互動功能,並且也將自己的網站納入整個散佈的GFC網路系統中與其他網站或用戶連結

電腦玩物之前曾經寫過幾篇文章介紹GFC,「Google Friend Connect 帶你進入巨型網路社交圈,歡迎大家來試玩」裡我介紹了GFC安裝到部落格後所呈現的樣子與可以發揮的功能,在「Google Friend Connect 社交前別忘了完善你的 Google Profiles」中我補充了要讓GFC有更多社群互動所應該完備的一些準備工作。後來電腦玩物中也長期安裝著GFC的會員登入元件留言板元件,透過GFC你可以「登入」電腦玩物,成為電腦玩物的會員,並能夠在留言板中屬名留下你對電腦玩物的建議或疑問;我滿喜歡這個GFC留言板的,因為它可以具名互動的特性確實讓社交性更強。

而今天在Google最新成立的「Social Web Blog」中,看到Google Friend Connect增加了一個小小的新功能,就是提供了一個「Social Bar(社交列)」元件,假設你之前已經安裝GFC的話,現在就只要把Social Bar的程式碼加到部落格上,就可以在部落格的頁面最頂端或最底端,新增一條工具列,在這條工具列上會顯示最新的網站活動狀態(例如有人留言或有新註冊),可以用下拉選單直接打開網站留言板,或者直接下拉出網站會員資料查看等等。

有了Social Bar後,除了在使用GFC的功能上更為方便外,也因為更加的顯眼,又可以自動整合在網頁中,或許可以讓訪客的使用率有更多的提高,發揮GFC更多的互動可能吧!(當然,我更希望的是GFC推出更多更強大的社交、社群元件。)

不是所有的部落格都可以使用GFC,不過像Google自己的Blogger部落格系統,或者自己架站的站長是一定可以使用GFC的,而目前Google Friend Connect也已經有「中文版」,所以想要了解的朋友也可以直接到官網上查看。我這篇文章就從假設你之前已經有安裝GFC開始,介紹如何添加最新的Social Bar功能。

另外也歡迎讀者多多利用電腦玩物最新安裝的Social bar,回饋一下在各種瀏覽器上是否有問題,使用上是否有更便利等等,如果效果還不錯的話,或許就不用在側邊欄多裝留言板了,直接使用置頂的Social Bar即可。

 

假設你已經有註冊安裝過GFC了,來到GFC官網,你會發現左方功能列多出了一個「社交列(Social Bar)」的項目,點擊進入其頁面,就可以開始進行設定程序。

gfcbar-02

 

你可以在「Social bar position」中設定社交列要置頂(Top),還是置於底端(bottom),我是覺得置頂比較顯眼,看起來也更有融入網站的感覺。接著勾選「include comments gadget」讓工具列中整合留言板元件。

在「意見適用於」項目中,是要指定輪播於工具列的留言範圍,【整個網站】就是輪播整個網站留言板的留言,也可以使用【網頁】來輪播目前頁面的專屬留言(假設你有為每個單篇文章頁面設定專屬留言板的話)。

接下來你可以設定工具列上要顯示的說明文字內容等等,而其實GFC的留言板也是可以開放「匿名留言」的,也就是不需要登入也可以留言,不過在電腦玩物中因為我想要試試看讓GFC留言板成為真正電腦玩物會員的討論區,所以這邊我沒有勾選「允許匿名文章」。

gfcbar-03

 

在簡單的設定後,到下方按下〔產生代碼〕,就可以獲得安裝程式碼,將其整個複製起來。

gfcbar-04

 

來到你的部落格後台,這邊以電腦玩物使用的Blogger為例,點選「新增小工具」,將剛剛複製的程式碼貼入即可。你可以把這段程式碼放在版面的任何位置,我是建議移到版面最下方,以最大程度降低對載入速度的影響。

不管你把這段程式碼小工具擺在哪邊,最後工具列還是會出現在你原本設定的頂端或底端。

gfcbar-05

 

效果就如同目前電腦玩物所呈現的那樣,這個Social bar有趣的地方,除了可以更方便登入外,能夠即時顯示最新互動狀態(例如最新留言)讓部落格留言更有一種類似Twitter的感覺

而留言板和會員資料整合進來後,都可以用下拉選單來操作,也是非常的方便。

gfcbar-06

 

有的朋友可能覺得留言板太小,其實可以點選留言板(會員資料版面亦可)右上方的放大按鈕

gfcbar-07

 

這時候就可以把該元件放大到整個網頁來查看,會方便很多。

gfcbar-08

 

  • 小結:

我滿喜歡Google Friend Connect的,雖然它現在的互動功能還是不夠多,不過能夠幫部落格添加更好的社群互動元素是有幫助的,因為部落格本來就是很有個人性的一種網路媒體,而來到部落格的讀者常常也是以和站長互動的心態而來的,這時候部落格本身提供的文章留言之類的功能還不足以滿足互動的需求,或者說好像還不能夠很熱絡的帶起部落格中本來應該有的人與人之間互動的氣氛,而像GFC這樣開放的工具,正好可以幫部落格補充這類功能,當然現在還不夠好,但是卻非常令人期待。

 

 

留言

  1. 頭香(咦)!

    行者謝啦,這功能我喜歡,感謝你的告知,立即來用。

    這邊總是有好東西啊...

    回覆刪除
  2. 如果這玩意穩定的話,就可以把sidebar 的部份收起來了。

    回覆刪除
  3. 在 Firefox 正常,但在 IE6 長度有問題。
    會遮住原先的 Blogger Navbar。

    回覆刪除
  4. 嗯嗯 ie6 下長度無法自動延展

    回覆刪除
  5. 我裝好之後,居然是英文介面,找不到原因,好像不用特別去更換語系吧

    回覆刪除
  6. 應該不用 我並沒有特別去設定語系

    回覆刪除
  7. 我剛剛測試2個部落格,一個是顯示中文,另一個顯示英文,本來以為是標題的關係,把英文標題的頭一個字加上中文字碼,結果一樣是顯示英文,不知道它語系的選擇是以什麼做為辨別,目前還找不到解決辦法

    回覆刪除
  8. 有人試過放在 bottom 嗎? 會永遠'置底',
    不像放 top 時, 只要 page down 就消失了,
    ex: http://mensa.raelelohim.com/
    是設定有問題? 還是它本來就這樣?

    回覆刪除
  9. 不過看起來置底也不錯的樣子xd

    回覆刪除
  10. 放在上面比在侧栏的好哦

    回覆刪除
  11. 試了又試,在 FX3,IE6,IE7,IE8的表現都不一樣,算了,放棄!:(

    回覆刪除
  12. 置頂的確是最理想的位置,我試著改變position,效果並不理想...

    回覆刪除
  13. 我的頭像怎麽沒有顯示出來?今天廢了九牛二虎之力討來的,快快顯靈~

    回覆刪除
  14. To 瓦特比:
    真的嗎?
    我在Fx3、IE6、IE7;IE8、Chrome、Safari、Opera上面試過

    除了IE6顯示時無法延展寬度外,其它的效果都差不多呢?

    回覆刪除
  15. 我的也是英文介面 也找不到能改語系的地方@@

    回覆刪除
  16. 如果放在 TOP,的確差不多,但我的部落格版面比較適合放在 BOTTOM,有些會遮住 footer,有些不會,footer 高度老是調得不理想。下次再試吧!

    回覆刪除
  17. 我也是英文說...煩..以前從帳戶進來就自動變中文的

    回覆刪除
  18. 恩..我在我的Blog試過至底會有問題,他會在頁面裡又多一個Slide Bar很怪,所以我改用至頂,而我是用IE6的唷,他會自動延展,訣竅就是直接加在範本的</body>的上面,這樣就會自動延展唷^^各位參考看看,順便問一下各位,Social bar的顏色不能自訂嗎?因為藍色跟我的Blog顏色不太搭呢,我已經有改程式碼裡的顏色了,不過改變的只有點擊後開啟的視窗顏色,原本的Social bal顏色沒變。

    寵愛Pets 沙宣
    http://lunase.blogspot.com

    回覆刪除
  19. 原來是放在底部的問題,我了解了^^

    回覆刪除
  20. To 沙宣:

    原來有這個方法,謝謝你的分享^^

    回覆刪除
  21. social bar代码应该放到wordpress博客中的哪个位置?

    回覆刪除
  22. 代碼放在任何位置都可以

    他會自動去找版面的最上面或最下面(看你當初在GFC後台的設定)

    回覆刪除
  23. 現在似乎 Friends Connect 使用在 Blogger 上限制只能用 Widget。像這篇文章的 social bar,在 Blogger 已經沒辦法設定新的網站。

    設定新的網站只能有兩種方式:一般網站與用在 Blogger 上的 Widget。假如要用一般網站來設定 Blogger 的話,則驗證的兩個檔案會不知道如何擺在 Blogger 網站之下。

    回覆刪除
  24. 原來如五,現在又改變方向了嗎

    其實改天有想要把social bar改回到側邊欄xd

    回覆刪除
  25. 哈..今天發現..進去gfc會自動把google該帳號所有的blog加進去..不用一各一各申請..問題是..我的還是英文拉..都看不懂

    回覆刪除
  26. 原來有慢慢在調整了 不錯不錯

    回覆刪除
  27. 只是好像無法選擇顏色???

    回覆刪除
  28. 嗯嗯 目前好像無法選擇顏色

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

Google Maps 我的地圖完全教學!規劃自助旅行攻略

Slack 完整教學與上手心得:找到正確的團隊溝通之道

Google NotebookLM 免費中文 AI 筆記實例教學,老師、學生、創作者利器

Miro 遠距工作開視覺會議的免費強大白板,專案圖解實例教學

Google 表單自動關閉回覆教學:時間人數到達就過期

畫張圖說得更清楚! Napkin 用 AI 幫你的簡報文章手繪視覺思考圖

如何用 AI 工具提升工作效率?三個關鍵步驟讓生成結果更精準有效

Excalidraw 免費 AI 生成流程圖,一鍵畫出知識圖表、專案流程、寫作大綱

ChatGPT Canvas 全新 AI 寫作、程式碼編輯工具,不再只能對話!