我在 Google Plus 和 Youtube Data API 之间遇到冲突问题？

Question

所以我正在开发一个网站，其中包括使用 Google 的 YouTube 数据 API v3 搜索视频（我正在使用 javascript 库）。在导入 Google+ 代码以使用其共享功能的同一页面上包含新代码之前，一切正常。现在，每当我加载页面时，YouTube 视频搜索或通过 Google Plus 共享似乎都不起作用。以下是 YouTube 数据 API 客户端加载和搜索的代码：

function initializeGapi() {
    gapi.client.setApiKey(API_KEY); // client API_KEY variable for client
    gapi.client.load('youtube', 'v3', 
        function() { 
            console.log('Youtube API loaded.');
            searchYoutube(''); // searches youtube
        }
    );
}

此 HTML 标记包含在页面标题中：

<script src="https://apis.google.com/js/client.js?onload=OnLoadCallback"></script>

所以一切都很顺利。现在的问题是，当我为 Google Plus 的分享按钮功能介绍下面的代码时：

<div id="googlepluscta"> // share button
    <button
        class="g-interactivepost"
        data-contenturl="https://plus.google.com/pages/"
        data-contentdeeplinkid="/pages"
        data-clientid="142489821045.apps.googleusercontent.com"
        data-cookiepolicy="single_host_origin"
        data-prefilltext="Engage your users today, create a Google+ page for your business."
        data-calltoactionlabel="CREATE"
        data-calltoactionurl="http://plus.google.com/pages/create"
        data-calltoactiondeeplinkid="/pages/create">
      Tell your friends
    </button>
</div>

此外，在标记之前，包含以下内容以加载 Google Plus 客户端：

<script type="text/javascript">
    (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/client:plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
</script>

我还提供了屏幕截图链接，以防它们可能有用：

Answer 1

删除你正在做的第一个包含，这行可能是破坏的东西：

<script src="https://apis.google.com/js/client.js?onload=OnLoadCallback"></script>

这很糟糕，因为您在页面下方添加的异步包含做同样的事情，除了它还同时加载 Google+ 按钮代码并且不会阻止浏览器加载其他资源（这是一件好事，耶异步） .

既然您只加载了一次脚本，您还应该更新异步加载以在初始脚本加载后添加 YouTube API 客户端。以下示例应该足以满足您共享的代码：

<script type="text/javascript">
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/client:plusone.js?onload=initializeGapi';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

现在您只设置了一个 gapi.* 值实例，您应该更幸运地让您的代码正常工作。

接下来，如果您在使用交互式帖子后从 YouTube API 收到错误，这很可能是因为交互式帖子按钮可以更新 gapi 的凭据。将范围添加到您的按钮，YouTube API 权限将添加到更新的 API 凭据中：

<button
    class="g-interactivepost"
    data-contenturl="https://plus.google.com/pages/"
    data-contentdeeplinkid="/pages"
    data-clientid="142489821045.apps.googleusercontent.com"
    data-scope="https://www.googleapis.com/auth/youtube.readonly"
    data-cookiepolicy="single_host_origin"
    data-prefilltext="Engage your users today, create a Google+ page for your business."
    data-calltoactionlabel="CREATE"
    data-calltoactionurl="http://plus.google.com/pages/create"
    data-calltoactiondeeplinkid="/pages/create">
  Tell your friends
</button>

希望对您有所帮助。