小攻城師的戰場筆記

近年滿流行在網站內容頁加上臉書 (facebook)、推特 (twitter)、噗浪 (plurk) 三顆推文按鈕，這三顆按鍵我取其字首，簡稱為 FTP 功能鍵。 XD

我把這三顆按鈕做成一組小小的 jQery plugin，使用方式如下。 :)


1. 將下列 JavaScript 存成 socialMedia.js。

// 產生推薦至plurk, twitter, facebook 的連結圖示與內容
(function ($) {
   // define the new plugin for the function "My favorite"
   $.fn.socialMedia = function (options) {
       // 產生預設值
       var defaults = {
           title: document.title,
           contentUrl: location.href
       };
       // 取得頁面上另行自訂的標題與內容 (如果有的話)
       var options = $.extend(defaults, options);
       // 取得清除特殊 tag 的標題
       var regex = new RegExp("<[^<]*( )*/*>", "gi");
       defaults.title = encodeURIComponent(defaults.title.replace(regex, "")); // 清除特殊 tag 並編碼
       defaults.contentUrl = encodeURIComponent(defaults.contentUrl);          // 網址編碼

       // [function] 推薦到 Facebook
       post2Facebook = function () {
           defaults.contentUrl += encodeURIComponent("&v=" + new Date().getTime());
           var _href = 'http://www.facebook.com/sharer.php?u='.concat(defaults.contentUrl).concat("&t=").concat(defaults.title);
           window.open(_href, 'fbShare', 'toolbar=0,status=0,width=650,height=400');
       };

       // [function] 推薦到 twitter
       post2Twitter = function () {
           void (window.open('http://twitter.com/home/?status='.concat(defaults.title).concat(' ').concat(defaults.contentUrl)));
       };

       // [function] 推薦到噗浪
       post2Plurk = function () {
           void (window.open('http://www.plurk.com/?qualifier=shares&status='.concat(defaults.contentUrl).concat(' (').concat(defaults.title).concat(')')));
       }

       // 將按鈕加入到頁面中
       return this.each(function () {
           var socialMedia = '<a href="javascript:post2Plurk();" class="jqSocialMediaP" title="把這則訊息推薦到 plurk！"><span>把這則訊息推薦到 plurk！</span></a>'
                           + '<a href="javascript:post2Twitter();" class="jqSocialMediaT" title="把這則訊息推薦到 twitter！"><span>把這則訊息推薦到 twitter！</span></a>'
                           + '<a href="javascript:post2Facebook();" class="jqSocialMediaF" title="把這則訊息推薦到 facebook！"><span>把這則訊息推薦到 facebook！</span></a>';
           $(this).append(socialMedia);
       });
   };
})(jQuery);

2. 在 HTML 頁面上想要顯示推文工具列的位置，增加一組 DIV，例如：

<div id="socialMedia"></div>

3. 在 HTML 中任意位置增加下列 JavaScript：

<!-- 引用剛剛儲存的 jquery-socialmedia.js  -->
<script language="javascript" type="text/javascript" src="javascript/jquery-socialmedia.js"></script>

<!-- 將 plugin 產生的結果塞進前一個步驟設定的 DIV 裡頭 -->
<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        // 呼叫 socialMedia plugin：
        // $("剛才設定的 html tag ID").socialMedia();
        $("#socialMedia").socialMedia();
    });
</script>

--
一些設計上的心得：

1. 由於噗浪和推特有字元數上限，建議推薦網址時可以做縮址處理，多出來的字元空間就可以拿來寫一些更有意義的文字。 
2. facebook 推薦按鈕的屬性值是個預設值，當 facebook 的轉介頁面抓不到網站本身的 meta 設定時，才會使用我們設定的屬性。這部分我之前也有提過囉。