Question

我正在尝试在电子邮件中添加Twitter共享链接。因为这是在电子邮件中我不能依赖JavaScript，并且必须使用“Build Your Own”Tweet按钮。

例如，分享指向Google的链接：

<a href="http://www.twitter.com/share?url=http://www.google.com/>Tweet</a>

这很好用。我遇到的问题是URL有查询字符串。

<a href="http://www.twitter.com/share?url=http://mysite.org/foo.htm?bar=123&baz=456">Tweet</a>

带有查询字符串的网址混淆了Twitter的网址缩短服务，t.co.我已经尝试过以各种方式对此进行URL编码，并且无法正常工作。我得到的最接近的是这样做。

<a href="http://www.twitter.com/share?url=http://mysite.org/foo.htm%3Fbar%3D123%26baz%3D456">Tweet</a>

这里我只编码了查询字符串。当我这样做时，t.co成功地缩短了URL，但是在遵循缩短的链接时，它会将您带到编码的URL。我在地址栏中看到http://mysite.org/foo.htm%3Fbar%3D123%26baz%3D456，并在浏览器中收到以下错误

未找到

在此服务器上找不到请求的网址/foo.htm?bar=123&baz=456。

我对如何解决这个问题感到很茫然。

编辑： Re：onteria _

我已尝试对整个网址进行编码。当我这样做时，Tweet中没有显示任何URL。

Answer 1

这将为你工作

http://twitter.com/share?text=text goes here&url=http://url goes here&hashtags=hashtag1,hashtag2,hashtag3

这是关于它的实例：

http://twitter.com/share?text=Im Sharing on Twitter&url=https://stackoverflow.com/users/2943186/youssef-subehi&hashtags=stackoverflow,example,youssefusf

Answer 2

可以使用https://twitter.com/intent/tweet代替http://www.twitter.com/share来解决此问题。使用intent/tweet功能，您只需对整个网址进行网址编码，就像魅力一样。

https://dev.twitter.com/web/intents

Answer 3

使用tweet web intent，这是一个简单的链接：

https://twitter.com/intent/tweet?url=<?=urlencode($url)?>

https://dev.twitter.com/web/tweet-button/web-intent

的更多变量

Answer 4

您不一定需要使用意图，您对URL进行编码，它也适用于Twitter共享。

Answer 5

你必须改变＆amp;来自您网址的查询字符串中的％26

看看这个：https://dev.twitter.com/discussions/8616

Answer 6

它对我有用：

<div class="links">
    <ul>
    <li class="social-share facebook">Share on Facebook</li>
    <li class="social-share twitter">Share on Twitter</li>
    <li class="social-share linkedin">Share on LinkedIn</li>
    </ul>
</div>

并在js文件中添加：


setShareLinks();

    function socialWindow(url) {
    var left = (screen.width -570) / 2;
    var top = (screen.height -570) / 2;
    var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;  window.open(url,"NewWindow",params);}

function setShareLinks() {
    var pageUrl = encodeURIComponent(document.URL);
    var tweet = encodeURIComponent($("meta[property='og:description']").attr("content"));

$(".social-share.facebook").on("click", function() { url="https://www.facebook.com/sharer.php?u=" + pageUrl;
socialWindow(url);
});

$(".social-share.twitter").on("click", function() {
url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet;
socialWindow(url);
});

$(".social-share.linkedin").on("click", function() {
    url = "https://www.linkedin.com/shareArticle?mini=true&url=" + pageUrl;
socialWindow(url);
})
}

希望这会奏效。

Answer 7

正如@onteria_所提到的，您需要对整个参数进行编码。对于遇到相同问题的任何其他人，您可以使用以下书签来生成正确编码的URL。将其粘贴到浏览器的地址栏中即可创建 twitter共享网址。当您将其复制到地址栏时，请确保javascript:前缀存在，Google Chrome会在复制时将其删除。

javascript:(function(){var url=prompt("Enter the url to share");if(url)prompt("Share the following url - ","http://www.twitter.com/share?url="+encodeURIComponent(url))})();

JS Fiddle的消息来源 http://jsfiddle.net/2frkV/

Answer 8

Twitter现在允许您通过数据属性发送URL。这对我很有用：

<a href="javascript:;" class="twitter-share-button" data-lang="en" data-text="check out link b" data-url="http://www.lyricvideos.org/tracks?videoURL=SX05JZ4FisE">Tweet</a>

Answer 9

使用Twitter Intent资源https://dev.twitter.com/web/tweet-button/web-intent

Answer 10

您可以使用以下功能：

 function shareOnFB(){
       var url = "https://www.facebook.com/sharer/sharer.php?u=https://yoururl.com&t=your message";
       window.open(url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
       return false;
  }


function shareOntwitter(){
    var url = 'https://twitter.com/intent/tweet?url=URL_HERE&via=getboldify&text=yourtext';
    TwitterWindow = window.open(url, 'TwitterWindow',width=600,height=300);
    return false;
 }


function shareOnGoogle(){
     var url = "https://plus.google.com/share?url=https://yoururl.com";
     window.open(url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=350,width=480');
     return false;
}


<a onClick="shareOnFB()"> Facebook </a>
<a onClick="shareOntwitter()"> Twitter </a>
<a onClick="shareOnGoogle()"> Google </a>

Answer 11

没有比这更简单的了：

<a href="https://twitter.com/intent/tweet?text=optional%20promo%20text%20http://example.com/foo.htm?bar=123&baz=456" target="_blank">Tweet</a>

Answer 12

如果您在html网站上手动添加，只需替换：

/**
* Blueprint function (class) that describes a Modal object.
* @param {Object} options Object parameter containing elements that describe the Modal.
* @returns {Object} options Returns options from current modal object.
*/
function Modal(options) {
    // If constructor params is available
    if (options) {
    this.options = options;
  } else {
    this.options = {};

  } // End of IF-ELSE

  // Add to options object
  if (options.id) {
    // Check type of ID entry
    if (typeof options.id === 'number') {
      this.options.id = options.id.toString();
    } else {
      this.options.id = options.id;
    } // End of IF-ELSE
  } else if (options.id === undefined) {
    this.options.id = 'NA';
  } // End of IF-ELSE
  if (options.name) {
    this.options.name = options.name;
  } // End of IF
  if (options.closable) {
    this.options.closable = options.closable;
  } // End of IF

  return this;
};

// Prototypes
/**
* Displays some information concerning the current Modal object.
* @returns {Object} this Returns current modal object.
*/
Modal.prototype.open = function() {
    let demo = document.getElementById('demo');

  return this;
};

/**
* Creates an instance of a Modal object with the specified object elements.
* @returns {Object} this Returns current Modal object.
*/
Modal.prototype.create = function() {
  // Create Modal Element
  let modal = document.createElement('div');
  let modalBody = document.createElement('div');

  // Create Modal
  !modal.classList.contains('modal') ?
    modal.classList.add('modal') :
    modal.classList.add('');
  modal.id = this.options.id || 'noID';

  // Create modal body element
  !modalBody.classList.contains('modal-body') ?
    modalBody.classList.add('modal-body') :
    modalBody.classList.add('');document.querySelector('#' + this.options.id + ' .modal-close');
  modal.appendChild(modalBody);

  // Adding modal sub-elements  
  if (this.options.title) {
    let modalTitle = document.createElement('h2');
    !modalTitle.classList.contains('modal-title') ?
      modalTitle.classList.add('modal-title') :
      modalTitle.classList.add('');
    modalTitle.textContent = this.options.title;
    modalBody.appendChild(modalTitle);
    console.log('Added title!');
  } // End of IF

  if (this.options.subtitle) {
    let modalSubtitle = document.createElement('h4');
    !modalSubtitle.classList.contains('modal-subtitle') ?
      modalSubtitle.classList.add('modal-subtitle') :
      modalSubtitle.classList.add('');
    modalSubtitle.textContent = this.options.subtitle;
    modalBody.appendChild(modalSubtitle);
    console.log('Added subtitle!');
  } // End of IF

  if (this.options.content) {
    let modalContent = document.createElement('p');
    !modalContent.classList.contains('modal-content') ?
      modalContent.classList.add('modal-content') :
      modalContent.classList.add('');
    modalContent.textContent = this.options.content;
    modalBody.appendChild(modalContent);
    console.log('Added contents!');
  } // End of IF

  if (this.options.closable) {
    let modalClose = document.createElement('span');
    !modalClose.classList.contains('modal-close') ?
      modalClose.classList.add('modal-close') :
      modalClose.classList.add('');
    modalClose.innerHTML = '&times;';
    modalBody.appendChild(modalClose);
    console.log('Close button added!');
  } // End of IF

  document.body.appendChild(modal);
  console.log('Modal created with ID', modal.id);

  return this;
};

/**
* Closes the current Modal object.
* @returns {Object} this Returns current Modal object.
*/
Modal.prototype.close = function() {    
  let modal = document.getElementById(this.options.id);
  let modalBody = modal.children[0];

  // Delete elements from Modal Body
  for (let i = 0; i < modalBody.children.length; i++) {
    modalBody.removeChild(modalBody.children[i]);
  } // End of LOOP

  // Delete Modal Body from Modal
  modal.removeChild(modalBody);

  // Delete Modal from DOM
  modal.style.display = 'none';
  document.body.removeChild(modal);

  return this;
};

/**
* Initializes the inner functions of the modal, such as the closing capacity.
* @returns {Object} this Returns current Modal object.
*/
Modal.prototype.init = function(e) {
  // let closeBtnAll = document.querySelectorAll('.modal-close');
  let closeBtn = document.querySelector('#'+this.options.id + ' .modal-close');

  // Assign close() function to all close buttons
  closeBtn.addEventListener('click', () => {
    if (this.options.closable) {
      this.close();
    }
  })

  // Press ESC to close ALL modals

  return this;
};

// Create a Modal object
let modal1 = new Modal({
  id: 'post1',
  name: 'modal',
  title: 'First Post',
  subtitle: 'I contain all the elements',
  content: 'This is awesome!',
  closable: true
});

let modal2 = new Modal({
  title: 'Second Post',
  subtitle: 'Trying new things',
  content: 'Hehehehehe',
  closable: true
});

modal1.open();
modal1.create();
modal1.init();

modal2.open();
modal2.create();
modal2.init();

使用

＆

的标准html代码

Answer 13

我引用了所有方法。

对查询进行两次编码是快速的解决方法。

const query = a=123&b=456;
const url = `https://example.com/test?${encodeURIComponent(encodeURIComponent(query),)}`;


const twitterSharingURL=`https://twitter.com/intent/tweet?&url=${url}`

在Twitter上与查询字符串共享URL

13 个答案: