v 用FBML工具來製作你的Facebook粉絲歡迎頁面---撰寫篇 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...