Addthis：更改描述、标题和正在发送的 URL

Question

我正在用 PHP 建立一个论坛，我希望用户能够使用 Addthis 社交插件将每个帖子的标题和描述分享到 facebook、twitter 等。这是 Addthis 给我的代码：

    <!-- AddThis Button BEGIN -->
    <div class="addthis_toolbox addthis_default_style "
        addthis:url="www.example.com"
        addthis:title="Example Title"
        addthis:description="Example Description">
    <a class="addthis_button_preferred_1"></a>
    <a class="addthis_button_preferred_2"></a>
    <a class="addthis_button_preferred_3"></a>
    <a class="addthis_button_preferred_4"></a>
    <a class="addthis_button_compact"></a>
    <a class="addthis_counter addthis_bubble_style"></a>
    </div>
    <script type="text/javascript" src="http://s6.addthis.com/js/154/addthis_widget.js#pubid=rd-39e8r89e9er8er989"></script>
    <!-- AddThis Button END -->

我能够将 url 更改为我指定的另一个，但更改标题和描述没有效果。事实上，当我点击分享按钮并将其发布到我的 Facebook 墙上时，它们甚至都不会出现。什么是让它工作的正确方法？

Answer 1

据我所知，AddThis 并未正式支持所有这些参数（我无法在他们的文档中一次找到它们），因此理想情况下，您应该只在您所在的页面上使用 OpenGraph 标记。但无论如何……

您需要在自定义按钮本身上指定它，而不是在工具箱上。您甚至可以指定图像。如果您的按钮必须来自 AddThis 而不是自己指定，我不确定。

<div class="addthis_sharing_toolbox">
    <a class="addthis_button_facebook"
        addthis:url="http://google.com/"
        addthis:title="Here's a title"   
        addthis:media="http://images.google.com/example.png" 
        addthis:description="Here's a cool description">
        <i class="ico ico-facebook"></i>
    </a>

    <a class="addthis_button_twitter"
        addthis:url="http://google.com/"
        addthis:title="Here's a title"   
        addthis:media="http://images.google.com/example.png" 
        addthis:description="Here's a cool description">
        <i class="ico ico-twitter"></i>
    </a>

    <a class="addthis_button_linkedin"
        addthis:url="http://google.com/"
        addthis:title="Here's a title"   
        addthis:media="http://images.google.com/example.png" 
        addthis:description="Here's a cool description">
        <i class="ico ico-facebook"></i>
    </a>
</div>

AddThis 的文档很烂，所以我碰巧遇到了正确的事情并弄清楚了这一点。尽情享受吧！

Answer 2

从Open Graph Protocol 中添加specific recommend that you use meta tags 以指定要显示的内容

我们强烈推荐页面标记方法，而不是将您的小部件参数传递给我们的 API

因此，在您的情况下，您应该拥有原始代码：

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s6.addthis.com/js/154/addthis_widget.js#pubid=rd-39e8r89e9er8er989"></script>
<!-- AddThis Button END -->

并更改您的标题以包含 addThis meta 标记，在您的示例中，例如：

<meta property="og:url" content="http://www.example.com" />
<meta property="og:title" content="Example Title" />
<meta property="og:description" content="Example Title Description" />
<meta property="og:image" content="http://www.example.com/logo.gif" />

这避免了您在客户端 API 中可能遇到的任何问题。

Answer 3

在 AddThis 网站上找到这个之前，我转了又转：

Setting the URL & Title to Share

...对于我们最新的工具，请使用 data-url 和 data-title 参数...

我正在使用他们的最新代码（addthis_sharing_toolbox 而不是 addthis_toolbox），我只能找到使用 addthis:url="" 的人，但它不起作用。

Answer 4

为避免由于图像导致的任何错误，请尝试将图像宽度设置为最小

<meta property="og:image" content="@TempData["image"]" />
<meta property="og:title" content="@TempData["title"]" />
<meta property="og:url" content="@TempData["url"]" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />
<meta property="og:description" content="@TempData["description"]" />
<meta name="twitter:title" content="@TempData["title"]">
<meta name="twitter:description" content="@TempData["description"]">
<meta name="twitter:image" content="@TempData["image"]">
<meta name="twitter:card" content="summary_large_image">
<meta charset="utf-8" />

在需要内嵌工具箱的页面中添加

  <div class="addthis_inline_share_toolbox"></div>

在关闭正文标记之前在布局/母版页中添加了 widget.js

<script type="text/javascript" src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=yourpubID"></script>
</body> 

*****如果以下检查信息有任何错误会有所帮助****

• 检查是否发生任何重定向，然后元标记信息也应显示在该页面上， 例如，如果“Facebook 共享调试器”将页面重定向到任何登录页面，那么登录页面上也需要元标记

• 检查您的源代码的外观（https://developers.facebook.com/tools/debug/ ---> 抓取的 URL）

• 如果元标记中有任何错误，请检查以下网址

  • https://developers.facebook.com/tools/debug/（再次点击scrape查看更新的更改）
  • https://cards-dev.twitter.com/validator
  • https://www.linkedin.com/post-inspector/inspect/