Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Facebook Instant Articles - 測試到發布
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Anny Chang
November 02, 2016
Programming
280
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Facebook Instant Articles - 測試到發布
簡報於前端魔法師十一月份小聚
Anny Chang
November 02, 2016
More Decks by Anny Chang
See All by Anny Chang
Use Webpack + Vue-Loader in VS2017
annilla
0
450
Other Decks in Programming
See All in Programming
PHP に部分適用が来るぞ!……ところで何それ?おいしいの? #phpcon / phpcon-2026
shogogg
0
630
AWS DevOps AgentのAzure接続機能を検証して見えた活用法/Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
masakiokuda
1
230
freee が目指す データ マネジメント戦略 AI-Ready 時代を支える 攻めのガバナンスとは
freee
PRO
0
340
ITヒヤリハットを整理してみた ~ライフサイクルと原因から考える再発防止策~
koukimiura
1
140
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
560
自動化したのに回らない テスト運用の壁―AI時代の品質責任と生産性
mfunaki
0
140
PHP初心者セッション2026 〜生成AIでは見えない裏側を知る:今だからLAMPを通して仕組みを学ぶ〜
kashioka
0
900
テーブルをDELETEした
yuzneri
0
140
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
shiki_kakaku
0
1.7k
【QA Test Talk Vol.8】AI-DLC による Whole Team Approach の加速
pkshadeck
PRO
0
160
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
sumihiro3
1
680
PHP Application における Kubernetes 内 gRPC 通信
ganchiku
0
590
Featured
See All Featured
Building an army of robots
kneath
306
46k
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
410
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
4.3k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
240
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
1
1.5k
Bash Introduction
62gerente
615
220k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
2.1k
Statistics for Hackers
jakevdp
799
230k
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
380
New Earth Scene 8
popppiees
3
2.5k
Why You Should Never Use an ORM
jnunemaker
PRO
61
10k
Transcript
JUKSY ANNY Facebook Instant Articles - 測試到發布
“ 講者 張巧倪 Anny Chang JUKSY流行生活網 網頁UI設計/網頁前端工程師,2015至今 微璽科技股份有限公司 商業設計/網頁UI設計,2013 -
2015
什麼是Facebook Instant Article (即時文章)? 優點 1.FB為了讓使用者有更好的瀏覽體驗,將媒體的 內容直接放上FB 2.能夠在5秒內展開內容、可針對行動裝置創造特別的瀏覽體驗 3.官方影片介紹:https://www.youtube.com/watch?v=yFDT3_7e0Gs 4.使用即時文章流量仍會計算在媒體的
GA裡面 5.可擺放FB廣告or第三方廣告來源。ex:DFP 6.未來演算法"可能"優先推薦即時文章內容 4/12後開放所有媒體申請 目前五大新聞媒體皆已開始使用。蘋果、中時、 ET、udn…..
什麼是Facebook Instant Article (即時文章)? 缺點 1.只支援行動裝置 2.工程須重新設計後台編輯器介面 PHP使用SDK轉譯成FB可讀程式碼 3.真正進到JUKSY的使用者減少,JUKSY站上停留時間減少 4.廣告收益減少
5.舊文章無法直接上線,需要重新編寫 6. 沒有分頁功能
OMG!!! 10項動作都過關才能開始發布 1. 存取即時文章工具 2. 領取網址 3. 下載 Facebook 粉絲專頁應用程式
(測試用) 4. 建立樣式範本 5. 編排文章格式 6. 選擇發表方式 7. 將文章連結至 Facebook 粉絲專頁 8. 設定廣告和分析工具 9. 確定文章遵守即時文章政策和設計指南 10. 提交 50 5 篇文章供 Facebook 進行審查 11. 開始發佈!
JUKSY ANNY 樣式範本. JUKSY 基本元素設計
JUKSY ANNY 頁首 1. 封面 比例 4:3,設為封面的圖片或影片,不可再次出 現在文章正文中 2. 標誌
3. 讚 之前已對您的粉絲專頁按讚的讀者不會在即時 文章中看到「讚」按鈕 4. 引題 5. 標題 6. 署名列 7. 發布時間、修改時間 2 3 4 5 6 7 1
JUKSY ANNY 正文 1. 粗體 2. 斜體 3. 內文連結 4.
H1 5. H2 5 1 2 4 3
JUKSY ANNY 圖片 1. 說明標題 2. 描述 3. 出處 4.
讚與留言 4 1 2 3
JUKSY ANNY youtube 影音
JUKSY ANNY 內嵌項目 1. 廣告 1
JUKSY ANNY 頁尾 1. 合作網站 後台有設定合作網站的文章才會出現 2. 圖片來源 後台有設定圖片來源的文章才會出現 3.
公司名稱 1 2 3
第一階段:JUKSY基本元素 ▸ 頁首 封面、標誌 + 「讚」按鈕 、引題、標題、 署名列、發布時間、修改時間 ▸ 正文
含粗體、斜體、內文連結、H1、H2 ▸ 圖片 說明標題、描述、出處、 讚與留言 ▸ youtube 影音 ▸ 內嵌項目 廣告、instagram 貼文 ▸ 頁尾 合作網站、圖片來源、公司名稱 第二階段:未來可新增的功能 ▸ 副標題 ▸ 摘要式引文 ▸ 摘要式引文出處 ▸ 段落式引文 ▸ 投影片 ▸ 語音字幕 ▸ 互動式地圖 ▸ 含地點標籤的媒體 4. 建立樣式範本 (分 2 階段)
JUKSY ANNY 手機 下載APP 測試文章
JUKSY ANNY 桌機 登入FB 編輯文章
JUKSY ANNY 桌機 登入FB 設定樣式
head: link, meta
article: header, footer, 內文
header: title, time, authors, cover...
footer: credits, copyright
p, figure, src
youtube
6. 選擇發表方式 ( 2 選 1) 1. 即時文章 API (主動給FB內容)
◦ 後台在發佈、更新或刪除文章時,需執行 API 呼 叫 ◦ JUKSY 後台需要加「登入FB」的流程,取得 access_token 2. RSS 摘要 (被動等FB爬蟲抓取內容) ◦ 依FB規定撰寫RSS ◦ 已發佈超過 1 天的即時文章,只能去FB後台進行 手動變更
8. 設定廣告和分析工具 1. Google 的 DFP 2. Facebook 的行動廣告聯播網
10. 提交 5 篇文章供 Facebook 進行審查 每家新的發佈商都必須先獲得 Facebook 批准,才能開始發佈。準備 50
5 篇文章(並實際置入廣告),文章中展示您之後要使用的設計風格和互動功 能。提交文章、收到審 查人員的意見後,您可以透過即時文章設定頁面(請 見上述步驟 1)與審查人員溝通。
工商時間 - JUKSY 誠徵後端工程師 ▸ 一年以上的後端開發經驗 ▸ 具 PHP 開發經驗,使用任一
PHP framework 開發 (Laravel5 為佳) ▸ 具 RESTful API 開發經驗 ▸ 具 GIT 版本控制使用經驗 ▸ 具 MySQL/PostgreSQL 使用經驗 ▸ 具 Unix-like 基本操作指令 ▸ 月薪:45,000元~78,000元 ▸ http://www.104.com.tw/job/?jobno=45hxb&jobsource=chec kc
THANKS! Any questions? You can find me at
[email protected]