首頁 部落格 【教學】在網頁內崁入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
專為社群打造的免費設計工具-Adobe Spark Post
專為社群打造的免費設計工具-Adobe Spark Post
Free Resource
Free Resource
Jul 18, 2018
日本點心麵迷你網頁遊戲,網友集體崩潰「太難了」
日本點心麵迷你網頁遊戲,網友集體崩潰「太難了」
Free Resource
Free Resource
Oct 17, 2018