Google Friend Connect實例教學 - 專屬會員評分系統

設定好Google Friend Connect後，便可以在網站或部落格上套用Google Friend Connect Gadget的功能。今天為大家示範如何快速簡便地在自己的部落格上建立評分系統。

也許你會覺得奇怪，有些BSP本身已提供了評分系統，直接使用不是也可以嗎？的確，對於部落客來說，這是更簡單的方法，因為完全不用做任何設定就可以使用了。但是，我們是否要考慮：「有哪一個BSP的會員數，大於Google的會員數嗎？」使用Google Friend Connect進行評分，只需網友擁有GMail帳號便可認證；相對於直接使用BSP提供的評分認證方式，就只有在該BSP也註冊帳號的使用者才能和部落客互動囉！以幾乎人人都有GMail觀點來看，使用Google Friend Connect進行評分評認，會是更開放的作法。

以下進入教學的部份，前提當然是已經為自己的部落格或網站設定好Google Friend Connect。

步驟一：進入Google Friend Connect的Review/Rate gadget設定頁面
這個頁面在Social Gadget的子頁下。共有幾個項目需要設定：

第一部份設定四個項目：

• Scope：評分的範圍。如果是針對整個部落格或網站的總評分，就設定為"Entire Site"；如果是針對單一文章或是單一頁面的評分就設定為"Page"。最後一個選項 "Id"是適用於單一個物件所用，例如購物網站下的很多商品，每一個商品便算是一個Id。
• Start with this text in the review area：在這一格輸入評分留言區的預設文字。例如："你給這篇文章幾顆星呢？"
• Ratings header：評分區的標題。可以設定中文或其他語言都沒問題哦。
• Allow anonymous posts：是否允許匿名評分。建議是不要鉤啦~大家都有為自己的留言和評論負責才對呀~
  

第二部份，設定評分功能的尺寸相關設定。

• Width：可視寬度。這部份請依自己網站/部落格的實際排版狀況來設定。以黃河水目前的排版為例，我輸入420是剛剛好。
• Number of posts to show：設定每一次顯示多少篇評分留言。可設定1~15間的數字。如果評分留言超過這個數目，在顯示會自動有翻頁的選項出現哦。
• Expand anc Contract：評分留言的摺疊顯示選項，共有3種選擇。第一個是預設為擴展，允許摺疊或擴展、第二個是預設為摺疊，允許摺疊或擴展；第三個是只允許擴展，無法摺疊。

第三部分最簡單，就是設定顏色。設定完成後，請按第四部份的Generate Code按鈕，取得程式碼。將程式碼複製到第二步驟裡的設定區去。

步驟二：安裝程式碼
在前一步驟取得的程式碼，必須放在部落格版面中適當的位置。在此以Blogger為例，請進入版面配置的修改html，並鉤選「展開小裝置範本」。請尋找<div class="post-body">這個標籤，理論上，剛剛那段程式碼只要放在這個標籤的子階即可。但為了閱讀的便利性，我將碼式碼放在該區段的子區段<span class="post-labels">之內：再加上一個判斷，只有在讀取單篇文章的獨立頁面時才顯示，亦即從首頁進來時，不要顯示。這個判斷如果再配合其他「即續閱讀」的設定，效果也很好哦！加上該判斷式的完整寫法是：
<b:if cond='data:blog.pageType == "item"'>
[把複製的程式碼放在這兩行中間]
</b:if>

如此便算是完成程式碼的安裝了。

效果就像是你看到到這篇文章下方的「網友評分」那個部份。

這篇教學對你有幫助嗎？請加入我的Google Friend Connect後，幫我打個分數吧！^^"