角2 - 分享網頁URL，標題，描述和Facebook上

的用戶點擊UI的一些按鈕。
由click調用的Typescript函數在Facebook上爲用戶打開一個新的共享選項卡。
共享頁面的'標題'和'描述'均由我的網站提供。

我們有一篇關於在鏈接頁面上包含元標記的帖子，其中包含標題/說明（How do I customize Facebook's sharer.php）。問題是我使用的是Angular 2，所以我必須在Facebook看到它之前動態地爲頁面添加元標記。

我很難想象這是如何工作的，因爲我假設FB服務器會打我的NG2應用程序並搜索元標記（所以編輯元標記在瀏覽器中打開共享鏈接是沒有意義的，因爲FB API會得到不同的html實例）。

tl; dr：如何從NG2應用程序打開fb url共享對話框並提供標題/說明？

注意：'共享fb'頁面可以簡單地打開，像這樣： window.open('http://www.facebook.com/sharer/sharer.php?u=www.google.com');這可以工作，但沒有params。

可選增編（示例代碼中動態地添加元標記，它的工作原理，但沒有幫助）：

var titleMeta = document.createElement('meta'); 
var descMeta = document.createElement('meta'); 

titleMeta.setAttribute('property', 'og:title'); 
titleMeta.setAttribute('content', 'The Rock'); 

descMeta.setAttribute('property', 'og:description'); 
descMeta.setAttribute('content', 'Foo Description'); 

document.getElementsByTagName('head')[0].appendChild(titleMeta); 
document.getElementsByTagName('head')[0].appendChild(descMeta);

附錄2：共享者用來讓你把在標題以及網址中的描述，但根據https://developers.facebook.com/x/bugs/357750474364812/已不再是這種情況。看起來它必須從元標記中拉出來。

來源

2017-08-25 VSO

你需要這些元標記添加到您要共享的實際頁面。在您發佈的鏈接中閱讀答案。 – Stuart

如果該頁面是角度2分量，我該如何做？ – VSO

它並不重要。無論你在哪裏創建html頁面的實際頭部，這都是你添加元標記的地方。 – Stuart

試試下面的代碼 -

var windowObj = window.open(); 
windowObj.document.head.innerHTML='<meta property="og:title" content="The Rock"/><meta property="og:type" content="movie"/><meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/><meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/><meta property="og:site_name" content="IMDb"/><meta property="fb:admins" content="USER_ID"/><meta property="og:description"  content="A group of U.S. Marines, under command of    a renegade general, take over Alcatraz and    threaten San Francisco Bay with biological    weapons."/>'

來源

2017-08-25 19:51:27

你應該看看@Share Buttons可能有助於

npm install --save ngx-sharebuttons

的AppModule

import {ShareButtonsModule} from 'ngx-sharebuttons'; 
@NgModule({ 
    imports: [ 
    //... 
    HttpModule, 
    ShareButtonsModule.forRoot(), 
    // ... 
    ] 
})

模板

<share-buttons></share-buttons>

來源

2017-08-28 19:48:37

這對我沒有幫助：「如果您使用的是元標記模塊，如ngx-meta，ng2-meta，angular meta service ...等，它將不會幫助社交網絡識別元標記，因爲它們使用javascript更新它們，而這些社交網絡不支持JavaScript執行。「 – VSO

如果這可以幫助您修改標題說明？ angular-2-seo

來源

2017-09-01 09:05:35

問題是，Facebook爬蟲只會看到服務器端呈現的HTML，Facebook不會執行客戶端的JavaScript。這就是您更新Meta標籤的代碼根本無法提供幫助的原因。

選項-

1）看看服務器端渲染像幻影的選項。js

2）如果只有一個標題和描述通過你的整個應用程序，然後把元標記直接給你的根index.html（我們指定基地Href和加載應用程序，供應商的JavaScript捆綁）。正如@Stuart在評論中指出的

來源

2017-09-04 05:56:59 Deshak9

它是可變的。對於不同的羣體不同。 – VSO

如果您使用客戶端呈現，Facebook抓取工具無法在頁面上執行js，因此它會從服務器返回HTML並搜索OG元標記。

如果是動態呈現的內容，您需要在服務器端添加這些元標記到您要返回的index.html。（我不知道你正在使用的後端什麼服務/生成指數，但可以使用例如handlebars.js）
否則只是把這些元標籤直接到您的index.html
然後你可以在這裏進行測試→ https://developers.facebook.com/tools/debug/sharing

來源

2017-09-04 08:05:06 Maielo

如果您正在使用角2，HTML渲染前動態meta標籤無法爲客戶端與角2渲染可以是不可能的可能。使用Angular 2，它只能在服務器端渲染。

它在角4 解決你可以看到這個鏈路

Click Here

來源

2017-09-04 12:19:52

角2 - 分享網頁URL，標題，描述和Facebook上

回答

相關問題