Question

我正在尝试在我的AngularJs webapp中集成Facebook共享按钮（共享者链接）。

我有这个链接：

<a href="https://www.facebook.com/sharer/sharer.php?u=/{{locationService.getLangKey()}}/blog/{{'POST_URL_' + post.title | translate}}" class="popup" target="_blank">

因此，当我点击它时，共享窗口就会打开。但是，它仅显示带有url和共享按钮的文本字段。我还想包括图像，标题和描述。我是这个共享功能的新手，但我已经阅读了Facebook从Open Graph元标记中获取此信息。

所以，我已将它们包括在内（仅提供一些测试信息）：

<meta property="og:title" content="Ridiculously Responsive Social Sharing Buttons" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="http://kurtnoble.com/labs/rrssb/index.html" />
    <meta property="og:image" content="http://kurtnoble.com/labs/rrssb/media/facebook-share.jpg" />
    <meta property="og:description" content="No one wants to create social buttons over and over again. RRSSB is a super flexible system that works in any container. SASS-powered, retina ready, svg images, tiny file size and auto-magical resizing. A KNI Labs freebie."/>

但是，我在共享窗口中看不到它。

注意：我已经读过这个功能可能会出现AngularJS应用程序的问题，因为FB无法读取curling大括号内的javascript代码（或多或少与Google crawler相同的问题）。但在面对这个问题之前，仅仅出于测试目的，我不是使用动态内容而是使用静态内容。

Answer 1

Facebook URL Debugger是此类案例的有用工具。这将帮助您找到开放图元标记的任何问题并进行修复。

请记住，在Facebook中共享URL时，结果会被缓存，即使页面已更改，Facebook也会显示缓存的结果。

Facebook调试器还会使提供的URL的任何缓存无效。

Facebook分享链接显示og元标记

1 个答案: