Tích hợp comment facebook cho AMP template

Tích hợp comment facebook cho AMP template

Template AMP trên nền tảng blogger chia sẻ free hầu như đều sử dụng comment Disqus mà người Việt Nam chẳng mấy khi dùng vì đã quá quen với comment blogger và comment facebook.

Hiện tại tới thời điểm này chưa thấy dùng comment blogger cho template AMP.Kiếm được cái template vừa ý thì lại là comment Disqus nhiều khi thấy mất hứng.
Vậy muốn tích hợp comment facebook vào template phải làm thế nào.Cũng rất may là google đã chấp nhận loại comment này.

Muốn có comment facebook cho template AMP bạn cần làm theo các bước.

Bước 1

Tìm và xóa hết mọi vết tích của comment Disqus,những khu vực cần xục xạo là:

<b:include data='post' name='post'/>

<b:includable id='comments' var='post'>

Bước 2

Thêm vào ngay sau cặp thẻ:

<b:includable id='comments' var='post'>....</b:includable>

Thường là

<b:includable id='comments' var='post' />

Vì đã bỏ hết ruột.

Code sau:

<b:includable id='fb-comment' var='post'> 
<div class='fb-comments' id='fb_comments'> 
<amp-facebook-comments data-colorscheme='light' data-numposts='5' expr:data-href='data:post.url'  layout='responsive' height='180' width='100%'> 
</amp-facebook-comments> 
</div> 
</b:includable>

Bước 3

Thêm:

<b:include cond='data:blog.pageType == &quot;item&quot;' data='post' name='fb-comment'/> 

Vào ngay sau thẻ:

<b:include data='post' name='post'/> 

Bước 4

Thêm:

<meta content='xxxxxxxxxxxxxxxx' property='fb:app_id'/>

Vào sau thẻ:<head>

Nếu có mà cũng nên có.xxxxxxxxxxxx là số id

Bước 5

Cuối cùng là thêm javascript hỗ trợ vào trước thẻ: </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<script async='async' custom-element='amp-facebook-comments' src='https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js'/> 
</b:if>

Vậy là có comments facebook để dùng cho template AMP.

Nhận xét

3 nhận xét :