嵌入 Twitter 推文

Twitter 是目前世界上最有名的社群网站之一，这篇教学会介绍如何透过 HTML 的实作，在网页里面加入 Twitter 推文的功能。

使用 Twitter Publish

前往 Twitter 找到一则自己喜欢的推文，在推文的下方点击“分享”按钮。

点击“复制推文的链接”。

前往 Twitter Publish，将复制的网址贴上 ( Twitter Publish 是 Twitter 专门用于发布分享推文的工具 )。

按下发布按钮后，在下方就会产生可以嵌入 Twitter 推文的程序码以及预览画面。

嵌入 Twitter 推文

点击 Copy Code 复制程序码，贴到自己的 HTML 网页中，就可以在网页中看到 Twitter 推文。

<blockquote class="twitter-tweet"><p lang="zh" dir="ltr">純 CSS Material Design 風格按鈕<a href="http://t.co/CIbr6qswIZ">http://t.co/CIbr6qswIZ</a> <a href="http://t.co/Abk5AcDnvU">pic.twitter.com/Abk5AcDnvU</a></p>&mdash; oxxo (@OxxoStudio) <a href="https://twitter.com/OxxoStudio/status/580763360360185856?ref_src=twsrc%5Etfw">March 25, 2015</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

因为内嵌的 Twitter 推文会使用 JavaScript 加上一些长宽格式，因此如果要调整位置或大小，可以额外用一层 <div> 包覆，就能比较精准的控制尺寸和位置，例如下方的 HTML，会使用一个宽度 300px 并且水平置中的 <div> 包覆 Twitter 贴文。

<div style="width:300px; margin:0 auto;">
  <blockquote class="twitter-tweet"><p lang="zh" dir="ltr">純 CSS Material Design 風格按鈕<a href="http://t.co/CIbr6qswIZ">http://t.co/CIbr6qswIZ</a> <a href="http://t.co/Abk5AcDnvU">pic.twitter.com/Abk5AcDnvU</a></p>&mdash; oxxo (@OxxoStudio) <a href="https://twitter.com/OxxoStudio/status/580763360360185856?ref_src=twsrc%5Etfw">March 25, 2015</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

意见反馈