facebook-icon

Hướng dẫn tích hợp facebook chat vào website 7-2018 đẹp đơn giản

Hướng dẫn tích hợp facebook chat vào website 7-2018 đẹp đơn giản : demo xem thử : http://noithatnthome.com/

Việc tích hợp các nút bên trên không hề khó, bài viết này mình sẽ chỉ …. Các nút mình sắp xếp đó là: Nút gọi điện, nút tin nhắn SMS, nút chat Facebook và nút nhắn tin Zalo. ….. Chỉ vàothao tác thôi là chúng ta có hiệu ứng đẹp mắt và tiện lợi, …

<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/en_US/sdk.js#xfbml=1&version=v2.11";
		  fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));
		(function($) {
		"use strict";
			$(document).ready(function() {
				var mobileDetect = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
				if (mobileDetect && $(".cresta-facebook-messenger-box").hasClass("onApp")) {
					$('.cresta-facebook-messenger-container').css('display','none');
					$('.cresta-facebook-messenger-box').on('click', function(){
						window.location = 'fb-messenger://user-thread/211379062320104';
					});
				} else {
					$('.cresta-facebook-messenger-box').on('click', function(){
						$('.cresta-facebook-messenger-box, .cresta-facebook-messenger-container').toggleClass('open');
					});
				}
			});
		})(jQuery);
		</script>
		<div class="cresta-facebook-messenger-box onApp onBoth">
			<svg id="fb-msng-icon" data-name="messenger icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.47 30.66"><path d="M29.56,14.34c-8.41,0-15.23,6.35-15.23,14.19A13.83,13.83,0,0,0,20,39.59V45l5.19-2.86a16.27,16.27,0,0,0,4.37.59c8.41,0,15.23-6.35,15.23-14.19S38,14.34,29.56,14.34Zm1.51,19.11-3.88-4.16-7.57,4.16,8.33-8.89,4,4.16,7.48-4.16Z" transform="translate(-14.32 -14.34)" style="fill:#ffffff"/></svg>
			<svg id="close-icon" data-name="close icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.98 39.99"><path d="M48.88,11.14a3.87,3.87,0,0,0-5.44,0L30,24.58,16.58,11.14a3.84,3.84,0,1,0-5.44,5.44L24.58,30,11.14,43.45a3.87,3.87,0,0,0,0,5.44,3.84,3.84,0,0,0,5.44,0L30,35.45,43.45,48.88a3.84,3.84,0,0,0,5.44,0,3.87,3.87,0,0,0,0-5.44L35.45,30,48.88,16.58A3.87,3.87,0,0,0,48.88,11.14Z" transform="translate(-10.02 -10.02)" style="fill:#ffffff"/></svg>
		</div>
		<div class="cresta-facebook-messenger-container">
							<div class="cresta-facebook-messenger-top-header"><span>Chat với chúng tôi</span></div>
						<div class="fb-page" data-href="https://www.facebook.com/Noithatnthome-190910444937009/" data-tabs="messages" data-width="300" data-height="350" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"></div>
		</div>
				    <script type="text/javascript">
        jQuery(document).foundation();
    </script>
<style type='text/css'>
  .cresta-facebook-messenger-box, .cresta-facebook-messenger-button {z-index:1000}.cresta-facebook-messenger-container, .cresta-facebook-messenger-container-button {z-index:999}

.cresta-facebook-messenger-box {
	width: 60px;
    height: 60px;
    display: block;
	position: fixed;
    bottom: 15px;
    right: 15px;
	cursor: pointer;
	text-align: center;
    line-height: 60px;
	background: #1182FC;
	border-radius: 100%;
	-webkit-box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.3);
}
.cresta-facebook-messenger-box svg#fb-msng-icon {
	width: 30px;
	height: 30px;
	position: absolute;
	top: 15px;
	left: 15px;
	opacity: 1;
	overflow: hidden;
	-webkit-transition: opacity 160ms ease-in-out;
    -moz-transition: opacity 160ms ease-in-out;
    -o-transition: opacity 160ms ease-in-out;
    transition: opacity 160ms ease-in-out;
}
.cresta-facebook-messenger-box svg#close-icon {
	opacity: 0;
	width: 20px;
    height: 20px;
    position: absolute;
    top: 20px;
    left: 20px;
	-webkit-transition: opacity 160ms ease-in-out;
    -moz-transition: opacity 160ms ease-in-out;
    -o-transition: opacity 160ms ease-in-out;
    transition: opacity 160ms ease-in-out;
}
.cresta-facebook-messenger-box.open svg#fb-msng-icon {
	opacity: 0;
}
.cresta-facebook-messenger-box.open svg#close-icon {
	opacity: 1;
}
.cresta-facebook-messenger-container {
	position: fixed;
    bottom: 90px;
    right: 15px;
	transform: translateY(50px);
	opacity: 0;
    border-radius: 10px;
	pointer-events: none;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16);
	-webkit-transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;
    -moz-transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;
    -o-transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;
    transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;
}
.cresta-facebook-messenger-container iframe,
.cresta-facebook-messenger-container-button iframe {
	border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.cresta-facebook-messenger-container.open {
	opacity: 1;
	transform: translateY(0px);
	pointer-events: all;
}
.cresta-facebook-messenger-top-header {
	display: block;
    position: relative;
    width: 300px;
    background: #1182FC;
    color: #ffffff;
    text-align: center;
    padding: 10px;
    font-size: 14px;
	line-height: 1;
	border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.cresta-facebook-messenger-button {
	position: relative;
	display: inline-block;
    padding: 10px 15px;
    background: #1182FC;
    color: #ffffff;
    border-radius: 10px;
    font-size: 14px;
	cursor: pointer;
	line-height: 1;
	margin-bottom: 10px;
    -webkit-box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.3);
}
.cresta-facebook-messenger-button span {
	vertical-align: baseline;
}
.cresta-facebook-messenger-button svg#fb-msng-icon-button {
	width: 10px;
	height: 10px;
	width: 18px;
    height: 18px;
    vertical-align: text-bottom;
	margin-right: 6px;
}
body.rtl .cresta-facebook-messenger-button svg#fb-msng-icon-button {
	margin-right: inherit;
	margin-left: 6px;
}
.cresta-facebook-messenger-container-button {
	border-radius: 10px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16);
	position: absolute;
	opacity: 0;
	pointer-events: none;
	-webkit-transition: opacity 160ms ease-in-out;
    -moz-transition: opacity 160ms ease-in-out;
    -o-transition: opacity 160ms ease-in-out;
    transition: opacity 160ms ease-in-out;
}
.cresta-facebook-messenger-container-button.open {
	opacity: 1;
	pointer-events: all;
}
.cresta-facebook-messenger-container-button.top {
	top: -20px;
    left: 50%;
    transform: translate(-50%, -100%);
}
.cresta-facebook-messenger-container-button.bottom {
    bottom: -20px;
    left: 50%;
    transform: translate(-50%, 100%);
}
.cresta-facebook-messenger-container-button.left {
	bottom: 0;
    left: -20px;
    transform: translate(-100%, 50%);
}
.cresta-facebook-messenger-container-button.right {
	bottom: 0;
    right: -20px;
    transform: translate(100%, 50%);
}
@media all and (max-width: 769px) {
	.cresta-facebook-messenger-box.onDesktop {
		display: none !important;
	}
}
@media all and (min-width: 769px) {
	.cresta-facebook-messenger-box.onMobile {
		display: none !important;
	}
}
@media all and (max-width: 600px) {
	.cresta-facebook-messenger-box {
		width: 45px;
		height: 45px;
		line-height: 45px;
	}
	.cresta-facebook-messenger-box svg#fb-msng-icon {
		width: 20px;
		height: 20px;
	}
	.cresta-facebook-messenger-box svg#fb-msng-icon,
	.cresta-facebook-messenger-box svg#close-icon {
	    top: 13px;
		left: 12px;
	}
}
</style>

 

5/5 - (100 bình chọn)