部落格文章嵌入 Anchor 音頻

作者:Jazz Wai
日期:01/2021
文章分類: Blog Marketing
閱讀 分鐘

展開或縮小文章目錄

我是為了這個教學影片而特地去註冊 Anchor 賬號,在部落格文章嵌入 Anchor 音頻(Spotify)可以讓部落格文章提升成為網上有聲書,製作音頻節目的成本也不像影片的製作的成本那麼高,所以為什麼關於聲音的行銷趨勢變得很流

上一篇教學我們成功讓 Facebook 影片嵌入部落格文章,這次我們要將音頻節目 Anchor 也嵌入到部落格文章裡面,如果你有之前嵌入影片的經驗,這次的嵌入技巧對你來說是完全不難

#1 獲取 Anchor 音頻嵌入代碼

how to get anchor embed code
  1. 進入 Anchor 
  2. 找到你需要嵌入的節目
  3. 點擊節目一下
  4. 點擊代碼的符號(它會自動複製代碼)

以下是 Anchor 嵌入代碼的組合

<iframe frameborder="0" height="150px" scrolling="no" src="https://anchor.fm/matoglobal/embed/episodes/Mato-Global-epgcvr" width="600px"></iframe>

注意:每一個嵌入代碼都是不同的,建議你將嵌入代碼粘貼到 WordPad 備用

#2 複製以下自動調整尺寸的代碼

<style>
.anchor-responsive {
    overflow:hidden;
    padding-bottom:20%;
    position:relative;
    height:0;
}
.anchor-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
</style>
<div class="anchor-responsive">
<iframe frameborder="0" height="150px" scrolling="no" src="https://anchor.fm/matoglobal/embed/episodes/Mato-Global-epgcvr" width="600px"></iframe>
</div>
  • 複製以上的代碼,然後粘貼到 Wordpad 裡面備用
  • 然後替換紅色的 iframe 代碼,使用你自己的節目代碼

#3 輸入記號然後使用代碼取代

  • 前往 Blogger 後台編輯文章
  • 在需要顯示音頻的位置,輸入 『@@@@』作為記號
  • 編輯器轉換成 HTML View
  • 使用 CTRL + F (內頁搜尋功能)找出記號
  • 將嵌入代取代記號,然後點擊儲存

#4 查看嵌入 Anchor 音頻效果

嵌入 Anchor 音頻

上圖可以檢閱,使用篇教學提供的代碼可以將 Anchor 音頻嵌入到 Blogger 文章,而且有著自動根據閱讀設配調整顯示的尺寸

需要查看使用 Blogger 製作的部落格行銷可以查看 Blog.MatoTheme.Com

小結

為了這次的教學,還特地去註冊一個 Anchor 的賬號,希望這次的分享能幫助你更好地將 Anchor 音頻嵌入到部落格文章裡,打造你的線上有聲書

Jazz Wai

關於 Digital Marketing 我自己被坑的經驗很豐富,所以你不需要和我一樣冤枉地在繞路,這裡會持續分享對網絡營銷實際有用的內容。有部分進階的內容我只會和電郵訂閱的讀者分享,所以記得訂閱我的電子報


一直以來 Google SEO 都是很神秘的存在,主要是官方從來都沒有透露過 Google Search 的演算法,每一個 SEO 專家都是經過長期的不斷測試與研究才慢慢掌握這門技術。 很高興這次可以約到

Read More
{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

中小企業

網銷資源手冊


免費下載網銷資源手冊

收錄網上講座、影片教學、文章教學、和資源下載鏈接

100% 保護隱私 |  拒絕濫發郵件