Question

我需要将来自网站链接的图片与文本分享到Twitter和LinkedIn。

我可以添加文字，但我无法添加图片。

我正在使用Kentico CMS，我已经编写了如下的Web部件转换。但是这张图片没有显示在Twitter和LinkedIn插件上。

随附下面的转换。

添加了没有图片的Twitter和LinkedIn结果。

任何人都可以指导我分享到带有图片的Twitter和LinkedIn供稿吗？

由于

<a class="fb-xfbml-parse-ignore" target="_blank"
href="https://twitter.com/intent/tweet?url=<%=Server.UrlEncode(CMS.DocumentEngine.DocumentContext.CurrentDocument.AbsoluteURL)%> 
&picture=<%#GetAbsoluteUrl(CMS.DocumentEngine.DocumentContext.CurrentDocument.GetValue("StoryImageURL").ToString())%>
&text=<%#CMS.DocumentEngine.DocumentContext.CurrentDocument.GetValue("Title").ToString()%>" 
onClick="return popup(this, 'notes')">  
  <img src="<%# Eval("twittericon") %>" alt="twitter icon" />
</a>

<a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.linkedin.com/shareArticle?url=<%=CMS.DocumentEngine.DocumentContext.CurrentDocument.AbsoluteURL%>
&picture=<%#GetAbsoluteUrl(CMS.DocumentEngine.DocumentContext.CurrentDocument.GetValue("StoryImageURL").ToString()) %> <%#CMS.DocumentEngine.DocumentContext.CurrentDocument.GetValue("BlogDescription").ToString()%>" onClick="return popup(this, 'notes')">
  <img src="<%# Eval("linkedicon") %>" alt="linked icon" />
</a>

Answer 1

首先，我不认为Twitter和LinkedIn只是通过在共享URL中添加参数来展示一种与文本共享图像的方法。对于Twitter，您可以设置卡片，例如Summary Card，并为您的网站添加元标记。通过添加twitter:image元标记，您可以告诉Twitter使用哪个图像。

类似适用于LinkedIn - 您需要use Open Graph meta tags，因为无法将图像作为共享网址的一部分提供。

关于您编写的转换 - 确保您正在呈现正确的数据，因为在转换中使用CMS.DocumentEngine.DocumentContext.CurrentDocument将从正在查看的当前文档中检索数据，而不是重复项的数据。要渲染重复项的数据，可以使用Eval方法。

此：

<%#CMS.DocumentEngine.DocumentContext.CurrentDocument.GetValue("Title").ToString()%>

会变成这样：

<%#Eval("Title")%>

Answer 2

对于我的所有网站，我在我想要或需要打开此Open Graph（OG）数据的页面的页面模板上使用Head HTML Code webpart。以下是我在其中动态填充部分数据的示例。

<meta property="og:site_name" content="Kehren Development - Kentico MVP & Experts" />
<meta property="og:url" content="{% CurrentDocument.AbsoluteURL #%}" />
<meta property="og:image" content="{%RootDocument.AbsoluteURL#%}KehrenDev/media/images/logos/twitter-logo-800.jpg" />
<meta property="og:type" content="article" />
<meta property="og:title" content="{% BlogPostTitle %}" />
<meta property="og:description" content="{% StripTags(BlogPostSummary) %}" />
<meta property="article:publisher" content="https://www.facebook.com/bkehren" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{% BlogPostTitle %}">
<meta name="twitter:site" content="@kehrendev">
<meta name="twitter:creator" content="@bkehren">
<meta name="twitter:description" content="{% StripTags(BlogPostSummary) %}">
<meta name="twitter:url" content="{% CurrentDocument.AbsoluteURL #%}">
<meta name="twitter:image" content="{%RootDocument.AbsoluteURL#%}KehrenDev/media/images/logos/twitter-logo-800.jpg">
<meta name="twitter:domain" content="{%RootDocument.AbsoluteURL#%}">

只要观看博客文章，就会在页面上呈现。您可以在webpart上设置这些属性，以仅显示这些页面类型。您可以使用其他元标记或您可以设置的不同字段，但这将帮助您入门。

现在您仍然可以使用您拥有的共享链接，但只使用实际文章链接填充共享链接，并且可能是编码描述，OG标记将拾取其余部分。

使用图像和说明分享到Twitter和LinkedIn

2 个答案: