首頁 部落格 【教學】在網頁內崁入Facebook照片
Free Resource
Aug 25, 2017
網路上有很多創新、免費的網頁設計資源,有些可以用於網站的草稿與線稿設計,也有繪圖軟體可以強化網站的視覺設計表現,還有很多奇特的網站提供意想不到的服務,我們樂於收集與分享這些資源給各位。

【教學】在網頁內崁入Facebook照片

如果大家以為網路相簿的龍頭還是Google Photos或Yahoo Flickr兩強相爭,那可就錯了,其實Facebook的相簿功能一直在進化,尤其是相片的留言/互動功能是所有媒體平台最強的,可惜畫面的品質來說並不是最優的。但Facebook的優勢是任何時候都能快速上傳照片,以及上傳照片易於分享與擴散等優點,越來越多的人將個人相簿放在Facebook、或企業相簿放在Facebook的粉絲頁上。

 

不過Facebook的相簿卻不像是影片,有內建的崁入功能,可以讓你隨時將影片崁入到你設計的網頁內,不過第三方公司Embed Social發表了一個很簡易的功能,只要找到你的Facebook相簿,就能夠幫你產生出一段HTML編碼,讓你貼在網頁上跟網友分享相簿。

 

 

分享的方式很簡單,但確有一點點技巧,那就是將你的相簿的連接貼上Embed Social網站上,就可以自動產生一段iFrame程式碼,將這個程式碼套用在你的網站上,透過原始碼貼上的方式,就能夠讓你的網頁上也能呈現出Facebook的相簿。要注意的技巧是,你要分享的相簿必須是公開的,崁入也只能分享一個特定的相簿,而不能分享個人所有的相簿。簡單來說,每個特定的相簿都有相簿的ID碼,所以當你點入特定相簿後,網址就會出現"?tab=album&album_id=xxxxxxxxx"這就是我們要的連結。

 

以下為馬路科技iWare透過此網站產生的Embed內崁程式碼的效果,不過這個免費的服務並不具備響應式網頁設計,因此尺寸受到了限制,若要完整的功能就得付費使用其進階的功能。

 

使用Facebook網路相簿於網頁設計上有很多好處,例如節省網站的空間、節省網站頻寬、增加粉絲頁的曝光度、加速網頁的開啟速度...等,好處多多,各家的相簿功能應該都有崁入於網站的辦法,日後有機會將會分享更多相關的技巧與網頁設計應用。

片來源:Pixabay 作者:FirmBee

推薦內容:在網頁內崁入Facebook影片

推薦內容:將Facebook貼文嵌入網頁內

(圖片來源: PIXABAY 轉載請註明出處馬路科技網頁設計或鏈接)

前端工程師、專業站長 的懶人工具包 Web Code Tools
前端工程師、專業站長 的懶人工具包 Web Code Tools
Free Resource
Free Resource
Jun 27, 2018
新手站長也可運用的網站安全資源
新手站長也可運用的網站安全資源
Advan
Advan
Sep 21, 2018
免費線上繪圖軟體Photopea威力直逼Photoshop
免費線上繪圖軟體Photopea威力直逼Photoshop
Free Resource
Free Resource
Nov 13, 2018