Cách chèn nút like Facebook vào bài viết không sử dụng plugin

Nút Like đặc biệt hữu ích giúp bạn biết được mức độ tương tác của người đọc với bài viết của bạn qua đó bạn cũng biết người đọc đang quan tâm đến chủ đề gì nhiều nhất mà khai thác viết bài. Facebook cung cấp sẵn các plugin xã hội cho người dùng chèn vào website, đi kèm với plugin là SDK Javascript và khi chèn vào website thường làm cho website tải chậm. Nếu bạn vẫn muốn sử dụng nút Like nhưng không muốn chèn SDK Javascript bạn chỉ cần nhúng iframe của nút Like là được.

Lợi ích khi chèn nút Like khi không sử dụng plugin không làm trì hoãn tốc độ tải trang vì phải đợi tải Javascript. Tuy nhiên nó cũng có nhược điểm khi bạn thêm số đếm vào nút, bạn sẽ không đặt được độ rộng của nút chính xác, nhất là khi bạn chèn cùng với các nút hành động khác.

Lấy ví dụ nút Like bình thường chưa có số đếm có chiều rộng iframe 58px, và độ rộng này sẽ tăng lên khi có số đếm. Khi bạn chèn SDK Javascript, khi tải trang plugin SDK sẽ tự động chỉnh chiều rộng cho nút Like còn khi nhúng iframe nút Like bình thường, bạn không thể chỉnh độ rộng bằng css, do đó nếu muốn chèn theo dạng này tốt nhất bạn cứ chèn nút độc lập không chèn chung với với các nút khác.

Cách chèn nút like Facebook vào bài viết

Không có số đếm

<div class='fb_like_iframe'>

  <iframe allowtransparency='true' expr:src='&quot;https://www.facebook.com/v3.2/plugins/like.php?action=like&amp;href=&quot; + data:post.url.canonical + &quot;&amp;layout=button&amp;show_faces=false&quot;' frameborder='0' scrolling='no'/>

</div>

Bao gồm số đếm

<div class='fb_like_iframe'>

  <iframe allowtransparency='true' expr:src='&quot;https://www.facebook.com/v3.2/plugins/like.php?action=like&amp;href=&quot; + data:post.url.canonical + &quot;&amp;layout=button_count&amp;show_faces=false&quot;' frameborder='0' scrolling='no'/>

</div>

Bao gồm nút Share và không có số đếm

<div class='fb_like_iframe'>

  <iframe allowtransparency='true' expr:src='&quot;https://www.facebook.com/v3.2/plugins/like.php?action=like&amp;href=&quot; + data:post.url.canonical + &quot;&amp;layout=button&amp;share=true&amp;show_faces=false&quot;' frameborder='0' scrolling='no'/>

</div>

Bao gồm nút Share và có số đếm

<div class='fb_like_iframe'>

  <iframe allowtransparency='true' expr:src='&quot;https://www.facebook.com/v3.2/plugins/like.php?action=like&amp;href=&quot; + data:post.url.canonical + &quot;&amp;layout=button_count&amp;share=true&amp;show_faces=false&quot;' frameborder='0' scrolling='no'/>

</div>

Viết css cho nút Like

.fb_like_iframe {

    display: inline-block;

    position: relative;

    vertical-align: bottom;

    width: 58px;

    height: 20px;

    text-align: justify;

}

.fb_like_iframe iframe {

    width: 58px;

    border: none;

    height: 20px;

    visibility: visible;

    position: absolute;

}

Tùy thuộc vào kiểu của nút mà bạn chỉnh css độ rộng width của nút cho phù hợp