就是愛尚生活 - 94i3 Life

 找回密碼
 免費註册

Sign in with facebook

Connect with friends.

人氣: 2953|回復: 0

臉書 facebook 引文外掛程式

  [複製鏈接]
字體大小: 正常 放大

新浪微博達人勛

總積分排名︰1
簽到
2198
鮮花(68) 雞蛋(2)
累計在線
353099分鐘
發表於 2018-3-27 14:13:04 | 顯示全部樓層 |閱讀模式
  
0.jpg
引文外掛程式能讓用戶選擇您專頁上的文字並新增至自己的分享內容,以便傳達更精彩生動的故事。請注意:使用此外掛程式無須建置「Facebook 登入」,也不需要透過應用程式審查來申請任何額外權限。

行動版網頁的引文分享功能
如果您正在打造行動版網站,或是所提供的按鈕不符您的網站設計,另有網頁分享對話方塊可將引文新增至連結分享。
iOS 和 Android 的引文分享功能
如果您使用的是 iOS 或 Android 原生應用程式,請改為使用原生的 iOS 分享對話方塊Android 分享對話方塊
試用外掛程式程式碼範例設定
試用外掛程式
選擇本句的一部分,查看此外掛程式的實際運作情形。

程式碼範例
將 data-href 值調整為您的網站網址,確認開放社交關係圖中繼標籤是最新版本,外掛程式的 data-href 也與 og:url 屬性相符。
  1. <font face="Tahoma" size="4"><html>
  2. <head>
  3.   <title>Your Website Title</title>
  4.   <!-- Comment #1: OG Tags -->
  5.   <meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
  6.   <meta property="og:type"          content="website" />
  7.   <meta property="og:title"         content="Your Website Title" />
  8.   <meta property="og:description"   content="Your description" />
  9.   <meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />
  10. </head>
  11. <body>

  12.   <!-- Comment #2: SDK -->
  13.   <div id="fb-root"></div>
  14.   <script>(function(d, s, id) {
  15.     var js, fjs = d.getElementsByTagName(s)[0];
  16.     if (d.getElementById(id)) return;
  17.     js = d.createElement(s); js.id = id;
  18.     js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
  19.     fjs.parentNode.insertBefore(js, fjs);
  20.   }(document, 'script', 'facebook-jssdk'));</script>

  21.   <!-- Comment #3: Content -->
  22.   <h1>Your Headline</h1>
  23.   <p>
  24.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget tristique nibh,
  25.     vel consequat purus. Praesent molestie, turpis ut ultrices commodo, felis arcu cursus enim,
  26.     vel porttitor ante quam vel lacus. Quisque at laoreet sapien. Proin nec purus dolor. Integer
  27.     pharetra nec ligula a condimentum. Fusce sem orci, porta ut felis id, commodo imperdiet risus.
  28.   </p>

  29.   <!-- Comment #4: Plugin Code -->
  30.   <div class="fb-quote"></div>

  31. </body>
  32. </html></font>
複製代碼
自己動手嘗試!
程式碼註解
OG Tags:您可以使用開放社交關係圖標籤自訂連結預覽。
SDK:載入 Facebook JavaScript SDK。
Content:您的頁面內容。
Plugin Code:配置器中的「引文」外掛程式程式碼。您可以將程式碼置於文件的任何位置, 且系統只有在您反白容器中的文字時,才會顯示該程式碼。在此範例中,系統只有在您反白正文中的文字時才會顯示該程式碼。
設定
您可以變更以下設定:

設定
HTML5 屬性
說明
預設
href
data-href
要引用的網頁絕對網址。
目前的網址
layout
data-layout
  • quote: 選擇文字時,含有藍色 Facebook 圖示與「分享引文」字樣的按鈕會重疊顯示在畫面上;一旦有人點擊,系統就會開啟「分享」對話方塊,內含作為引文的反白顯示文字。
  • button:運作方式等同於「引用」選項,但按鈕中僅有藍色 Facebook 圖示。
quote

可引用的區域

網頁的某些區域無法從引用功能受益,例如功能表、邊欄、頁尾等。您可透過以下方式定義網頁可引用的區域:

HTML <article> 元素,或
任何包含 fb-quotable 類別名稱的元素
您可隨意互相搭配這兩種元素來定義可引用的區域。

如果網頁既不包含 <article> 也不包含 class="fb-quotable",整個網頁會變成都可引用。

變更語言
您可透過載入 Facebook JavaScript SDK 的本地化版本,變更「引文」外掛程式的語言。載入 SDK 後,變更 js.src 的值來使用您的語言設定。將 en_US 替換為您的語言設定,例如 fr_FR 為法語(法國):
  1. <font face="Tahoma" size="4">js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.6";</font>
複製代碼
支援的語言設定列於 Facebook 語言設定 XML 檔案中。 您可能需要調整社交外掛程式的寬度來配合不同語言。您可在本地化和翻譯頁面找到更多資訊


  1. <p>
  2.         <span style="color: #000000; font-size: 16pt;"><strong>趕快按個讚,加入我們的粉專吧!</strong></span></p>
  3. <p>
  4.         <iframe style="border: none; overflow: hidden;" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F94i3.tw.blog%2F&tabs=timeline&width=340&height=213&small_header=true&adapt_container_width=false&hide_cover=true&show_facepile=true&appId=261304127351120" width="340" height="213" frameborder="0" scrolling="no"></iframe></p>
複製代碼

  1. <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2F94i3.tw.blog%2Fposts%2F710901802439887&width=500" width="500" height="287" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
複製代碼


就是愛尚生活 - 94i3Life - 歡迎您 加入 !

回復 鮮花(68) 雞蛋(2)論壇版權

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 免費註册 | 新浪微博登陸 Sign in with facebook

本版積分規則


快速回復 返回列表 聯繫我們 搜索

line|關于我們|聯絡我們|就是愛尚生活 - 94i3 Life |簡體中文

GMT+8, 2018-10-16 08:44 PM

Powered by 就是愛尚 - 94i3.tw - X3.2

© 2007-2018 愛上誠信。愛上精緻。愛上專業。愛上時尚。愛上分享

94i3就是愛尚是一個經驗分享筆記平台,網友均可以在94i3免費互相學習別人分享之經驗。
※本站只提供空間,網友自由發表使用,也請會員網友尊重「論壇規則」、「論壇注意事項」,本網站內容均從網路上收集或網友們提供,其內容及言論的完整性以及正確性並不代表本站立場,本站不負任何法律責任,均與本站無關。倘若文章、圖片或是內容言論等有任何問題,請「聯絡我們」,我們將會第一時間優先處理或刪除。

快速回復 返回頂部 返回列表