類別 | 學習心得

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

歡迎大家使用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時造成登入FB始終對應不到應用程式的主因一直指向粉絲的專頁,這個超讓原木抓狂的,想說明明API金鑰跟秘密都設定對了,為何都無法指向我在FB的應用程式,後來原木就利用Java Script另開新視窗,就解決囉!

第2個問題很簡單,換掉 1 Blog Cacher,改用 WP Super Cache,在裝好該插件後,找到部落格根目錄 .htaccess 檔案下面的敘述:

RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress|wp-postpass_).*$

將她改成:

RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress|wp-postpass_|YOURAPIKEY_user).*$

其中「YOURAPIKEY」就是輸入你Facebook應用程式的API金鑰,記得後面要加「_user」,這樣在使用Facebook Connect登入時就不會被快取。

原木特將遇到的問題筆記下來,希望能對安裝Facebook Connect的人有所幫助。^^ 

☆★相關文章★☆
使用Facebook Connect將WP與FB完整結合(上)
昨天花了一整天終於將Wordpress與Facebook完整結合,這是利用Sociable!的「Facebook Connect」插件達成的,其實安裝及設定過程非常簡單,只是原木遇到一些狀況,所以花了一整天把問題找出,現在大家可以使用Facebook的帳號登入我們的部落格囉,連評論都可以同步發表到FB哦!  這個插件請直接到Sociable!的部落格 → 下載 ←,在啟動該插件之前,請先到 http://www.facebook.com/developers/ 建立一個 Application,相關步驟如下:1. 到上面網址的頁面後,點選「+ 建立新的應用程式」。2. 輸入「應用程式名稱」並點選同意Facebook使用條款後,就完成該應用程式的建立囉!3. 應用程式建立好後,會出現下面的畫面,而該插件會使用到「API金鑰」及「秘密」這2個數值,而「秘密」這個數值就是秘密,不能流落出去喔!4. 接著在「聯外通」設定「聯外通網址」及「Base Domain」這2個值,聯外通網址就是部落格的網址,但記得要在網址後面加一個「/」,而Base Domain就是輸入你申請的網域嚕!  以上,就是在Facebook建立一個應用程式的步驟,接著將該插件上傳到 wp-content/plugins 並啟動後,在下面的畫面輸入「API金鑰」及「秘密」這2個數值就完成安裝,最後再去「外觀→模組」將「FacebookConnector」拉到側邊欄就大公告成啦!歡迎大家使用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 ~
繼續閱讀
如何在 WordPress 做一個歡迎頁
今天開始來到我們家有一個新的大門了,由於我們有兩個部落格系統,舊的部落格是用 F2cont 架的,新的則是現在使用的 Wordpress,為了讓大家選擇要去我們的哪一個家,所以好友小潘幫我們家設計了一個歡迎頁。   Wordpress 的首頁是抓自己的 index.php,所以大家輸入網址後一定是讀取 index.php,這樣歡迎頁的 index.html 就無法當作第一個頁面來讀取,而 Wordpress 又會一直循環調用 index.php,如果更改 .htaccess 將首頁設定使用 index.html,那麼落格的文章就叫不出來了,怎麼辦呢?很簡單 ... 以下 Step by step: 將下面的代碼增加到根目錄的 .htaccess: 修改 wp-includes/rewrite.php 檔案,找到下面的敘述: 修改成: 以上就完成囉,現在一進我們家就會先讀取 index.php 歡迎頁,而也告訴 Wordpress 首頁調用 home.php,而實際上也沒有 ...
繼續閱讀
修正推文到FB中文亂碼問題(Facebook Open Graph WordPress Plugin 3.0.7)
有在使用 Sociable! 的 Facebook Open Graph WordPress Plugin 3.0.7 版本的網友應該都有一個痛,就是將文章推到 Facebook 時,中文會變成亂碼,這個問題已經被 Derek 大大解決囉!   解決這個方法有二,直接下載 Derek大大提供的檔案,覆蓋掉 wp-content/plugins/ fbconnect/ fbConnectInterface.php 就可以了,或者自行修改 fbConnectInterface.php 檔案,方法如下: 找到 103 及 104 行: 將他修改成: 仔細看一下,其實就是多了「ENT_COMPAT, "UTF-8"」敘述,告訴他要使用 UTF-8 的編碼啦! ...
繼續閱讀
將WordPress標籤雲彩色化
今天在「阿茂的隨手札記」看到一篇如何「輕鬆將WordPress標籤雲彩色化」的文章,這是不需要安裝Plugin就可以實現,方法非常簡單,只要將Code插入使用中的佈景即可達成,原木特將此方法收錄,供以後自行參考使用,也分享給Wordpress使用者。   WordPress預設的標籤雲只有一種表現方式,就是所發文章的標籤雲類別越多,該標籤的字體越大,但是這樣顯得非常單調,而以下的方法則是不需要經過Plugin就可以讓標籤雲彩色化哦!   將下面Code插入 wp-content/themes/目前使用佈景/functions.php 檔案中的 <?php 之後: 如此即完成讓標籤雲彩色化,而一般預設的標籤雲語法是 < ?php wp_tag_cloud(); ?>,而籤雲彩色化的顯示方式有幾個調用語法: (1)smallest︰最小(少)篇章標籤字體。 (2)largest︰最大(多)篇章標籤字體。 (3)unit︰字體單位,例如px、pt。 (4)number︰顯示標籤數量。 (5)orderby︰文章分類中的標籤。 (6)exclude︰排除哪個標籤。 (7)include︰包含哪個標籤。 提供一個實作的語法如下(以&作連接,而=後面沒有數字則表示使用預設值):
繼續閱讀
自動為上傳的圖片加上浮水印
這是原木找了好久終於找到這個方便又實用的Plugin,可以使用圖片或文字當作浮水印,廢言不多說了,來介紹如何安裝使用嚕!   請先下載檔案,解壓縮後放到 wp-content/plugins 並到後台啟用她,之後編輯 wp-admin/includes/media.php 這個檔案,在 // Save the data 前加入下面的 code: 爾後每次升級完 Wordpress,記得要再到該檔案加入上面的 Code 喔,不然圖片的浮水印功能會沒有作用喔,這也是原木寫這篇文章的用意之一,提醒自己更新 Wordpress 後要將 Code 加入該檔案。下面放上文字及圖片浮水印的效果: 文字浮水印    圖片浮水印    設定的方法很簡單,原木就不再特別介紹了,有問題的話可以留言給我喔。另外經原木測試1「文字浮水印」只能支援英文,中文會變成亂碼,而2使用「圖片浮水印」,請將 wp-content/plugins/watermark/ 下的 stempel.png 換成您想要加的 LOGO。 ~ That’s all ~
繼續閱讀
啟動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 ...
繼續閱讀
使用CSS3產生圓角美化網站
在還沒有CSS3的時候,要讓網站的表格圓角化,需要載入使用JQuery Corner Plugin來達到效果,前提還必須把瀏覽器的Javascript打開,現在各家瀏覽器都支援CSS3(不含IE8以前的版本),只要使用簡單的語法就可以達到圓角效果。 CSS3的圓角效果主要是用「border-radius」基本語法,如果要支援Chrome是「-webkit-border-radius」,Firefox則是「-moz-border-radius」,所以同時使用這3個語法來支援各家瀏覽器(不含IE8以前的版本),至於4個角都設定同一個角度或設定各別不同的角度,語法則大同小異,以下介紹使用方法: 4個角都設定同一個角度: 4個角設定各別不同的角度: 下面是原木將Wordpress部落格版面圓角化前、後的對照圖,圓角化的視覺上就是讓人看了舒心,看看圓角化後的部落格,由於剛接觸 Joomla,所以目前正在研究如何將 Joomla 的佈景及sidebarright圓角化,還請先進們若看到此篇文章提點提點,感謝〜 如果懶得打這麼多繁複的語法,也可以利用 CSS Border Radius Generato 網站,只要在4個角輸入所需要的圓角半徑,就會自動產生CSS3的語法哦。 Border Radius網址:http://border-radius.com
繼續閱讀
好用的JCE Editor網頁編輯器
Joomla預設的編輯器是TinyMCE,雖然這個編輯器也是所見所得,但功能上比較陽春,很多網友極力推薦另一套「JCE Editor」所見所得編輯器,他的功能比較齊全,表格編輯非常方便,也支援拖拉放的方式上傳檔案,Pro版本雖然是要錢,但Free版本就已經很夠用了,經原木實際使用,真的是比TinyMCE好用太多了,以下介紹一些JCE Editor好用的功能: 壓縮Javascript及CSS加速載入動作,亦可啟動GZip壓縮:在後台的管理介面依序點選「元件」→「JCE管理」→「全域組態」,在「壓縮選項」依需求啟動項目。 可嵌入Youtube影片:在後台的管理介面依序點選「元件」→「JCE管理」→「設定檔」→「Default」(以下這個動作簡稱編輯設定檔),在「功能 & 版面配置」的「額外功能」,將「媒體支援」打勾。 可直接在文章編輯的 Code 區支援iframe語法:在編輯設定檔的「外掛參數」→「媒體支援」,將「允許 Iframes」勾選「是」。 更改檔案目錄路徑及上傳檔案大小:在編輯設定檔的「編輯器參數」→「檔案系統」依需求變更,如下圖框紅處。 支援Javascript、CSS及PHP語法,直接在Joomla後台寫入這些程式語法:在編輯設定檔的「編輯器參數」→「進階」依需求啟動項目。 在JCE編輯器增加中文字型:在編輯設定檔的「外掛參數」→「字型家族選取」依需求新增字型,下面的字型是原木新增的字型,而且是不用另外安裝字型或從網站上載入字型哦。 以下提供原木新增中文字型的設定值,直接複製、貼上即可,新增好後就可以在JCE Editor看到該字型選項了。 微軟正黑體:Microsoft JhengHei 微軟雅黑:Microsoft YaHei 明瞭體:Meiryo 標楷體:DFKai-SB 楷體:KaiTi 黑體:SimHei 仿宋:FangSong 新宋體:NSimSun 宋體:SimSun 新細明體:PMingLiU 細明體:MingLiU  
繼續閱讀
WordPress評論回應郵件通知
這還是在《Willin Kan 的博客》挖到的寶,也就是當A回應B發表的評論,系統會發一封E-Mail通知B,這樣可以增加該篇文章的評論互動,當然,你的伺服器一定要有 mail() 功能哦!   這個不是插件,只要修改你使用中佈景的 functions.php 檔案,將代碼放置 <?php ..... ?> 區域內即可,《Wordpress評論回應郵件通知》的代碼有三種,請依需求點取下面的標題: 有勾選欄位,由訪客決定是否要回應郵件通知。 無勾選欄位,由管理者決定在什麼條件下發郵件。 所有回覆都發郵件。 先補充說明,如果你使用的佈景主題,評論式樣是使用 comments 和 trackbacks/pingbacks 分離(如原木使用的主題),請將下面所有的: 修改成:   有勾選欄位,由訪客決定是否要回應郵件通知 (會在模板自動加勾選欄,如果不想自動加,可把後面一小段刪除。) 無勾選欄位,由管理者決定在什麼條件下發郵件 所有回覆都發郵件 ~ That's all ~
繼續閱讀
使用Facebook Connect將WP與FB完整結合(上)
使用Facebook Connect將WP與FB完整結合(下)
如何在 WordPress 做一個歡迎頁
修正推文到FB中文亂碼問題(Facebook Open Graph WordPress Plugin 3.0.7)
將WordPress標籤雲彩色化
自動為上傳的圖片加上浮水印
啟動WordPress的Gzip網頁壓縮功能
使用CSS3產生圓角美化網站
好用的JCE Editor網頁編輯器
WordPress評論回應郵件通知


共有 7 則回應 在 “使用Facebook Connect將WP與FB完整結合(中)”

  1. Maybo Mary 說:

    Show comments login cant display why! Help

  2. louis 說:

    原木你好

    我看到您快取發生的問題,我在使用kpicasa gallery也有遇到這樣的問題,我現在只能把快取停用,這樣我的相簿才能夠顯示出來,請問你有什麼方法可以解決嗎?

    謝謝

    • 原木 說:

      你好啊,我目前快取遇到的問題,只有在首頁用FB登入時,偶爾要refresh頁面一次才會登入,我目前設定是不讓首頁快取,至於我是用的相簿(NextGEN Gallery)是沒有這個問題,我沒有使用kpicasa gallery,所以你可能要爬爬文或問其他高手了,抱歉沒能幫到你的忙。

  3. Abram Chuang 說:

    這個太讚啦!我也要在我家的網站上設定這個! 😀

  4. 原木 說:

    原木特將安裝Facebook Connect遇到的問題筆記下來,希望能對大家有所幫助。^^

引用/通告


發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

BloggerAds

Subscription

輸入你的電子郵件地址訂閱網站的新文章,使用電子郵件接收新通知。

一起加入其他 1,914 位訂閱者的行列

Stickers

部落格達人009認證徽章Creative Commons License