MUKI space*

現在社群網站的服務非常多，每個人在每個網站都有專屬的帳號，所以我們總希望可以在部落格顯示這些資訊，當然現在很多網站都可以讓大家申請這樣的服務，只要輸入你每個社群網站的帳號，就會丟出一串語法讓你貼入部落格。

只是有時候某些社群網站過於冷門，你找不到帳號可以輸入，加上這些服務通常都是外國居多，所以他們也不會增加台灣的社群網站；又或者他給你的語法過長，版面沒辦法依你自己的喜愛做修改，總會讓大家覺得有些困擾。

「這時候如果我們可以自己做一個社群名片就好了！」你會不會常有這樣的想法呢？其實製作社群名片非常的簡單，只要簡單的幾個步驟就可以了。

社群名片主要包含兩個東西：一個是社群的連結，另一個則是代表性的圖示。

社群的連結想必大家都已經準備妥當了，只要你擁有這個社群的帳號，當進入你專屬頁面的同時上方的網址列就是你的社群連結。所以我們需要的就是他的代表性圖示。

索取代表性圖示

通常一個網站的代表性圖示都會顯示在「我的最愛」這個icon上，就像是twitter的、delicious的，只要是夠大的社群網站幾乎都會有個專屬的icon，所以我們只要把這個icon下載回來就好了。

這邊舉兩個例子，告訴大家如何將社群網站的icon擷取下來：
1.twitter: 首先我們進入twitter的首頁，接著按下滑鼠右鍵→選擇「檢視原始碼」，搜尋「favicon」會找到一串網址列(http://assets1.twitter.com/images/favicon.ico)，而這串網址列就是icon所在的位置，請將他下載回你的電腦

2.Delicious: 再舉第二個網站做例子，前面的twitter我們可以很直覺就發現他的icon位置，而現在的這個例子則是要花一點功夫。同樣檢視原始碼搜尋「favicon」找到了以下這串語法: link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" 找是找到了，可是我們發現他前面沒有http:// 耶，這樣要怎麼知道他的正確位置呢？

這就是所謂的絕對路徑以及相對路徑的差別，絕對路徑會明確告訴你他的位置在哪(就像twitter)，相對路徑則是像delicious一樣。

這邊只要抓到一個訣竅：我們是在那裡看他的原始碼？我們是在delicious的首頁看他的原始碼，顯示的icon位置是/favicon.ico，所以最簡單的辨別方式就是把「delicious的首頁網址」+「icon位置」=「http://delicious.com//favicon.ico」將合併後的網址打到網址列，是不是就會出現他的icon圖案啦!!把它下載到自己的電腦吧。

將ico轉成png

下載回來的圖片檔名都是ico，他沒辦法直接放到部落格，所以我們要先將圖片轉成png格式。大家可以到ConvertICO.com進行轉換，他支援ico以及png互轉喔。

製作社群名片

轉好之後的png我們需要幫他找個空間上傳，如果你自己的主機還有額外的空間，而且不怕流量問題，那我當然建議你直接上傳到主機。另外也提供大家可以將檔案丟到google page。

假設我要放上twitter的名片，我的社群網址為http://twitter.com/muki，icon網址為http://mukispace.googlepages.com/twitter.gif，在支援html的情況下我可以這樣寫：

通常icon的大小都會設置在長*16、寬*16的狀況下，但是有時候有的icon卻不依照這個規則走，我們就可以直接在img的標籤底下幫他設定height="16" width="16"

其他的社群icon製作方式都依此類推，最後彙集在一起就會發現你做好了一個簡單的社群名片啦!!