TOP

[ASP.NET] Google+,FaceBook,Twitter Share Button


利用Onclick控制視窗開啟大小
<script type="text/javascript">
            function OpenWindow(Url, width, height) {
                retVal = window.open(Url, "", "width=" + width + ",height=" + height +",menubar=no,location=no,status=no,resizable=no,scrollbars=yes");
            }                                
</script>

asp.net HyperLink加圖片方式顯示,因為使用Onclick所以加上 style="cursor:pointer;" 當滑鼠移到圖片上時顯示「手指」圖式。

<asp:HyperLink ID="hplGoogleShare" runat="server" ImageUrl="~/images/share.png" Target="_blank" style="cursor:pointer;"></asp:HyperLink>
<asp:HyperLink ID="hplFbShare" runat="server" ImageUrl="~/images/share.png" Target="_blank" style="cursor:pointer;"></asp:HyperLink>
                        <asp:HyperLink ID="hplTwitterShare" runat="server" ImageUrl="~/images/share.png" Target="_blank" style="cursor:pointer;"></asp:HyperLink>

加上Attributes的onclick

 FBShareUrl = "https://www.facebook.com/sharer/sharer.php?u=http://www.abc.com"
 GoogleShareUrl = "https://plus.google.com/share?url=http://www.abc.com"

 hplFbShare.Attributes.Add("onclick", "javascript:OpenWindow('" & FBShareUrl & "','500','300');void(0);")

hplGoogleShare.Attributes.Add("onclick", "javascript:OpenWindow('" & GoogleShareUrl & "','620','400');void(0);")

hplTwitterShare.Attributes.Add("onclick", "javascript:OpenWindow('https://twitter.com/share','500','400');void(0);")


參考資料:
Twitter
https://dev.twitter.com/docs/tweet-button
https://about.twitter.com/resources/buttons#tweet

FaceBook
https://developers.facebook.com/docs/plugins/share-button

Google+
https://developers.google.com/+/web/share/?hl=zh-TW
http://stackoverflow.com/questions/6585722/use-custom-image-for-google1-button
http://www.google.com/intl/en/webmasters/+1/button/index.html?utm_source=b2cp1&utm_medium=link&utm_campaign=p1#customize-snippet

0 意見:

張貼留言