[C#]How to Build a Facebook-like Web Preview

因為不是走Web開發的，這塊對於筆者滿陌生的，一直滿好奇Facebook打入網址後會顯示的預覽畫面是怎樣做的。抽空參閱Creating a Facebook Like Website Previewer這篇並試玩了一下，發現沒有想像中的困難，只是很單純的從網頁內容中擷取資訊而已，這邊稍稍對此做個整理。

這邊我們可以先來檢視一下奇摩的原始碼，對照上圖在FB所擷取到的資訊，我們不難看出資訊都是從網頁原始碼中擷取出來的。

[C#]How to Build a Facebook-like Web Preview

其中網頁預覽中的標題部份對應到的是這個HTML標籤所包的值，可以用下面的正規表示式將之擷取出來： <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-csharp" data-lang="csharp"><title>\s*(?<Title>[^<>]+)\s*</title> </code></pre></div>而網頁預覽中的網頁描述部份則是對應到name值為description的meta標籤，可以用下面的正規表示式將之擷取出來： <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><meta\s+name="description"\s+content\s*=\s*"(?<Description>[^<>"]*)" </code></pre></div>至於網頁預覽中的縮圖部份，可能是來自rel值為image_src的link標籤或是來自img標籤，圖片的網址部份要盡可能完整才收進來，可以用下面的正規表示式將之擷取出來： <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><(?:img\s+src\s*=|link\s+rel\s*=\s*"image_src"\s+ href\s*=)"(?<Thumbnail>http://[\w/.]+(?:jpg|bmp|gif))" </code></pre></div>實際在做擷取時，就會像下面這樣： <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-csharp" data-lang="csharp">... #region Const private const string TITLE_MATCH_PATTERN = @"<title>\s*(?<Title>[^<>]+)\s*</title>"; private const string DESCRIPTION_MATCH_PATTERN = @"<meta\s+name=""description""\s+content\s*=\s*""(?<Description>[^<>""]*)"""; private const string THUMBNAIL_MATCH_PATTERN = @"<(?:img\s+src\s*=|link\s+rel\s*=\s*""image_src""\s+ href\s*=)""(?<Thumbnail>http://[\w/.]+(?:jpg|bmp|gif))"""; #endregion ... string htmlSourceCode; ... var title = Regex.Match(htmlSourceCode, TITLE_MATCH_PATTERN).Groups["Title"].Value; var description = Regex.Match(htmlSourceCode,DESCRIPTION_MATCH_PATTERN).Groups["Description"].Value; var thumbnailURLs = Regex.Matches(htmlSourceCode, THUMBNAIL_MATCH_PATTERN, RegexOptions.IgnorePatternWhitespace).Cast<Match>().Select(m => m.Groups["Thumbnail"].Value); </code></pre></div>這邊筆者在測試時隨手將這功能簡單的包了一下。 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-csharp" data-lang="csharp"> public class WebPreview { #region Const private const string TITLE_MATCH_PATTERN = @"<title>\s?(?<Title>[^<>]+)\s?</title>"; private const string DESCRIPTION_MATCH_PATTERN = @"<meta\s+name=""description""\s+content\s?=""(?<Description>[^<>""]*)"">"; private const string THUMBNAIL_MATCH_PATTERN = @"<(?:img\s+src\s*=|link\s+rel\s*=\s*""image_src""\s+ href\s*=)""(?<Thumbnail>http://[\w/.]+(?:jpg|bmp|gif))"""; #endregion #region Var private string _sourceCode; private string _title; private string _description; private IEnumerable<String> _thumbnailURLs; #endregion #region Private Property public string m_SourceCode { get { return _sourceCode ?? (_sourceCode = GetHTMLSourceCode(URL)); } } #endregion #region Public Property /// <summary> /// Gets or sets the URL. /// </summary> /// <value>The URL.</value> public string URL { get; private set; } /// <summary> /// Gets the title. /// </summary> /// <value>The title.</value> public string Title { get { return _title ?? (_title = Regex.Match(m_SourceCode, TITLE_MATCH_PATTERN).Groups["Title"].Value); } } /// <summary> /// Gets the description. /// </summary> /// <value>The description.</value> public string Description { get { return _description ?? (_description = Regex.Match(m_SourceCode,DESCRIPTION_MATCH_PATTERN).Groups["Description"].Value); } } public IEnumerable<String> ThumbnailURLs { get { return _thumbnailURLs ?? (_thumbnailURLs = Regex.Matches(m_SourceCode, THUMBNAIL_MATCH_PATTERN, RegexOptions.IgnorePatternWhitespace).Cast<Match>().Select(m => m.Groups["Thumbnail"].Value)); } } #endregion #region Constructor public WebPreview (string url) { this.URL = url; } #endregion #region Private Method private string GetHTMLSourceCode(string url) { HttpWebRequest request = (WebRequest.Create (url)) as HttpWebRequest; HttpWebResponse response = request.GetResponse() as HttpWebResponse; using (StreamReader sr = new StreamReader(response.GetResponseStream())) { return sr.ReadToEnd(); } } #endregion } </code></pre></div>使用起來就只要在建立物件時帶入網址就可以了。 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-csharp" data-lang="csharp">using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace WindowsFormsApplication36 { public partial class Form1 : Form { private int m_Index { get; set; } private string[] m_ThumbnailURLs { get; set; } public Form1() { InitializeComponent(); } private void UpdateThumbnailIndexStatus() { lblIndexStatus.Text = string.Format("{0}/{1}", m_Index + 1, m_ThumbnailURLs.Length); } private void btnGO_Click(object sender, EventArgs e) { var preview = new WebPreview(tbxUrl.Text); lblTitle.Text = preview.Title; lblUrl.Text = preview.URL; lblDescription.Text = preview.Description; m_Index = 0; m_ThumbnailURLs = preview.ThumbnailURLs.ToArray(); UpdateThumbnailIndexStatus(); if (m_ThumbnailURLs.Length == 0) return; pbxThumbnail.ImageLocation = m_ThumbnailURLs[m_Index]; } private void btnNext_Click(object sender, EventArgs e) { if (m_Index == m_ThumbnailURLs.Length - 1) return; m_Index += 1; pbxThumbnail.ImageLocation = m_ThumbnailURLs[m_Index]; UpdateThumbnailIndexStatus(); } private void btnPrevious_Click(object sender, EventArgs e) { if (m_Index == 0) return; m_Index -= 1; pbxThumbnail.ImageLocation = m_ThumbnailURLs[m_Index]; UpdateThumbnailIndexStatus(); } } } </code></pre></div>運行的結果如下： <img alt="[C#]How to Build a Facebook-like Web Preview" decoding="async" height="223" loading="lazy" src="/images/posts/ca63594b-5f89-4ee2-a87c-a7c50712dc45/image_thumb_2.png" width="468"> <img alt="[C#]How to Build a Facebook-like Web Preview" decoding="async" height="223" loading="lazy" src="/images/posts/ca63594b-5f89-4ee2-a87c-a7c50712dc45/image_thumb_3.png" width="468"> <h2 id="link">Link<a hidden class="anchor" aria-hidden="true" href="#link">#</a></h2> <ul> <li>Creating a Facebook Like Website Previewer</li> </ul> </div> <footer class="post-footer"> <ul class="post-tags"> <li><a href="http://larrynung.github.io/tags/csharp/">CSharp</a></li> </ul> </footer> <nav class="related-posts" aria-label="Related posts"> <h2 class="related-posts-title">相關文章</h2> <ul> <li><a href="/posts/eyedisposable-il-instrumenter-to-help-detect-idisposable-leaks-in-net-programs/">EyeDisposable - IL instrumenter to help detect IDisposable leaks in .NET programs</a></li> <li><a href="/posts/remote-desktop-with-microsoft-terminal-services-control/">Remote desktop with Microsoft Terminal Services control</a></li> <li><a href="/posts/dotnet-4-0-new-feature-code-contracts-part-1-concepts-and-introduction/">.NET 4.0 New Feature - Code Contracts (Part 1) Concepts and Introduction</a></li> <li><a href="/posts/dotnet-4-0-new-feature-code-contracts-part-5-interface-contracts-and-abstract-method-contracts/">.NET 4.0 New Feature - Code Contracts (Part 5) Interface Contracts and Abstract Method Contracts</a></li> <li><a href="/posts/4f45e11a-1310-411b-84fd-ed2efe4f66a8/">Alias Be Gone - A C# alias to .NET CLR type replacer extension</a></li> </ul> </nav> </article> </main> <footer class="footer"> {year} Larry Nung · Powered by <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> & <a href="https://github.com/adityatelange/hugo-PaperMod/" rel="noopener" target="_blank">PaperMod</a> </footer> <a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor"> <path d="M12 6H0l6-6z" /> </svg> </a><script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script> <script> mermaid.initialize({ startOnLoad: true }); </script> <script> let menu = document.getElementById('menu') if (menu) { menu.scrollLeft = localStorage.getItem("menu-scroll-position"); menu.onscroll = function () { localStorage.setItem("menu-scroll-position", menu.scrollLeft); } } document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener("click", function (e) { e.preventDefault(); var id = this.getAttribute("href").substr(1); if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) { document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({ behavior: "smooth" }); } else { document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView(); } if (id === "top") { history.replaceState(null, null, " "); } else { history.pushState(null, null, `#${id}`); } }); }); </script> <script> var mybutton = document.getElementById("top-link"); window.onscroll = function () { if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) { mybutton.style.visibility = "visible"; mybutton.style.opacity = "1"; } else { mybutton.style.visibility = "hidden"; mybutton.style.opacity = "0"; } }; </script> <script> document.getElementById("theme-toggle").addEventListener("click", () => { if (document.body.className.includes("dark")) { document.body.classList.remove('dark'); localStorage.setItem("pref-theme", 'light'); } else { document.body.classList.add('dark'); localStorage.setItem("pref-theme", 'dark'); } }) </script> </body> </html>