Nhúng Facebook Message Button vào website

Hướng dẫn này sẽ giúp bạn làm thế nào để nhúng nút facebook messenger vào trong website của bạn. Khi một ai đó nhấn vào nút messenger thì nó sẽ trực tiếp khởi động ứng dụng facebook messenger trên điện thoại di động của họ hoặc kích hoạt trang web messenger.con nếu họ dùng trình duyệt trên desktop. Bạn có thể lựa chọn cách nhận tin nhắn trong hồ sơ facebook của bạn.

Tạo liên kết Facebook Messenger đơn giản

<a  href = "https://m.me/XYZ">
    Nhắn cho chúng tôi trên Facebook
</a>

Demo: Nhắn cho chúng tôi
Việc cần làm là bạn cần thay đổi XYZ bằng tên Facebook của bạn. Các liên kết đến Facebook Messenger có thể tùy chỉnh bằng CSS để được một style như dưới đây

Message Chánh Message nhatchanh.info

<style>
      .fb-messenger {
        margin: 30px 5px 20px;
      }

      .fb-messenger span {
        border-radius: 4px;
        background: #0084ff;
        color: #fff;
        font-size: 13px;
        padding: 6px 8px;
        display:inline-block;
        font-family: helvetica, arial, sans-serifnn;
        white-space: nowrap;
      }

      .fb-messenger a {
        cursor:pointer;
        text-decoration:none;
      }

</style>

Nếu bạn không nhìn thấy tin nhắn gửi đến Profile Facebook của bạn, đó là vì Facebook tự động ẩn tin nhắn từ những người không nằm trong danh sách địa chỉ liên lạc từ những người không phải là bạn của bạn. Vào facebook.com/messages, nhấn vào "More" thả xuống và chọn "Filtered" để xem tất cả các tin nhắn mà không có trong hộp thư chính của bạn.

Sử dụng Plugin từ Facebook Messenger

Đây là nút mặc định Facebook Messenger với JavaScript. Không giống như các tùy chọn trước đó, nhưng nó cũng cho phép gửi tin nhắn vào hồ sơ cá nhân của bạn, nút này được thiết kế sẵn cho các trang Facebook để cho họ nhận tin nhắn từ người dùng Facebook khác.

Để bắt đầu, copy-paste đoạn mã sau trong mẫu blog của bạn nhưng hãy nhớ thay "XYZ" và appID của bạn (Xem cách đăng ký App Facebook để lấy appID). Bạn có thể thiết lập các màu sắc văn bản như là trắng trên nền nút màu xanh.

<script>      
      window.fbAsyncInit = function() {
        FB.init({
          appId      : 'xxxxxxxxxxxx',
          xfbml      : true,
          version    : 'v2.6'
        });
      };
 
      (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/vi_VN/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));      
    </script>
 
    <div class="fb-messengermessageus" 
         messenger_app_id="xxxxxxxxxxxx"
         page_id="XYZ" 
         color="blue"
         size="large">
    </div>

Facebook Messenger Box

Trong trường hợp này, bạn cần phải thay thế "XYZ" trong đoạn mã dưới đây với tên người dùng hoặc ID trang Facebook của bạn. Bất cứ ai cũng có thể gửi tin nhắn đến bạn khi họ đăng nhập vào Facebook, tương tự như các hình thức liên hệ phía trên.

Demo

Nhớ thay đổi appId, XYZ trong mã dưới

<script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : 'xxxxxxxxxxxxxxx', 
          xfbml      : true,
          version    : 'v2.6'
        });
      };
 
      (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/vi_VN/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>
 
    <div class="fb-page" 
         data-href="https://www.facebook.com/XZY/" 
         data-tabs="messages" 
         data-width="400" 
         data-height="300" 
         data-small-header="true">
      <div class="fb-xfbml-parse-ignore">
        <blockquote></blockquote>
      </div>
    </div>

Bạn cũng có thể truy cập trang Facebook Plugin để tìm hiểu về các tùy chọn cấu hình khác có thể dễ dàng thiết lập bằng cách sử dụng các thuộc tính dữ liệu.