程式設計雜筆: 8月 2011

Facebook 常見的社交按鈕有兩種：Facebook Share 與 Facebook Like，不過前者已經不在 Facebook 官方提供的 Plugin 列表中，連到舊的 Facebook Share 說明頁面會自動導向 Facebook Like 的說明頁面，看起來 Facebook 似乎有意以 Like 取代 Share 的地位。雖然如此，兩種功能還是有其不同的定位，目前也都能夠共存並用。關於兩者差異的說明，可以參考這篇文章（英文）。下面則是 Facebook 與 twitter 各種社交功能與外觀的顯示範例與分享代碼。

Facebook Share 的分享代碼

按鈕配置

<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">分享</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

方塊配置

<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">分享</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Facebook Like 的分享代碼

標準配置

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=tahoma&amp;height=20&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:20px;'></iframe>

按鈕配置

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=tahoma&amp;height=20&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px;'></iframe>

方塊配置

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=box_count&amp;width=90&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=tahoma&amp;height=63&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:63px;'></iframe>

twitter 的分享代碼

水平按鈕

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<a class='twitter-share-button' href='http://twitter.com/share' expr:data-url='data:post.url' expr:data-text='data:post.title'>Tweet</a>

垂直按鈕

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<a class='twitter-share-button' href='http://twitter.com/share' expr:data-url='data:post.url' expr:data-text='data:post.title' data-count='vertical'>Tweet</a>

參考資料

作為一個以程式技術為主的網誌，文章中免不了得出現一兩段程式碼。原本我使用 github 的 gist 服務來將程式代碼內嵌到網頁（[使用效果見此]），另一方面 gist 也可以用來當作是自己的小小代碼備忘錄，許多程式碼片段直接丟上去就好了，非常便利，可說是一舉兩得。

不過有時候只是想要顯示幾行代碼，這些代碼也許不具有完整性，如果將代碼一股腦兒地全丟上 gist，總有一天代碼庫會變成亂葬崗。所以除了 gist 之外，我也找了其他網頁貼程式碼的方案。原本前幾天已經物色好了 SyntaxHighlighter，打算趁週末有空時來實裝測試。結果因為在安裝前四處蒐集資訊，意外又發現到 google-code-prettify，看了一下立刻就變心決定改用 google-code-prettify。

其實就功能上而言，SyntaxHighlighter 遠遠勝過 google-code-prettify，之所以選擇了 google-code-prettify，最主要的原因就在於「簡單」。兩者的比較如下（分別簡稱為 GCP 和 SH）：

遇到過長的程式碼，SH 可以顯示出 Scrollbar，維持原排版；而 GCP 則會強制換行。
SH 預設有行號，GCP 也可加入行號，但不方便。
兩者都支援顏色主題。包含預設的在內，SH 現有 7 種顏色主題，GCP 則有 4 種。
SH 支援 23 種程式語法，GCP 預設內建的也有 20 種左右。
就安裝上，GCP 只要加入兩個檔案，就可以處理大多數的語言；SH 則除了得加入核心的 CSS 與 JavaScript 檔共三個檔外，還必須加入對應使用程式語言的 JavaScript。
使用上兩者差異不大。SH 除了 <pre> 標籤外也提供了 <script> 的使用方式；GCP 則是可以省略語法指定，自動判斷。

由於我經常跨不同程式語言撰寫，因此 SH 在安裝上對我而言就顯得比較不便。雖然新版提供了 Autoloader 來動態決定要載入哪些程式語言語法的 JavaScript，不過我最後還是選擇單純一點的 GCP。GCP 對我而言最大的缺點就是沒有行號，我在 IDE 上寫 code 一定會打開行號顯示，不過反正網頁上顯示的代碼行數都不多，沒有行號這一點倒是還可以接受。

以下就是我的 google-code-prettify 安裝筆記：

Step 1.

到 google-code-prettify 首頁下載好檔案後，解壓放到自己的網路空間上。我是放到 Dropbox 的 public 資料夾下。

Step 2.

然後再修改自己網頁的範本。有兩個地方要修改，一個是在 </head> 標籤之前加上 css 與 javascript 的載入；另外一個是在 <body> 標籤內加上 onLoad 函式。

<head>
  <-- 中略 -->
  <-- 1. 在 /head 標籤前加入下面兩行 -->
  <link href="http://my.url.to/prettify.css" rel="stylesheet" type="text/css"/>
  <script src="http://my.url.to/prettify.js" type="text/javascript"/>
</head>

<-- 2. 在 body 標籤內加入 onload 設定 -->
<body onload='prettyPrint()'>
</body>

Step 3.

接下來只要在想要使用代碼的地方，用 <pre> 或 <code> 包起來，並且設定 class 為 prettiprint 即可。google-code-prettify 會自動判斷裡面的代碼是屬於何種語言。

<pre class="prettyprint">
#include <stdio.h>

int main(void)
{
   printf("Hello, world!\n");
   return 0;
}
</pre>

上面這段代碼的結果如下：

#include <stdio.h>

int main(void)
{
   printf("Hello, world!\n");
   return 0;
}

如果想要自己指定區塊內的程式語言，可以再加上 lang-*，其中 * 要替換成該程式語言的代碼。

<pre class="prettyprint lang-html">
  <-- HTML 的場合 -->
</pre>
<pre class="prettyprint lang-c">
  /* C 的場合 */
</pre>
<pre class="prettyprint lang-py">
  " Python 的場合
</pre>

目前支援的代碼有

"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl"

看得出來是以程式碼的副檔名做區隔。基本上常見的幾乎都包含在裡面了。

參考資訊：

程式設計雜筆

在網頁中嵌入 Facebook 與 twitter 社交按鈕

Facebook Share 的分享代碼

按鈕配置

方塊配置

Facebook Like 的分享代碼

標準配置

按鈕配置

方塊配置

twitter 的分享代碼

水平按鈕

垂直按鈕

參考資料

用 google-code-prettify 在網頁中嵌入代碼

Step 1.

Step 2.

Step 3.