góc 2 - URL Share trang, Tiêu đề, và mô tả trên Facebook

Question

mục tiêu cuối cùng của tôi rất đơn giản:

1. Người dùng nhấp chuột một số nút trên giao diện người dùng.
2. Hàm phân loại được gọi là click sẽ mở tab chia sẻ mới trên facebook cho người dùng.
3. Cả 'Tiêu đề' và 'Mô tả' cho trang được chia sẻ được cung cấp bởi trang web của tôi.

Chúng tôi có một bài đăng về bao gồm thẻ meta trên trang được liên kết, mà fb biết để bao gồm làm tiêu đề/mô tả (How do I customize Facebook's sharer.php). Vấn đề là tôi đang sử dụng Angular 2, vì vậy tôi phải bằng cách nào đó để tự động thêm thẻ meta cho trang trước khi facebook nhìn thấy nó.

Tôi gặp khó khăn khi tưởng tượng cách hoạt động, vì tôi giả sử máy chủ FB sẽ nhấn ứng dụng NG2 của tôi và tìm kiếm thẻ meta (do đó, chỉnh sửa thẻ meta trong trình duyệt mở liên kết chia sẻ là vô nghĩa, vì FB API sẽ nhận được một phiên bản khác của html).

tl; dr: Làm cách nào để mở hộp thoại chia sẻ url fb từ ứng dụng NG2 và cung cấp tiêu đề/mô tả?

Lưu ý: Trang 'Chia sẻ trên fb' có thể được mở một cách đơn giản như sau: window.open('http://www.facebook.com/sharer/sharer.php?u=www.google.com'); Công trình này, nhưng không có thông số.

---

phụ lục Tùy chọn (mẫu mã để thêm các thẻ meta động, mà làm việc, nhưng không giúp):

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); 

Phụ lục 2: Các sharer sử dụng để cho phép bạn đặt trong tiêu đề và mô tả trong url, nhưng điều đó không còn là trường hợp theo https://developers.facebook.com/x/bugs/357750474364812/. Có vẻ như nó đã bị kéo khỏi các thẻ meta.

Answer 1

Hãy thử đoạn mã sau -

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."/>' 

Answer 2

Bạn nên tìm @Share Buttons có thể giúp

npm install --save ngx-sharebuttons 

AppModule

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

Template

<share-buttons></share-buttons> 

Answer 3

nếu điều này có thể giúp bạn sửa đổi mô tả tiêu đề? angular-2-seo

Answer 4

Vấn đề là trình thu thập thông tin của Facebook sẽ chỉ thấy HTML phía máy chủ được hiển thị, Facebook sẽ không thực thi javascript phía máy khách. Đó là lý do mã của bạn để cập nhật thẻ Meta sẽ không giúp gì cả.

Tùy chọn-

1) Xem các tùy chọn cho hiển thị bên máy chủ như ma.js

2) Nếu chỉ có một tiêu đề và mô tả trong toàn bộ ứng dụng, hãy đặt thẻ meta trực tiếp cho bạn root index.html (nơi chúng tôi chỉ định Base Href và tải ứng dụng, gói javascript của nhà cung cấp). Như được chỉ bởi @Stuart trong chú thích

Answer 5

Nếu bạn đang sử dụng hiển thị phía khách, trình thu thập thông tin Facebook không thể thực thi js trên trang, vì vậy nó nhận HTML được trả về từ máy chủ và tìm kiếm thẻ meta OG.

• nếu nội dung được hiển thị động, bạn cần phải ở phía máy chủ, thêm các thẻ meta đó vào index.html bạn đang quay trở lại. (Tôi không chắc chắn những gì bạn đang sử dụng trên phụ trợ để phục vụ/tạo index nhưng bạn có thể sử dụng ví dụ handlebars.js)

• khác chỉ cần đặt những thẻ meta trực tiếp vào bạn index.html

• sau đó bạn có thể kiểm tra nó ở đây → https://developers.facebook.com/tools/debug/sharing

Answer 6

Nếu bạn đang sử dụng góc 2, các thẻ meta động trước HTML vẽ không thể có thể cho phía khách hàng rendering với góc 2 không thể thực hiện được. Với Angular 2, nó chỉ có thể hiển thị trên máy chủ.

Nó được giải quyết trong góc 4. Bạn có thể nhìn thấy trên này link-

Click Here