部落格文章嵌入 Facebook 影片

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

展開或縮小文章目錄

Facebook 影片不止可以在 Facebook 網站裡面顯示給受眾,同時你也可以讓影片嵌入在部落格裡面,如果受眾在部落格文章觀看影片的話,這會大幅度地獲得讀者們的注意力,也不會像停留在社交媒體很容易就刷走你的影片

上一篇教學我們知道如何在部落格文章嵌入 YouTube 影片,這次我們一起著手把 Facebook 影片也嵌入到我們的部落格文章,我會分享 2 個影片排版呈現方式,第一是沒有自動調整顯示尺寸,第二是有自動調整顯示尺寸的

影片演示

使用以下按鈕訂閱我們的 YouTube 頻道

#1 獲得 Facebook 影片的嵌入代碼

how to get facebook video embed code
  • 前往你的 Facebook 粉絲專頁,點擊你想嵌入的影片
  • 你會看到影片的訊息欄有 3 點的按鈕,點擊一次
  • 接著會呈現幾個選項,Copy link ,Embed Code,Delete Video
  • 你需要點擊 Embed 的選項
  • 界面會有彈跳視窗,顯示影片和的代碼
  • 點擊 Copy Code 複製嵌入代碼

#2 粘貼複製代碼到部落格文章

how to embed facebook video ti blogger HTML view
  • 前往部落格文章普通編輯模式,輸入『@@@@』作為嵌入影片的位置記號
  • 轉換成 HTML View 然後找到 『@@@@』的記號
  • 使用 Facebook 影片代碼取代記號,然後點擊儲存

使用一般的嵌入代碼方式有一個不好的地方,在嵌入的影片在電腦版本會顯示右手邊有一些閒置的位子,如果轉換到手機版本查看,會發現影片下方距離文字會有一個很大的距離

這樣的排版並不是很理想,至少我認為這樣的排版是不好的,正所謂連我自己都覺得過不了關,怎麼好意思讓讀者或顧客查閱呢

所以你可以使用以下的代碼,讓整個影片能夠影片尺寸紫銅調整

#3 複製自動調整影片尺寸代碼

<style>
.facebook-responsive {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}

.facebook-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
</style>
<div class="facebook-responsive">
   <iframe allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowfullscreen="true" frameborder="0" height="280" scrolling="no" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fmatoglobal%2Fvideos%2F595310844544014%2F&amp;width=500&amp;show_text=false&amp;height=280&amp;appId" style="border: none; overflow: hidden;" width="500"></iframe>
</div>

注意:紅色的 Code 是我的影片嵌入代碼,你只需要用你的影片嵌入代碼取代便可以獲得 Responsive facebook 呈現了

#4 查看自動調整尺寸嵌入 Facebook 影片效果

嵌入 Facebook 影片效果

你可以前往 Blog.MatoTheme.Com 查看嵌入影片的效果

在電腦版本的顯示

影片能夠很好地佈滿 16:9 的尺寸之外,也會自動配置文章的顯示區域,並沒有多出一些閒置的空間,如此呈現文章內容會讓讀者有更好的閱讀體驗,當然也包括觀看影片的體驗

在手機版本的顯示

影片距離下一行的文字可以自動調整了,而不會讓影片距離下一行文字有很大的閒置空間,視覺上也會有很好的效果

小結

使用自動調整的代碼嵌入 Facebook 影片並不會讓文章內容呈現變成很厲害,但卻是還原一篇有影片的文章應該要有的正常排版。

希望這次的分享能幫助你提升部落格文章排版,讓你的讀者和遊覽者有更好的閱讀體驗。

下一篇教學我會和你分享,嵌入音頻代碼,讓你的部落格文章變成網上有聲書的教程

Jazz Wai

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


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

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

中小企業

網銷資源手冊


免費下載網銷資源手冊

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

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