Question

因此，我试图建立一个拥有多个图片及其内容的网站，并允许用户点击图片旁边的下拉列表并将该图片和内容分享到：Twitter，Facebook，LinkedIn和电子邮件。

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

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

我试过Twitter：

<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”并给你一个onload函数“updateCards（）”。

HTML here：

<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"

)

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

1 个答案: