用你我都熟悉的方法在痞客邦貼上 Google Friend Connect 的貼紙

Before Reading: 我強調這個方法目前是屬於實驗階段,寫這篇文章的用意只是想讓更多人可以使用Google Friend Connect,我相信一定還有更好的方法讓使用上更完善,歡迎大家共襄盛舉,一同討論,也請專業人士賜教。Thanks~ (PS. 在安裝之前,請先閱讀文章最下方的最新更新)

     前一陣子,利用 部落軌道(Blog Orbit) 穿梭在軌道友的部落格中時,突然看到一個好玩又新鮮的Widget,仔細一看原來是 Google 推出的 Google Friend Connect,於是上 FunP 搜尋一下文章,看看如何安裝這個Widget,也順便了解一下它的功能,參考幾個網站後發現好像除了使用Blogger的部落客可以上載Google 要求認證的Html 程式碼,其它部落格平台要取得貼紙好像不太容易。

 j0433207-1.jpg

      讀了海芋的Google Friend Connect 申請、設定與放置於網頁之實戰手札 及賽拉維‧柯南的 如何在痞客邦PIXNET加入Google Friend Connect學後,再綜合上之前申請部落格觀察時所使用的方法後,所以我決定試試看將Google 的 Html 程式碼貼到一篇新的文章中,試了一下, 果然成功了,所以現在將這個方法分享給大家,這些步驟主要是讓大家知道如何將程式碼Download下來,讓在痞客的你可以順利貼上Google Friend Connect 的貼紙,讓大家一同Connect 在一起!


我是使用 Firefox 瀏覽器下載檔案的,如果你使用 ie 瀏覽器也沒關係,只有第5-9 步驟的存檔方法不同,請注意文中綠色字的指示是供 ie 瀏覽器使用者

Step 1:Google Friend Connect 的網站,設定你的部落格,按下之後,Google 一開始會請你Sing In,然後同意一些約定。接下來你會看到下面的網頁,然後按下 "Set up a new site"

Step1_GFC.jpg

 

Step 2:下面這個視窗是告知你取得貼紙時,一些步驟的簡介,按下 "Continue" 繼續。

Step2_GFC.jpg

Step 3:在這輸入你的部落格名稱(輸入中文和任何符號都ok)和部落格網址。然後按下繼續。

Step 3_GFC.jpg

Step 4:然後你會看到下面的圖示,Google 要求我們下載下面這兩個檔案,然後再上載到我們的部落格,先按下第一個檔案: rpc_relay.html ,接下來的幾個步驟很重要,要注意囉 ~

Step 4_GFC.jpg

Step 5 :然後會顯示下面的視窗,在這裡我們不做任何動作,到下一個步驟。ie 瀏覽器使用者請參考第二個視窗。

Step 5_GFC.jpg

    Step 5:視窗二, ie 瀏覽器使用者用。按第一個檔案後,會出現類似下面的視窗,點擊存檔 "save"。

       ie_GFC.bmp

Step 6 :選擇開啟方式的下拉Menu,然後點選「其它ie 瀏覽器使用者請參考第二個視窗。

Step 6_GFC.jpg

  Step 6:視窗二, ie 瀏覽器使用者用。按儲存後,會出現一個存檔的對話框,選好你要存檔的目的地,記得一定要將附檔名改為 " .txt " ,所以檔案的名稱會成為 " rpc_relay.txt ",這樣才會取得HTML 程式碼,然後存檔。

    ie_GFC_2.bmp

Step 7 :然後會跳出個對話框,我們需要記事本(Note Pad)這個程式以取得程式碼,找到記事本後點擊它。ie 瀏覽器使用者請跳過這個步驟。

Step 7_GFC.jpg

Step 8 :之後rpc_relay.html 的 Html 程式碼就會出現在記事本中了。ie 瀏覽器使用者請參考第二個視窗。
Step 8_GFC.jpg

 ↓ Step 8:視窗二, ie 瀏覽器使用者用。重複第5-6步驟存第二個檔案,存完後在你的檔案目錄中會找到像下列兩個檔案一樣的 icon。

ie_GFC_3.bmp

Step 9 :重複步驟4-8,將另一個檔案 canvas.html 下載到記事本中。下載完後按下一步,Google 會請你測試是否連結,這時在另一個視窗中開啟你的部落格後台,將下載的檔案貼到新的文章中。
Step 9_GFC.jpg

 ↓ Step 9:視窗二, ie 瀏覽器使用者用。雙點擊開啟兩個檔案,電腦會用記事本(Notepad)開啟。

ie_GFC_4.bmp

Step 10 :回到痞客邦的後台發表一篇新的文章,在編輯欄的左上角有一個HTML按鈕,按下它。接下來,ie 和 firefox 瀏覽器的步驟都一樣。

Step 10_GFC.jpg

Step 11 :將之前下載的2個 HTML 程式碼,複製後貼到 "HTML 原始程式碼編輯器" 的視窗中,然後按下更新」鍵,接下來發表這篇文章。

Step 11_GFC.jpg

Step 12 :Then, 回到Google Friend Connect 的視窗中,按下 "Test to finalize setup" 測試是否有連結。 記得,在你發表有 HTML 程式碼的文章後再按測試喔。

Step 12_GFC.jpg

Step 13 :看到這一頁就代表成功了,YA! Google 有連結到你的網站,然後按下 "Get code for the Members gadget"。

Step 13_GFC.jpg

Step 14 :貼紙寬度、高度、和一些基本設定。大家一定都很熟悉怎麼設定了
Step 14_GFC.jpg

Step 15 :設定好顏色、寬度、高度後,將網頁像下拉,便可以產生程式碼,然後就貼到你的欄位中和大家一起連結嚕
Step 15_GFC.jpg

Good Luck!

PS 1:我並不是在 IT 界工作,只是以前學過一些程式,如果有一些原理的問題,Sorry, I don't know. It just works!靈感是來自於申請部落格觀察。


和Google Friend Connect 相關的文章,給大家參考:     

用 Google Friend Connect 秀你自己 by 高登工作室 - 介紹許多Google Friend Connect 的功能、用途、好處、用法等等...
Google Friend Connect 申請、設定與放置於網頁之實戰手札 by 海芋小站
如何在痞客邦PIXNET加入Google Friend Connect  by 賽拉維柯南

 

《98.3.6 更新》
如果你希望痞客邦能提早開放Google Friend Connect 的使用,請到Cindy 爭取在痞客使用Google Friend Connect的機會》文章中留言。

《98.3.9 更新》
最近有網友分享使用此方法安裝Google Friend Connect 貼紙的心得,大多數的朋友得到的反應是如果使用Firefox的瀏覽器,可以順利使用網頁,順利的在部落格閱讀,不過,如果你的網友使用IE瀏覽器進入部落格中,會造成他們的網頁當機。

RedAngel 發表在 痞客邦 PIXNET 留言(18) 人氣()


留言列表 (18)

發表留言
  • 小咪
  • 好!~
    小咪來試試!!~
  • 小咪好神速喔 O口O!

    RedAngel 於 2009/01/20 14:22 回覆

  • ah11851152n
  • 看完之後,其實是很簡單的。
    另外我覺得把程式碼放進公告欄比較方便
    因為我的部落格有設定『顯示前3行摘要』
  • Good idea~ 放到公布欄中,謝謝你分享
    當初也覺得簡單,所以才決定和大家分享這個方法
    很高興認識你^.^

    RedAngel 於 2009/01/21 04:24 回覆

  • 賽拉維‧柯南
  • 這種方法好像比我的方法還簡單呢..^^Y
    不過可以多問一下.那那篇含有那兩個認證程式碼的文章..現在是在哪呀??
  • 呵呵,我也有參考賽拉維的教學文章...
    我將那篇文章刪除了,目前為止(約5天了吧...)還沒什麼問題

    RedAngel 於 2009/01/21 04:28 回覆

  • yayun68
  • 好清楚的解釋喔
    謝謝^^
  • 謝謝亞芸的留言^.^
    我還很怕寫得不夠清楚,因為從沒寫過這種文章。
    我還是比較喜歡寫美食 :P

    RedAngel 於 2009/01/21 04:34 回覆

  • 紐西蘭美女
  • 好棒的教學分享
    紐西蘭美女試試看
    謝謝分享^^
  • 不客氣~
    謝謝美女的稱讚 ^.^
    Good Luck~

    RedAngel 於 2009/01/21 14:44 回覆

  • tiffwu
  • 我還沒裝
    之前有裝軌道但是沒時間照顧就拿掉

    很怕裝了這個沒去照顧又是同樣命運
  • 對耶,多一個widget就要多一些時間照顧一下...哈哈,感覺好像養寵物喔~

    RedAngel 於 2009/01/21 14:57 回覆

  • yayun68
  • 我的安裝成功
    可以引用你的文章分享給我的朋友看
    謝謝^^
  • 沒問題!和更多人分享是一件好事^^
    不過我還在觀察Google Friend Connect 的貼紙和程式是否有問題中唷~

    RedAngel 於 2009/01/22 16:14 回覆

  • norlee
  • 最近太忙了,有時間再來試看看。

    新年快樂唷。
  • 謝謝Freeman 的祝福~
    我也祝你有個快樂的牛年 ^^

    RedAngel 於 2009/02/04 09:04 回覆

  • pessi1221
  • 我失敗了

    我有按照你的步驟
    但是一直無法認證成功??

    請問還有其他方法嗎?
    謝謝妳
  • 不好意思ㄝ,只發現這一種方法... 整個安裝貼紙的步驟就是,先取得html 程式碼,再貼到文章中,發表了那篇文章後再回 google 按下測試連結的鈕。
    你可以試試文章最後<相關文章> 有一篇賽拉維‧柯南所教的方法試試看嚕
    祝你好運 Good Luck ^^

    RedAngel 於 2009/02/04 09:23 回覆

  • chan2
  • 照著教學放好了喲~~感恩~~
    (順道來加一下...嘿嘿~)
  • 不客氣囉~
    嘿嘿~我也加入純純的部落格了,一起來連結 ^.^

    RedAngel 於 2009/02/04 09:28 回覆

  • cindy128
  • 謝謝您的教學
    我也申裝成功囉
  • 不客氣啦~~
    謝謝Cindy的來訪^^
    很高興認識你:)

    RedAngel 於 2009/03/01 15:52 回覆

  • lovedubu
  • 感謝你的分享
    我也設定成功囉
  • 不客氣^^
    嘻嘻,我成為你的第一個Member!

    RedAngel 於 2009/03/04 07:25 回覆

  • lovedubu
  • 太感謝你了~~~
    我超怕都沒人理我XD
  • 我很喜歡你的照片呢 ^.^

    RedAngel 於 2009/03/04 07:52 回覆

  • canru
  • 我安裝成功了,謝謝你的教學,不過想請問一下,
    上傳到我們部落格中的那兩個html程式碼的文章,
    可以刪掉嗎?
  • 不客氣 ^^
    我將文章刪除了, #2的朋友提議可以將html放在公告欄中
    你可以都試試看。Good Luck~~

    RedAngel 於 2009/03/05 08:57 回覆

  • lovedubu
  • 謝謝你的鼓勵,不過我這兩天裝上google的東西後,blog用IE開似乎會當機(我用firefox都不自覺,是別人跟我說的)
    不知道是不是google跟我某個外掛有衝到的關係?
    但用firefox沒問題,用IE就有問題,也難保不是IE本身的問題XD
  • 謝謝你分享你的使用後的心得和經驗呢 ^^

    我也常常被IE 給弄糊塗了,所以現在80% 的時間都用firefox

    RedAngel 於 2009/03/06 12:50 回覆

  • cch
  • 我裝了以後,用IE的朋友都說進我的blog下載好慢...一直跑一直跑,有時還會當掉...然後他們就不想看了>"<
    於是我又把它拿下來了,嗚~
  • 謝謝傑米淳分享你的使用後心得。
    不好意思,這種安裝方式造成你的網頁會當機~~
    我已在文章中,加註大家的使用後心得。

    RedAngel 於 2009/03/10 07:35 回覆

  • cch
  • 不要說不好意思啦!
    很感謝你的分享捏~

    也許是我掛太多東西造成的T__T
  • 不客氣嚕~
    其實大家都還不確定是什麼造成IE網頁當掉,不過可以確定使用firefox是ok的^^

    RedAngel 於 2009/03/12 13:25 回覆

  • cindy128
  • 謝謝redangel幫我做連結
    好開心喔^^
    真希望痞客能快點開放我們使用..如果越多人反應
    回應,我就快一點回報給痞客!!
  • 沒啦,應該是我要先謝謝Cindy連結我的文章^^
    幫號召力強大的Cindy出點小力,幫忙通過GFC在痞客邦的使用也是應該的~~

    RedAngel 於 2009/03/12 13:32 回覆