使用自定按钮来做社会化分享

三个设计网站,Twitter,Facebook,Google Plus,均是在国内不存在的网站。没关系,我喜欢用,也用的最多,所以就先只放着三个。

在文章单页归档的页面,在文章的底部,版权说明的下面就是分享按钮,如下。
share-buttons.png

三个按钮,依次是Facebook,Twitter,和Google+。

这三个按钮代替了之前我所设置的,利用Addthis的通用插件所设置的社会化分享按钮,Addthis 的做法是会载入一段 JS ,根据需要执行并显示分享按钮或者其它的的分享统计。

现在的三个按钮相对简单,采用了之前在土木坛子看到的理念,开始尝试的时候想用他的代码的,但后来还是用了直接的图片按钮,加上利用MovableType的模板,把网址和标题等直接写入到链接中的办法。所以说更加简单,更加直接,没有JS。

图片我用的是一个图片包里的图片,圆形的图标文件,png。

rounded-icons.png 这些图标可以到Dreamstale网站免费下载,免费使用到不管是个人项目还是商业项目。 MovableType中的模板里的代码如下:


<div class="share-box">
<div class="share-note">分享到:</div>
<a href="https://www.facebook.com/sharer/sharer.php?u=<$MTEntryPermalink encode_xml="1"$>%23facebook"  onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=<$MTEntryPermalink encode_xml="1"$>%23facebook','popup','width=626,height=436,scrollbars=yes,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img class="icons"
  src="//seog2soft-106e.kxcdn.com/icons-rounded/facebook-dreamstale25.png" alt="Share on Facebook"/></a>


<a href="https://twitter.com/intent/tweet?text=<$MTEntryTitle remove_html="1"$>&url=<$MTEntryPermalink encode_xml="1"$>" onclick="window.open('https://twitter.com/intent/tweet?text=<$MTEntryTitle remove_html="1"$>&url=<$MTEntryPermalink encode_xml="1"$>','popup','width=550,height=450,scrollbars=yes,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img class="icons"
  src="//seog2soft-106e.kxcdn.com/icons-rounded/twitter-dreamstale71.png" alt="Share on Twitter"/></a> 

<a href="https://plus.google.com/share?url=<$MTEntryPermalink encode_xml="1"$>" onclick="javascript:window.open(this.href,
  '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img class="icons"
  src="//seog2soft-106e.kxcdn.com/icons-rounded/google+-dreamstale37.png" alt="Share on Google+"/></a>
</div>


作者: David Yin
原载: SEO 网站优化推广
版权所有。转载时必须以链接形式注明作者和及本声明。