如何实际使用元标签通过社交网络共享数据？

Question

所以我正在尝试做一个网站，该网站有多个图像和自己的内容，并允许用户单击图像旁边的下拉菜单并将该图像和内容分享到：Twitter、Facebook、LinkedIn 和电子邮件。

我研究的是为每个图像及其内容创建一个单独的 URL。然后在每个页面设置它的元标记中的描述、图像等。所以在登陆页面上，当他们点击分享时，它实际上是在拉一个单独的页面。

我的问题是...如何将元标记信息分享到 Twitter、Facebook、LinkedIn 和电子邮件？

我试过推特：

<a rel="nofollow" class="share-twitter sd-button share-icon no-text" href="http://twitter.com/share?text=Textgoeshere&url=https://www.landingpage.com/&hashtags=example" target="_blank" title="Click to share on Twitter"><span></span><span class="sharing-screen-reader-text">Click to share on Twitter (Opens in new window)</span></a>

这似乎是我必须为每张图片编写的大量文本。加上它不会拉取图片、作者​​等。这里没有办法抓取元标记信息分享到 Twitter 吗？

我的意思是我有元标记（如下），但不知道如何实际使用它们来分享。

<meta name="twitter:card" content="Here's Twitter Card"/>
<meta name="twitter:site" content="@author"/>
<meta name="twitter:domain" content="@author"/>
<meta name="twitter:url" content="http://www.mainpage.com">
<meta name="twitter:title" content="Twitter Title">
<meta name="twitter:description" content="Here is the Twitter Description">
<meta name="twitter:image" content="link to image">

为 Facebook 找到以下内容： https://developers.facebook.com/docs/plugins/share-button#

为 Twitter 找到以下内容： https://publish.twitter.com/#

Answer 1

好的，这就是我将为您做的，因为我不确定您在这里寻找什么答案。我们将编写一些可以为您执行此操作的 javacript。

这里有你的 HTML 标签。为每个 div 提供“twitter-input-card”类并为它们提供“updateCards()”的 onload 函数是很重要的。

此处为 HTML：

<div class="twitter-input-cards" onload="updateCards(tCard1)"> </div>

现在这是你的 js....：

    //this function creates your object
function twitterCards(twitterCard, twitterAuthor1, twitterAuthor2, twitterURL, twitterTitle, twitterDes, twitterImg) {
    //this will be twitter:card
    this.twitterCard = twitterCard;
    //this will be twitter:site
    this.twitterAuthor1 = twitterAuthor1;
    //this will be twitter:domain
    this.twitterAuthor2 = twitterAuthor2;
    //this will be twitter:url
    this.twitterURL = twitterURL;
    //this will be twitter:title
    this.twitterTitle = twitterTitle;
    //this will be twitter:description
    this.twitterDes = twitterDes;
    //this will be twitter:image
    this.twitterImg = twitterImg;

}


//this isn't as important but i am not familiar with twitter cards so if there are more meta tags you can define them here.
var tcard = 'twitter:card';
var tsite = 'twitter:site';
var tdomain = 'twitter:domain';
var turl = 'twitter:url';
var ttitle = 'twitter:title';
var tdes = 'twitter:description';
var timg = 'twitter:image';



//this function will update the card with information
  function  updateCards(selectCard){
    cardSelect = selectCard; 

    document.getElementsByClassName("twitter-input-cards").innerHTML = "<meta name=" + "'" + tcard + "' content = '" + twitterCard + "'/>"
    document.getElementsByClassName("twitter-input-cards").innerHTML = "<meta name=" + "'" + tsite + "' content = '" + twitterAuthor1 + "'/>"
    document.getElementsByClassName("twitter-input-cards").innerHTML = "<meta name=" + "'" + tdomain + "' content = '" + twitterAuthor2 + "'/>"
    document.getElementsByClassName("twitter-input-cards").innerHTML = "<meta name=" + "'" + turl + "' content = '" + twitterURL + "'/>"
    document.getElementsByClassName("twitter-input-cards").innerHTML = "<meta name=" + "'" + ttitle + "' content = '" + twitterTitle + "'/>"
    document.getElementsByClassName("twitter-input-cards").innerHTML = "<meta name=" + "'" + tdes + "' content = '" + twitterDes + "'/>"
    document.getElementsByClassName("twitter-input-cards").innerHTML = "<meta name=" + "'" + timg + "' content = '" + twitterImg + "'/>"


  }



//this is where you define your cards info
var tCard1 = new twitterCards (
    //this will be twitter:card
    "Here is a new card",
    //this will be twitter:site
    "here is an author",
    //this will be twitter:domain
    "here is another aurthor",
    //this will be twitter:url
    "here is the page",
    //this will be twitter:title
    "here is the title",
    //this will be twitter:description
    "here is the description",
    //this will be twitter:img
    "img.jpg"

)