近年滿流行在網站內容頁加上臉書 (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 設定時,才會使用我們設定的屬性。這部分我之前也有提過囉。



arrow
arrow
    全站熱搜

    小攻城師 發表在 痞客邦 留言(0) 人氣()