有沒有辦法制作共享div的innerHTML的Facebook/Twitter分享按鈕？

這是一個CodePen，幫助解釋我在做什麼。有沒有辦法制作共享div的innerHTML的Facebook/Twitter分享按鈕？

我有一個網站使用Javascript生成一個隨機事實，並將其與id="fact"放入div。下面這個div是一個簡單的「分享到微博」鏈接使用一個非常基本的共享鏈接我在網上找到：

http://twitter.com/share?url=http://www.thewikifix.com&text=Simple Share Buttons&hashtags=thewikifix

這個偉大的工程，這是非常簡單的，但我不知道是否有共享的方式

<div id="fact"></div>的內容。

基本上，而不是

"text=SimpleShareButtons"

這將是

"text={document.getElementId("fact").innerHTML}"

（顯然，第二部分是虛構的，我知道我不能只是把JavaScript字符串成鏈接在HTML中）。

有沒有辦法做我在做什麼？即使是完全不同的方式也是如此。

來源

2014-12-05 Kyle

你應該可以使用js來做到這一點。我會盡力幫忙。一個告誡，你的「事實」文本在例子（96）中太長了......你想修剪它嗎？ – wahwahwah 2014-12-05 23:04:02

@wahwahwah謝謝！這是一個很好的問題。我想我會保持原樣，即使事實太長。因此，當推特共享窗口出現時，共享者將決定如何調整以適應推文中的文本。 – Kyle 2014-12-05 23:18:18

爲簡單起見，對HTML進行了兩處更改。這裏有一個fiddle應該做你要找什麼樣的代碼：

[CSS沒有改變]

HTML：

<p id="fact">Babe Ruth once pitched a 4-pitch walk to start a game, got angry at the umpire's calls, and punched him, getting ejected. Reliever Ernie Shore came in and retired every batter for a combined no-hitter.</p> 
<p id="sharing"><a id="factLink" href="#" target="_blank">share on twitter</a> 
</p>

JS/JQUERY：

$('#factLink').click(function() { 

    // Get the fact text 
    var factText = $('#fact').text(); 

    // Convert to string 
    var factStr = factText.toString(); 

    // Fact length 
    var factLen = factText.length; 

    // This section formats the text that is too long, remove it if needed 
    if (factLen > 103) { // max chacters allowed 
     // trim, and allow space for '...'" 
     var trimFact = factStr.substring(0, 100); 
     var trimFact = trimFact.trim(); //<-- ensures the last character isnt ' ' 
     factStr = trimFact + "..."; 
    } 

    // Update the link 
    var linkRef = "http://twitter.com/share?url=http://www.thewikifix.com&text=" + factStr + "&hashtags=thewikifix"; 

    $('#factLink').attr('href', linkRef); 

});

希望這會有所幫助！

來源

2014-12-05 23:42:57 wahwahwah

是否可以與文本一起共享圖像（在你的小提琴中顯示）？ – 2015-07-17 05:38:01

@VP - 這是一個[有點複雜]（http：// stackoverflow。com/questions/6931396/how-do-i-add-an-image-to-a-tweet-or-how-does-twitter-decide-which-image-urls-to-r）但是如果我理解鏈接正確地說，如果它是Twitter的合作伙伴網站，那麼添加url *應該*使圖像在帖子 – wahwahwah 2015-07-17 15:49:59

中呈現。我在這裏發現他們不需要'clientId'或'AppId'像gmail或faebook。我的問題是他們是否有任何問題可能導致不使用它？ – 2015-07-20 04:06:41

你的psudo代碼幾乎就是你想要做的。您只需將其作爲變量傳遞給它即可

var inner = document.getElementId("fact").innerHTML; 
"text=" + inner

來源

2014-12-05 23:32:46

感謝您的回答。也許這樣？（指我的CodePen）： 'document.getElementById（#sharing）.innerHTML =「share on twitter」;' – Kyle 2014-12-05 23:41:53

是的，這看起來非常好。我喜歡將選擇器分成變量，但是，這就是你需要做的！ – 2014-12-05 23:44:06

謝謝你的幫助！ – Kyle 2014-12-05 23:52:28

有沒有辦法制作共享div的innerHTML的Facebook/Twitter分享按鈕？

回答

相關問題