2009年11月12日 星期四

用FBML工具來製作你的Facebook粉絲歡迎頁面---撰寫篇


2010.8.21更新,
未來Facebook已經不再支援FBML語法,所以此篇教學內容已沒有作用,未來是以iFrame語法為支援對象,等綸太郎研究過後再跟大家分享。

上一篇談到用FBML工具來製作你的Facebook粉絲歡迎頁面---安裝篇,接下來就開始來寫FBML的歡迎頁面,FBML改變了HTML的一些用法,刪除及限制一些語法使用,但是可以和你的個人帳號作更為緊密的連接。

FBML允許的Fbml及Html標記語言,請參考Allowed FBML and HTML Tags,這部份對我們製作一個美美的頁面有關係,所以比較重要,當然你也可以自訂你自己的tag(Custom Tags),但目前在實驗階段,有興趣的朋友自己再研究。

【個人資料ID】

首先製作你的粉絲頁面,首先要知道的就是你的uid碼是什麼,這個還蠻好用的,uid就是user id,登入你的帳號,在個人檔案上面,在大頭上面按右鍵查看鏈結網址,就可以看到類似,http://www.facebook.com/album.php?profile=1&id=123456789018882
後面的一長串紅色數字就是你的uid碼,這個當你想呼叫的你的大頭或是個人資料很好用, 當然也可以呼叫別人或是粉絲專頁的資料,相關語法如下:

秀出你的大頭
<fb:profile-pic uid="你的id數字" width="60" height="60" linked="true" />
或是
<fb:profile-pic uid="你的id數字" size="normal"/>


width、height可以自己設定,linked="true",代表滑鼠有超連結作用,可以連到你的個人頁面,如果設linked="false"就不會有超連結作用。
Size=”normal”,設norma則就像FB個人檔案顯示的大小一樣。
秀出你的帳號名字
例如Chang Allen,如果在登入的情形下,你看到的會是you,別人看到的才會是你的名字。
<fb:name uid="你的id數字" />

這個呼叫他人資料的tips可以放在你的粉絲專頁裡,就看你怎麼利用。

【初始語法】

接下來正式寫一個歡迎頁面時,首先將以下語法寫在最前頭,
<div style="position: relative; overflow: hidden">
最後頭再加上</div>
樣式大概就像
<div style="position: relative; overflow: hidden">全部語法內容</div>
就是將你的網頁語法,以一個區塊顯示,裡面你也可以在設定和左右的邊距,例如margin-left:15px;(距離左邊15px的寬度),就是將你寫的全部語法,用以上div語法包覆起來,形成一個區塊,這樣就不會有超過頁面的顧慮,因為有的人可能是將語法從其他html編輯器剪貼過來的,如果超過寬度,可以自動隱藏,版面也不會走樣。

【定義CSS】

你可以自己用html寫頁面,有些會很費功夫,因為有些文字的修飾外觀語法可能是重複的,例如主標題、副標題或是引用的部份,這時我們就像blogger一樣,可以先下自訂文字的外觀CSS,這時就要先宣告他的定義,可參考Facebook Styles說明,例如我們設一個標題的css定義,
<style type="text/css">
.main-title {
font-weight: bold;
font-size:20px;
color: #0094E0;
text-decoration:underline;
}
</style>

就是用<style type="text/css">及</style>將css定義的元素放在裡面,做為宣告的作用,裡面要放幾個定義都可以。

然後你要使用這個.main-title定義時,就像以下這樣將你的文字用div把它包覆起來,
<div class="main-title"> blogger初始準備工作</div>
顯示就如圖下方,


【插入圖片】
<img src="http://圖片網址" width="高度" height="寬度" />

以上是比較重點的語法介紹,一些基礎的語法,你可以參考網路上html的教學幫自己寫一個簡單的頁面,或是利用編輯器將寫好的HTML內容貼到fbml都是可以的,如果不適用的他會秀出來,再將多餘的部分刪除即可。

其實FBML最大的用處是在製作Facebook的應用程式,例如一些遊戲(開心農場等等)、外掛、或是小工具等,對我們初學者或是粉絲頁面擁有者而言,我目前可以做到的就是利用這些語法來幫自己的Fbml網頁放上相片、幻燈片、影片或是音樂mp3等等,讓自己的粉絲專頁更豐富更多元化而已。

下一篇會繼續分享如何在Facebook嵌入影片及幻燈片等多媒體效果的作法。

8 則留言:

  1. 您介紹的很詳細
    謝謝您 我想將FBML的頁面改變整個背景顏色 不知道要如何做(只查出 fb:color的指令 不知如何做)

    回覆刪除
  2. 我只會用html做,應該是將它設成一個表 格區塊,設定背景顏色吧。要更改整個背景我不會,目前分享的就是我知道的。

    回覆刪除
  3. 請問gif檔案有支援嗎
    看到別人的粉絲專業有成功
    自己研究不出來

    回覆刪除
  4. 如果要動畫式的gif檔,目前好像是不支援。

    回覆刪除
  5. 您好
    請問我想放圖片上去怎麼都顯示步出來呢? 謝謝

    回覆刪除
  6. To shi hao,你的圖片空間有接受外連嗎?

    回覆刪除
  7. 綸太郎您好
    我是時報周刊的FB小編,你的網站很受用,但小妹我才學疏淺,有點有看沒有懂,我最近想製作ㄧ則行銷活動,希望粉絲團一進入就先看到你說的歡迎頁面,另外你下面的相關文章:終於申請超火的FB,粉絲募集中,這功能我也想學,可以跟您當面請教ㄧ下嗎!?想邀請您來我們中時集團公司上個課,很願意請你喝個咖啡或吃個飯,感恩喔

    回覆刪除
  8. 這篇用FBML工具來製作你的Facebook粉絲歡迎頁面---安裝篇就有寫到歡迎頁面的設定,文章慢慢看多多試,應該就可瞭解使用,至於面對面教學,因為只是我自己的興趣分享,教學課程無法勝任,也謝謝你的邀約。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能