基于自定义参数社交分享

本文简要介绍基于PHP和JavaScript的社交分享代码的实现；着重举例：Facebook、Twitter、Google+、Linkedin、Pinterest及新浪微博。
前端HTML基于Uikit的uk-dropdown方法。

以下是HTML5代码：

<div class="catItemShareBlock" data-uk-dropdown> 
  <!-- This is the element toggling the dropdown -->
  <div class="caTshare"> <i class="uk-icon-share"></i> <span>分享</span> </div>
  <!-- This is the dropdown -->
  <div class="uk-dropdown uk-dropdown-small uk-dropdown-flip">
    <ul class="uk-nav uk-nav-dropdown">
      <li class="share_title"><span>分享到</span></li>
      <li class="facebook_share"> <a class="prettySocial" href="#" data-type="facebook" data-title="<?php echo $this->item->title; ?>" data-description="<?php echo strip_tags($this->item->introtext); ?>" data-url="<?php echo 'http://'.$_SERVER['HTTP_HOST'].$this->item->link; ?>" data-media="<?php echo 'http://'.$_SERVER['HTTP_HOST'].$this->item->image; ?>"> <i class="uk-icon-facebook"></i> <span class="share_text">脸谱分享</span> </a> </li>
      <li class="twitter_share"> <a class="prettySocial" href="#" data-type="twitter" data-title="<?php echo $this->item->title; ?>" data-description="<?php echo strip_tags($this->item->introtext); ?>" data-url="<?php echo 'http://'.$_SERVER['HTTP_HOST'].$this->item->link; ?>" data-media="<?php echo 'http://'.$_SERVER['HTTP_HOST'].$this->item->image; ?>"> <i class="uk-icon-twitter"></i> <span class="share_text">推特分享</span> </a> </li>
      <li class="google_share"> <a class="prettySocial" href="#" data-type="googleplus" data-title="<?php echo $this->item->title; ?>" data-description="<?php echo strip_tags($this->item->introtext); ?>" data-url="<?php echo 'http://'.$_SERVER['HTTP_HOST'].$this->item->link; ?>" data-media="<?php echo 'http://'.$_SERVER['HTTP_HOST'].$this->item->image; ?>"> <i class="uk-icon-google-plus"></i> <span class="share_text">谷歌+分享</span> </a> </li>
      <li class="weibo_share"> <a class="prettySocial" href="#" data-type="weibo" data-title="<?php echo $this->item->title; ?>" data-description="<?php echo strip_tags($this->item->introtext); ?>" data-url="<?php echo 'http://'.$_SERVER['HTTP_HOST'].$this->item->link; ?>" data-media="<?php echo 'http://'.$_SERVER['HTTP_HOST'].$this->item->image; ?>"> <i class="uk-icon-weibo"></i> <span class="share_text">微博分享</span> </a> </li>
    </ul>
  </div>
</div>

以下是jQuery实现代码：

/**
 * jQuery prettySocial: Use custom social share buttons
 * Author: 虾咪填海 &lt;hgyynkg@126.com&gt;, shrimsea.com
 */
(function(a) {
    a.fn.prettySocial = function() {
        var b = {
            pinterest: {
                url: "http://pinterest.com/pin/create/button/?url={{url}}&amp;media={{media}}&amp;description={{description}}",
                popup: {
                    width: 685,
                    height: 500
                }
            },
            facebook: {
                url: "https://www.facebook.com/sharer/sharer.php?s=100&amp;p[title]={{title}}&amp;p[summary]={{description}}&amp;p[url]={{url}}&amp;p[images][0]={{media}}",
                popup: {
                    width: 626,
                    height: 436
                }
            },
            twitter: {
                url: "https://twitter.com/share?url={{url}}&amp;via={{via}}&amp;text={{description}}",
                popup: {
                    width: 685,
                    height: 500
                }
            },
            googleplus: {
                url: "https://plus.google.com/share?url={{url}}",
                popup: {
                    width: 600,
                    height: 600
                }
            },
            linkedin: {
                url: "https://www.linkedin.com/shareArticle?mini=true&amp;url={{url}}&amp;title={{title}}&amp;summary={{description}}+&amp;source={{via}}",
                popup: {
                    width: 600,
                    height: 600
                }
            }
            weibo: {
                url: "https://service.weibo.com/share/share.php?url={{url}}&amp;title={{title}}",
                popup: {
                    width: 450,
                    height: 400
                }
            }
        },
        d = function(f, e) {
            var h = (window.innerWidth / 2) - (f.popup.width / 2),
            g = (window.innerHeight / 2) - (f.popup.height / 2);
            return window.open(e, "", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=" + f.popup.width + ", height=" + f.popup.height + ", top=" + g + ", left=" + h)
        },
        c = function(f, g) {
            var e = f.url.replace(/{{url}}/g, encodeURIComponent(g.url)).replace(/{{title}}/g, encodeURIComponent(g.title)).replace(/{{description}}/g, encodeURIComponent(g.description)).replace(/{{media}}/g, encodeURIComponent(g.media)).replace(/{{via}}/g, encodeURIComponent(g.via));
            return e
        };
        return this.each(function() {
            var i = a(this);
            var g = i.data("type"),
            f = b[g] || null;
            if (!f) {
                a.error("Social site is not set.")
            }
            var h = {
                url: i.data("url") || "",
                title: i.data("title") || "",
                description: i.data("description") || "",
                media: i.data("media") || "",
                via: i.data("via") || ""
            };
            var e = c(f, h);
            if (navigator.userAgent.match(/Android|IEMobile|BlackBerry|iPhone|iPad|iPod|Opera Mini/i)) {
                i.bind("touchstart",
                function(j) {
                    if (j.originalEvent.touches.length &gt; 1) {
                        return
                    }
                    i.data("touchWithoutScroll", true)
                }).bind("touchmove",
                function() {
                    i.data("touchWithoutScroll", false);
                    return
                }).bind("touchend",
                function(k) {
                    k.preventDefault();
                    var j = i.data("touchWithoutScroll");
                    if (k.originalEvent.touches.length &gt; 1 || !j) {
                        return
                    }
                    d(f, e)
                })
            } else {
                i.bind("click",
                function(j) {
                    j.preventDefault();
                    d(f, e)
                })
            }
        })
    }
})(jQuery);

以下是css：

div.catItemShareBlock {position: relative;margin-top: 10px;text-align: center;}
div.catItemShareBlock .uk-dropdown {right: -20px;min-width: 97px;}
div.catItemShareBlock .caTshare {color: #888;}
div.catItemShareBlock .uk-dropdown ul li {background: #F6F6F6;margin-bottom: 1px;text-transform: uppercase;font-size: 12px;}
div.catItemShareBlock .uk-dropdown ul li a {position: relative;}
div.catItemShareBlock .uk-dropdown ul li a:focus, div.catItemShareBlock .uk-dropdown ul li a:hover {box-shadow: none !important;}
div.catItemShareBlock .uk-dropdown ul li a i {position: absolute;left: 9px;top: 8px;width: 16px;}
div.catItemShareBlock .uk-dropdown ul li.share_title {padding: 6px 0;text-transform: uppercase;font-size: 12px;background: #16a085;color: #ecf0f1;}
div.catItemShareBlock .uk-dropdown ul li.twitter_share:hover {background: #55ACEE !important;}
div.catItemShareBlock .uk-dropdown ul li.facebook_share:hover {background: #2E4486 !important;}
div.catItemShareBlock .uk-dropdown ul li a:hover {color: #fff !important;}
div.catItemShareBlock .uk-dropdown ul li.google_share:hover {background: #D03C2E !important;}
div.catItemShareBlock .uk-dropdown ul li.weibo_share:hover {background: #FA2F2F !important;}
div.catItemShareBlock .uk-dropdown ul li.print_share:hover, div.catItemShareBlock .uk-dropdown ul li.email_share:hover {background: #16A085;color: #fff;}