Chèn Facebook Messenger vào bất kỳ trang web nào

Đoạn code bên dưới sẽ giúp bạn chèn Facebook Messenger vào bất kỳ trang web nào, miễn là bạn biết chút ít code là được. Nếu như sử dụng trên WordPress thì rất đơn giản, bạn có thể sử dụng plugin để chèn. Nhưng đối với các mã nguồn website tự code hoặc các source code forum thì bạn chỉ cần chỉnh sửa lại chút xíu là được.

<div class="messenger hocwp-theme" style="position: fixed; bottom: 0; right: 10px; width: 360px; z-index: 99999;">
	<div class="fbm-container">
		<div id="msgToggle" class="header" style="background-color: rgb(0, 132, 255); color: rgb(255, 255, 255); border-radius: 5px 5px 0 0; cursor: pointer;">
			<h2 style="margin: 0; font-family: arial; font-size: 20px; display: block; padding: 6px 8px; line-height: 37px;">
				<img src="https://cdn3.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-facebook-messenger-square1-32.png" alt="" style="display: inline-block; vertical-align: middle;"> Chat với chúng
				tôi</h2>
		</div>
		<div id="msgBox" class="inner"
		     style="display: none; background-color: rgb(250, 250, 250); text-align: center; padding: 10px; border: 1px solid rgb(221, 221, 221);">
			<div id="fb-root"></div>
			<script>(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#xfbml=1&version=v2.10&appId=725693104267595";
					fjs.parentNode.insertBefore(js, fjs);
				}(document, 'script', 'facebook-jssdk'));</script>
			<div class="fb-page" data-href="https://www.facebook.com/SuTroLaiThanThanh/" data-tabs="messages" data-height="300" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/SuTroLaiThanThanh/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/SuTroLaiThanThanh/">Muonliness2.vn</a></blockquote></div>
		</div>
	</div>
	<script type="text/javascript">
		(function () {
			var toggle = document.getElementById("msgToggle");
			if (null != toggle) {
				toggle.addEventListener("click", function () {
					var container = toggle.parentNode,
						msgBox = document.getElementById("msgBox");
					if (-1 === container.className.indexOf("open")) {
						container.className += " open";
						msgBox.style.display = "block";
					} else {
						container.className = container.className.replace(" open", "");
						msgBox.style.display = "none";
					}
				});
			}
		})();
	</script>
</div>

Trong đoạn code bên trên, cái bạn cần sửa là nội dung bên trong thẻ có class inner. Bạn lên trang Page Plugin của Facebook, cấu hình theo tham số như bên dưới:

Cấu hình Facebook Page Plugin

Sau khi hoàn tất, bạn nhấn vào nút lấy mã để sao chép code, bước 1 là bạn chọn APP, sao chép bước 2 và bước 3 thay thế cho đoạn code bên trên của mình. Bây giờ bạn mở tập tin footer.php lên và thêm đoạn code đã chỉnh sửa vào trước kết thúc đóng thẻ , sau đó lưu lại và xem kết quả. Chúc bạn thành công.

Không có bình luận.

Bạn có thể trở thành người đầu tiên để lại bình luận.

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *