"FB MESSENGER With Drag Move blue color"
Bootstrap 3.0.0 Snippet by agiltriono

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' />
<div class="container"><!-- container -->
<div class="row"><!-- row -->
<p>Click Messenger Button To Open Messenger</p>
<div class="buttons rounded text-center">
<a href="#" id="addClass"><span class="fa fa-facebook-square"></span> Messenger </a>
</div>
<div class="text-center follow-me">
<H4>Follow Me</H4>
</div>
<div class="social">
<a class='btn btn-danger' href='https://plus.google.com/u/0/103710542461561194864'> Google</a>
<a class='btn btn-primary' href='https://www.facebook.com/agilt.5'> Facebook</a>
<a class='btn btn-info' href='https://twitter.com/agieltriono'> Twitter</a>
</div>
</div><!-- row -->
</div><!-- container -->
<div class="chat_box" id="fb_msg"><!-- chatbox -->
<div class="chatheader"> Agiel Screamolove</div> <!-- your name -->
<div class='close-chatfb' id="removeClass"></div><!-- close chat -->
<div class="pesan_chat"><!-- chat content -->
<script type='text/javascript'>
// THIS IS YOUR PAGE PLUGIN GO TO https://developers.facebook.com/docs/plugins/page-plugin
//<![CDATA[
document.write('<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fagieltriono%2F&tabs=messages&width=250px&height=310px&small_header=false&adapt_container_width=true&hide_cover=true&show_facepile=false&appId=308120199335019" width="250px" height="310px" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>');
//]]>
</script>
</div><!-- chat content -->
</div><!-- chatbox -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* chat */
.chat_box{background:#fff;width:270px;height:363px;position:fixed;bottom:0px;right:14px;border:none;border-radius:5px 5px 0 0;-webkit-box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);-moz-box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);overflow:hidden;z-index:1000000;display:none}
.pesan_chat{text-align:center;text-decoration:none;display:block;height:100%;padding:5px 5px 15px}
.chatheader{margin:0 auto;padding:0 10px;height:35px;line-height:35px;font-size:16px;font-weight:700;color:#fff;text-align:left;display:block;cursor:pointer;background:#3a5897;cursor:move}
.chatheader:before{content:'\f111';font-family:fontawesome;color:#42b72a;font-size:12px;position:relative;top:-2px}
.pesan_chat p{color:#616161;font-size:14px;margin:10px;cursor:move}
.close-chatfb{position:absolute;top:0;right:0;font-family:fontawesome;font-size:15px;font-weight:inherit;cursor:pointer;width:24px;color:#fff;height:35px;line-height:35px;text-align:center;opacity:.7}
.close-chatfb:hover,.maxi-chatfb:hover,.mini-chatfb:hover{opacity:1}
.close-chatfb:before{content:'\f00d';font-family:fontawesome}
.buttons.rounded{margin:40px 0 0;}
.buttons.rounded.buttons.rounded a{border:2px solid #2c4584;border-radius:35px;color:#2c4584;font-size:23px;padding:10px 21px;text-decoration:none;font-family:'Open Sans',sans-serif;}
.buttons.rounded a:hover{border:2px solid #138be6;border-radius:35px;color:red;color:#000;font-size:23px;padding:10px 21px;text-decoration:none;}
.popup-on{display:block!important;}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
a:link{text-decoration:none;outline:none;transition:all 0.25s;}
a:visited,a:link:hover,a:visited:hover{text-decoration:none;}
body{background:#eaeaea none repeat scroll top left;color:#444;font-family:'Open Sans',sans-serif;margin:0;padding:0;position:relative;line-height:normal;}
.container{background:#fff;max-width:320px;height:300px;margin:5% auto;padding:10px;box-shadow:0 10px 5px -5px rgba(0,0,0,0.1);border:1px solid #ccc;font-family:'Open Sans',sans-serif;}
.row p {text-align:center;font-family:font-family:'Open Sans',sans-serif;}
.follow-me{padding:0;margin-top:2em}
a.btn-danger:before{content:'\f0d5';font-family:fontawesome}
a.btn-primary:before{content:'\f09a';font-family:fontawesome}
a.btn-info:before{content:'\f099';font-family:fontawesome}
.social {width:100%;position: relative;min-height: 1px;padding:10px 0px 0px 20px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Fast Loading
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
// drag move
$(function() { $( "#fb_msg" ).draggable({ containment: "window" }); });
// BUTTON
$(function(){
$("#addClass").click(function () {
$('#fb_msg').addClass('popup-on');
});
$("#removeClass").click(function () {
$('#fb_msg').removeClass('popup-on');
});
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit Angular
Bootstrap Drag and Drop Upload
Fat and Flat blue button
Flat color progress bars

Questions / Comments: