我在Google Plus和Youtube Data API之間存在衝突問題？

Question

所以我有一個我正在使用的網站，其中包括使用Google的YouTube Data 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> 

所以，一切運作良好。現在的問題是，當我下面介紹的代碼，谷歌加了它的分享按鈕功能：

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

另外，右邊的標籤，才能將加載谷歌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+按鈕代碼，而不會阻止瀏覽器加載額外的資源（這是一件好事，yay異步）。

既然您只有一次腳本獲取加載，您還應該更新異步加載以在之後添加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> 

希望有所幫助。