類別 | 學習心得

使用Facebook Connect將WP與FB完整結合(上)

昨天花了一整天終於將Wordpress與Facebook完整結合,這是利用Sociable!「Facebook Connect」插件達成的,其實安裝及設定過程非常簡單,只是原木遇到一些狀況,所以花了一整天把問題找出,現在大家可以使用Facebook的帳號登入我們的部落格囉,連評論都可以同步發表到FB哦!

歡迎大家使用FB登入我們的部落格哦  這個插件請直接到Sociable!的部落格 下載 ,在啟動該插件之前,請先到 http://www.facebook.com/developers/ 建立一個 Application,相關步驟如下:

1. 到上面網址的頁面後,點選「+ 建立新的應用程式」

在Facebook建立應用程式的步驟圖示
2. 輸入「應用程式名稱」並點選同意Facebook使用條款後,就完成該應用程式的建立囉!

在Facebook建立應用程式的步驟圖示
3. 應用程式建立好後,會出現下面的畫面,而該插件會使用到「API金鑰」「秘密」這2個數值,而「秘密」這個數值就是秘密,不能流落出去喔!

在Facebook建立應用程式的步驟圖示
4. 接著在「聯外通」設定「聯外通網址」「Base Domain」這2個值,聯外通網址就是部落格的網址,但記得要在網址後面加一個「/」,而Base Domain就是輸入你申請的網域嚕!

在Facebook建立應用程式的步驟圖示

  以上,就是在Facebook建立一個應用程式的步驟,接著將該插件上傳到 wp-content/plugins 並啟動後,在下面的畫面輸入「API金鑰」「秘密」這2個數值就完成安裝,最後再去「外觀→模組」「FacebookConnector」拉到側邊欄就大公告成啦!

安裝Facebook Connect插件最重要的設定步驟

歡迎大家使用Facebook來登入我們的部落格哦!

☆★相關文章★☆
使用Facebook Connect將WP與FB完整結合(下)
今天多寫了這篇文章,主要是因為換了Wordpress的Cache,在看到「高登工作室」的「裝個Hyper Cache快取外掛吧!」這篇文章,原木就移除WP Super Cache,試試高登強力推薦的Hyper Cache,結果瀏覽的速度從台鐵變成高鐵,推薦推薦!!  Hyper Cache安裝設定比WP Super Cache簡單許多,這篇文章原木就不再介紹了。在前一篇「使用Facebook Connect將WP與FB完整結合(中)」的文章有介紹在使用WP Super Cache時,必須在 .htaccess 加入「YOURAPIKEY_user」的設定,才能讓Facebook Connect正常使用與登入,但是還是會有些問題,1其一在首頁登入後,必須要自行再Reload頁面一次,不然還是會看到沒有登入的畫面(雖然實際上已經登入);2其二就是在寫評論的時候,雖然是有勾選「將此回應分享到 Facebook」,但是送出後FB的塗鴉牆視窗就是不會出現,這非常確定是WP Super Cache造成的。  現在使用Hyper Cache除了速度變更快之外,Facebook Connect使用與登入上也完全沒有問題,真的是太開心了,不過還是有兩個地方要設定一下,1第一就是「Home caching」要勾選,也就是首頁不要Cache,這樣才不會出現上一段WP Super Cache的第一個問題,當然,也會造成首頁開啟的速度比較慢喔;2第二就是在「Cookies matching」加入「YOURAPIKEY_user」,這樣就能讓你Wordpress的Facebook Connect與Cache相處愉快!^^  ~ That’s all ~
繼續閱讀
使用Facebook Connect將WP與FB完整結合(中)
其實安裝Facebook Connect真的非常簡單,但是原木在安裝過程中卻遇到了問題,就是在登入過程中始終對應不到我Facebook的應用程式,昨天花了一整天的時間研究,終於讓原木找到了問題,解決之後心情快~樂~的~不~得~了~  ^^  原木的問題有二,第1個問題是Facebook韓德爾の原木粉絲專頁,第2個則是Wordpress的 1 Blog Cacher 插件。  關於第1個問題,在我們部落格側邊欄位的「Communities」是利用Highslide JS效果呈現的,其中第7個是顯示我們部落格在Facebook的粉絲,因為有使用 <script type="text/javascript">FB.init("e320a5c35f3157b68b1e5e3f0f6563a9");</script> 語法,而在Facebook Connect中也有設定API金鑰,結果造成同一個頁面出現兩個API金鑰,導致在登入FB時一直指向粉絲的專頁,這個超讓原木抓狂的,想說明明API金鑰跟秘密都設定對了,為何都無法指向我在FB的應用程式,後來原木就利用Java Script另開新視窗,就解決囉!  第2個問題很簡單,換掉 1 Blog Cacher,改用 WP Super Cache,在裝好該插件後,找到部落格根目錄 .htaccess 檔案下面的敘述:[code]RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress|wp-postpass_).*$[/code]  將她改成:[code]RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress|wp-postpass_|YOURAPIKEY_user).*$[/code]  其中「YOURAPIKEY」就是輸入你Facebook應用程式的API金鑰,記得後面要加「_user」,這樣在使用Facebook Connect登入時就不會被快取。  原木特將遇到的問題筆記下來,希望能對安裝Facebook Connect的人有所幫助。^^
繼續閱讀
如何在 WordPress 做一個歡迎頁
今天開始來到我們家有一個新的大門了,由於我們有兩個部落格系統,舊的部落格是用 F2cont 架的,新的則是現在使用的 Wordpress,為了讓大家選擇要去我們的哪一個家,所以好友小潘幫我們家設計了一個歡迎頁。  Wordpress 的首頁是抓自己的 index.php,所以大家輸入網址後一定是讀取 index.php,這樣歡迎頁的 index.html 就無法當作第一個頁面來讀取,而 Wordpress 又會一直循環調用 index.php,如果更改 .htaccess 將首頁設定使用 index.html,那麼落格的文章就叫不出來了,怎麼辦呢?很簡單 ... 以下 Step by step: 將下面的代碼增加到根目錄的 .htaccess:[code lang="php"]<IfModule dir_module>DirectoryIndex index.html index.php</IfModule>[/code] 修改 wp-includes/rewrite.php 檔案,找到下面的敘述:[code lang="php"]var $index = ...
繼續閱讀
自動為上傳的圖片加上浮水印
這是原木找了好久終於找到這個方便又實用的Plugin,可以使用圖片或文字當作浮水印,廢言不多說了,來介紹如何安裝使用嚕!  請先下載檔案,解壓縮後放到 wp-content/plugins 並到後台啟用她,之後編輯 wp-admin/includes/media.php 這個檔案,在 // Save the data 前加入下面的 code:[code lang="php"]// For WP WaterMarkMM_Execute_WM( $file, '' );[/code][download id="4"]  爾後每次升級完 Wordpress,記得要再到該檔案加入上面的 Code 喔,不然圖片的浮水印功能會沒有作用喔,這也是原木寫這篇文章的用意之一,提醒自己更新 Wordpress 後要將 Code 加入該檔案。下面放上文字及圖片浮水印的效果:  文字浮水印    圖片浮水印    設定的方法很簡單,原木就不再特別介紹了,有問題的話可以留言給我喔。另外經原木測試1「文字浮水印」只能支援英文,中文會變成亂碼,而2使用「圖片浮水印」,請將 wp-content/plugins/watermark/ 下的 stempel.png 換成您想要加的 ...
繼續閱讀
避免WordPress自動加上nofollow標示
如果你也是部落客,通常在留下評論時,也都會順手將你部落格的網址留下,但偏偏Wordpress都會將你留下的網址,加上nofollow這段敘述,讓搜尋引擎完全不會理會,到底nofollow是什麼東東啊?  nofollow屬性最初是用在網頁層級的中繼標記裡,告訴搜尋引擎不要遵從(即檢索)網頁上的任何對外連結。為了鼓勵大家多多留言,原木怎麼可以讓最毒婦人心的「不要發肉蜜」,讓大家留下的網址白留呢?!況且,大家都喜歡「發肉蜜」啊,呵呵喝 ...  將nofollow敘述拿掉,除了可以利用 「NoFollow Free」外掛,也可以自行修改 wp-includes/comment-template.php 檔案,找到在第 140 行「function get_comment_author_link()」這一段,在第 148 行有個「$return = "<a rel="external nofollow" href="$url">$author</a>";」敘述,將nofollow拿掉就可以嚕,真的是快、狠、準 ~ That's all ~  我們已經拿掉nofollow了,相信對大家網站的 SEO 會有不少幫助,也希望大家多多留言啦! ^^後記  每次 Wordpress 更新都要手動改一次,還真的有點麻煩,所以建議使用外掛,有興趣的朋友可以到 http://wordpress.org/extend/plugins/nofollow-free/ 下載此外掛,若要中文化,可下載 http://images.steachs.com/Files/lang.zip 繁中語系。
繼續閱讀
WordPress評論回應郵件通知
這還是在《Willin Kan 的博客》挖到的寶,也就是當A回應B發表的評論,系統會發一封E-Mail通知B,這樣可以增加該篇文章的評論互動,當然,你的伺服器一定要有 mail() 功能哦!  這個不是插件,只要修改你使用中佈景的 functions.php 檔案,將代碼放置 <?php ..... ?> 區域內即可,《Wordpress評論回應郵件通知》的代碼有三種,請依需求點取下面的標題: 有勾選欄位,由訪客決定是否要回應郵件通知。 無勾選欄位,由管理者決定在什麼條件下發郵件。 所有回覆都發郵件。  先補充說明,如果你使用的佈景主題,評論式樣是使用 comments 和 trackbacks/pingbacks 分離(如原木使用的主題),請將下面所有的:  [code lang="php"]get_comment_link($parent_id)[/code]  修改成:  [code lang="php"]get_comment_link($parent_id, array('type' => 'comment'))[/code]  有勾選欄位,由訪客決定是否要回應郵件通知(會在模板自動加勾選欄,如果不想自動加,可把後面一小段刪除。)[code lang="php"]/* comment_mail_notify v1.0 by willin kan. (有勾選欄, 由訪客決定) */function comment_mail_notify($comment_id) ...
繼續閱讀
將WordPress標籤雲彩色化
今天在「阿茂的隨手札記」看到一篇如何「輕鬆將WordPress標籤雲彩色化」的文章,這是不需要安裝Plugin就可以實現,方法非常簡單,只要將Code插入使用中的佈景即可達成,原木特將此方法收錄,供以後自行參考使用,也分享給Wordpress使用者。  WordPress預設的標籤雲只有一種表現方式,就是所發文章的標籤雲類別越多,該標籤的字體越大,但是這樣顯得非常單調,而以下的方法則是不需要經過Plugin就可以讓標籤雲彩色化哦! 將下面Code插入 wp-content/themes/目前使用佈景/functions.php 檔案中的 <?php 之後:[code lang="php"]//Start of colorful tag cloudfunction colorCloud($text) {$text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);return $text;}function colorCloudCallback($matches) {$text = $matches[1];$color = dechex(rand(0,16777215));$pattern = '/style=('|")(.*)('|")/i';$text = preg_replace($pattern, "style="color:#{$color};$2;"", $text);return ...
繼續閱讀
新增WordPress評論表情圖
這也還是在《Willin Kan 的博客》挖到的寶,一口氣在 Willin 大大挖到3個寶,還幫了原木修改代碼,真的很謝謝他。這是一個小而不用插件的Hack,就是在評論框出現所有的表情圖供訪客使用。  請先點 →這裡← 下載檔案,解壓縮後直接將 smiley.php 放在使用佈景的所在目錄,然後在 comments.php 的 textarea 的適當位置,加入以下的代碼:  [code lang="php"]<?php include(TEMPLATEPATH . '/smiley.php'); ?>[/code]  ~ That’s all ~
繼續閱讀
將WordPress評論Ajax化
這是在《Willin Kan 的博客》這一篇「WordPress 內置嵌套評論專用 Ajax comments」文章挖到的寶,之前我們部落格使用F2cont也有將評論Ajax化,主要是發表評論後不需要再刷新頁面,就可以看到剛剛發表的評論,這樣可以降低系統的Loading,這對部落客真的是國寶級的好物。  有關安裝的步驟很簡單,請先點→這裡←下載程式,解壓縮後將這2個檔案放到你使用佈景的所在目錄,並修改使用佈景的 header.php: 找到[code lang="php"]<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>[/code] 用下面幾行取代:[code lang="php"]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script><?php if ( is_singular() ){ ?><script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/comments-ajax.js"></script><?php } ?>[/code]  以上就完成嚕,如果你佈景的評論樣式夠標準,其它的都不用修改,由於我們部落格佈景的評論樣式不是很標準,所以直接使用安裝方法還是會出問題,而willin大大針對使用 ...
繼續閱讀
啟動WordPress的Gzip網頁壓縮功能
啟動Wordpress的Gzip網頁壓縮功能加快網頁讀取的速度有很多種方法,其中讓網頁在輸出時透過壓縮功能,即可加速開啟及減少等待時間,這項壓縮功能叫做「Gzip 網頁壓縮」。  網站啟用 Gzip 壓縮可以幫助網站瘦身,其原理是透過網站伺服器壓縮輸出大小再傳給 Client 端,Client 端的電腦再進行解壓縮,可以節省許多網路頻寬,而啟動 Wordpress 的 Gzip 網頁壓縮功能有 2 種方法,以下: 透過 PHP:使用此方法的前提是伺服器須有支援「Zlib Compression Functions」,且當 WordPress 版本更新時,必須再重新加入此語法。修改的檔案是 Wordpress 根目錄的 index.php,請該檔案的「<?php」之後加入「ob_start('ob_gzhandler');」語法即可。 利用 .htaccess:這方法是透過 Apache 的「Enabling Compression」,請在 Wordpress  根目錄的 .htaccess 檔案加入以下語法(如果沒有請自行建立):[code lang="php"]<IfModule ...
繼續閱讀
使用Facebook Connect將WP與FB完整結合(下)
使用Facebook Connect將WP與FB完整結合(中)
如何在 WordPress 做一個歡迎頁
自動為上傳的圖片加上浮水印
避免WordPress自動加上nofollow標示
WordPress評論回應郵件通知
將WordPress標籤雲彩色化
新增WordPress評論表情圖
將WordPress評論Ajax化
啟動WordPress的Gzip網頁壓縮功能


  • Pingback: 安裝記錄 | 中和國小503()

  • 我想下載中文化的檔案,註冊都沒寄信到我gmail的信箱。不知道有什麼辦法嗎?

    • 剛才我用忘記密碼的方式重寄似乎可以了。現在的版本是5.0.11,我剛用站長的中文檔放進去,有的可以更新中文,有的似乎不行。不知道有沒有做最近版本中文化的計畫,或是寫個教學教一下怎麼把它中文化,謝謝囉。

      • 應該是版本的問題,所以有些英文就沒有被中文化,我已經很久沒用這個插件了,所以中文化的部分也沒再更新了,你直接把 lang/fbconnect-zh_CN.mo 轉成繁體即可,zh_CN是簡體字

    • 你直接到官網下載最新版本,將 lang 目錄中的 fbconnect-zh_CN.mo 轉成繁體即可

      PS. fbconnect-zh_CN.mo是簡體

  • 站長~
    好像沒有不需要外掛就可以完美執行的方法
    我的網站用Facebook留言後在Facebook頁面顯示的縮圖都是別篇文章的
    很苦惱~

  • 請問你的近期訪客怎麼改成顯示12個的
    我的只有9個@@

    • 我是沒有改過,應該是跟你 Sidebar 的寬度有關,你試試看

  • 這可以用在WPMU上面嗎?
    教學希望

    • 我沒試過哩,你可以直接試看看啊,不行再移除就好 ^^

  • winterteary

    不会安装FB PLUS。

  • 真是酷的功能..
    想步道還有這種的應用
    佩服佩服

  • 找不到 聯外通的設定頁面
    怪怪~~ 怎麼找都找不到

    • 不懂,在後台不是有 facebook 選項?

  • 原木大,我安裝後可以正常顯示,但進入首頁後,要顯示facebook相關的東西都很慢~
    不知道是什麼原因??
    (PS:那個讚按鈕不是外掛,是我自己貼語法到php裡,所以比較快)
    我的網址 http://blog.oos.tw

    • 建議安裝 Facebook Connect 3.0 版本

      • 我是裝最新版3.07沒錯
        fbconnect_3_0_7.zip
        是那裡出問題嗎?

      • 我改回2.52版就變快了~
        是不是3.07有問題~

      • 可先至官方下載原版本:http://www.sociable.es/facebook-wordpress-plugin-3-0/
        重新上傳並啟用原版本,不要進行任何程式修改與中文化,然後再試試

        • 我 3.0.7 中文的 mo 及 po 檔案,是從 2.5.2 更新過來的,會是這個問題嗎?其實我也覺得用了 3.0.7 真的比 2.5.2 還要慢。

        • 基本上語系檔是不會有影響,3.0.7版本是配合FB改版與WP3.0所升級的,目前還是beta版,所以不保證每個人使用都沒有問題。
          經小弟測試,若是使用IE瀏覽器,開啟網頁時可能會較慢,因為FB改版的關係,引入的JS不同,這多少都會影響IE瀏覽器載入速度,畢竟IE的設計對JS解析較不理想,IE瀏覽器的解析標準都跟別人不一樣,其他瀏覽器皆正常。

  • 中文的檔404了
    請你mail一份給我可以嗎?

  • peter

    原木大大謝謝你的說明喔~
    可以請你也mail一份中文版的facebook connect嗎? 謝謝

  • 感謝你的教學

  • 這個插件堆文到FB之中文亂碼問題已有解決方法了,詳這篇 http://once.beau.tw/2010/07/30/1905/ 文章。

  • 大大請問你的facebook connect 的版本是多少呢? 我的3.0.7 總是搞不定

    • 我的也是用 3.0.7 版本,目前用除了將文推到FB中文會是亂碼外,其餘都正常哩。

  • 大大請也可以給我 中文版嗎? 我安裝完也全都是英文 而且推文裡面還亂碼= =

    我搞了快一個月也我也搞不定 麻煩您了~ 辛苦了 謝謝!!!

  • 安安 請問一下為何我安裝完 fbconnec 都是英文的呢?
    有中文版嗎? 還有 我按照順序設定完成後,為何在前台要connec 時 說載入頁面出現錯誤呢?
    不知是那出了問題,還有朋友有說,發表完後 為何在fb上會出現亂碼?

    😡 😡 😡

    • 可是我都沒有發生過你所說的情形,中文版你要的話,我可以 Mail 給你我的,另外我張貼在FB不會出現亂碼ㄛ,你部落格是用 utf-8 嗎?

  • 😛

  • 膽小鬼

    如果問了笨問題,請見諒,
    用哪種方式登錄比較好呢?
    因為我搞不清差異,好像都
    沒差呀~ 哈哈~

    • 晚安,如果還沒有在我們部落格註冊,是無須註冊就可以直接用FB帳號登入,如果已經在我們部落格註冊過,就沒有差 ^^

  • 膽小鬼

    好厲害喔~

    • 膽小鬼晚安,歡迎你也用FB帳號登入啊,祝周末於快哦 ^^

  • 昨天安裝設定的好辛苦,終於把問題找出了,歡迎大家使用Facebook來登入我們的部落格哦!