Twitter分享按钮动态URL共享

时间:2013-10-07 14:40:08

标签: javascript html twitter

我正在尝试创建一个自定义的Twitter按钮,该按钮会在点击时抓取当前页面的页面URL,这显然会根据它出现在哪个页面而改变,与默认共享按钮不同。但是,我不确定如何将页面URL传递给按钮。

这就是我到目前为止jsfiddle

<style type="text/css" media="screen">

</style>
<div id="social-share-container">
<div id="custom-tweet-button">
 <a id="tweetShare" href="https://twitter.com/share?url="+encodeURIComponent(document.URL); target="_blank">Tweet
    </a>
</div>
</div>

由于我对JS很不熟悉,所以它有点被黑了。

3 个答案:

答案 0 :(得分:5)

这将url和title传递给一个带有twitter共享页面的简单弹出框:

<script language="javascript">
    function tweetCurrentPage()
    { window.open("https://twitter.com/share?url="+escape(window.location.href)+"&text="+document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false; }
</script>

<a class="tweet" href="javascript:tweetCurrentPage()" target="_blank" alt="Tweet this page">Tweet this page</a>

如果您不希望它在弹出框中打开,则可以使用此代替window.open

window.location.href="https://twitter.com/share?url="+escape(window.location.href)+"&text="+document.title;

答案 1 :(得分:2)

我建议使用window.location - 这将为您提供当前页面网址。

问题是你在HTML中使用JS内联 - 你不能像你想要的那样这样做。

我用一些香草js更新你的小提琴,向你展示更好的方法。

http://jsfiddle.net/4jF5N/1/

var link = document.getElementById('tweetShare');
var url = window.location;

link.addEventListener('click',function(event){
    event.preventDefault();

    window.open("https://twitter.com/share?url="+encodeURIComponent(url));
    alert(url)
},false);

答案 2 :(得分:0)

看一下document.location:
location.hostname
location.pathname
http://www.w3schools.com/jsref/obj_location.asp