在 Vue3 專案中載入 Youtube 訂閱按鈕

發表於 分類於

Youtube 官方文件說明
https://developers.google.com/youtube/subscribe?hl=zh-tw

官方的教學在動態載入的地方有點問題，這邊另外寫一篇記錄一下，雖然應該沒什麼人在用這個功能XD

首先在 index.html 插入 google api 

1
<script src="https://apis.google.com/js/platform.js"></script>

實際使用如下：
/public/index.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="zh_tw" data-theme="light">
  <head>
    <title>Youtube 留言抽籤小助手 - 抽獎活動最佳夥伴</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://apis.google.com/js/platform.js"></script>
  </body>
</html>

接下來在想要插入按鈕的位置加入div
/src/YtSub.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div class="shrink">
    <div id="yt-button-container-render"></div>
  </div>
</template>

<script setup lang="ts">
onMounted(() => {
  var container = document.getElementById("yt-button-container-render");
  var options = {
    channelid: "UCNLxbtdTe-fFl8uDUS6tMcw",
    layout: "full",
    count: "default",
  };
  gapi.ytsubscribe.render(container, options);
});
</script>

第三行 id 隨便取，只要記得第九行一起改就好
第十行 options 裡面，官方文件使用的是頻道名稱，不過這對英語系國家以外的地方不太友善，所以還是用 channelid 比較可靠
至於怎麼取得 channelid？ 請使用此連結查詢 https://www.youtube.com/account_advanced

其他屬性怎麼使用請參考官方 Reference https://developers.google.com/youtube/subscribe/reference?hl=zh-tw