Add Facebook Messenger Message Buttons On Your Blog!

Messenger is being more and more popular and that day is not so far when Messenger and WhatsApp will have almost same number of users. That's because, we know, of Facebook. Although, Messenger & WhatsApp both are the parts and are owned by Facebook but different-different groups of developers handle and update these applications. Messenger is being updated very frequently, and new features are coming in every update (almost). We aren't saying that WhatsApp is not being updated, but we won't mention WhatsApp here because WhatsApp is already a giant. :)

Now, before some days, Facebook has introduced all of us with Messenger for Desktop, and this update increased the number of people who use Messenger every month. So, now if the messenger is being popular, then it is also an opportunity for bloggers to take benefits of this popularity to increase the traffic and to improve the contacting way for the visitors. :)
Facebook has already introduced the "Send' button for websites and blogs using which, we can share any web page with our friends privately. But don't you think that there should be a button using which, the visitors of your blog should be able to send you (or to your page) a message directly by clicking a button? If yes, then I have got it for you!

What's Facebook Messenger Message Button?

Facebook Messenger message button is a kind of a simple button which you can create using JavaScript (if you want official) and without JavaScript (Unofficial).You can even create this button on your email account's signature but as a link instead. The simple trick we used to make it work was, we redirected visitors to m.me/yourusername/vanityurl. It is simple and was firstly found by labnol (as far as I know).

Just to inform you, whenever any of your visitors would click on the button, he/she will be redirected to messenger.com if he is on the desktop or the messenger app would open up if his/her device is mobile (Android Or with a device with iOS). Facebook has not publicly revealed these buttons yet, as far as I know. That's why I am publishing this post to help you add this helpful button.

So, here, there are two types of button available for you:

• Official Button: Facebook itself has made this button and designed also. It is a simple button and works with Facebook SDK and JavaScript.
• Unofficial Button: I noticed that there is no need of JavaScript and Facebook SDK for making this button work. So I made my own button for you with ripple effect and a small logo of Facebook Messenger.

How To Add Unofficial Facebook Messenger Message Button?

Won't you firstly like to see the demo?

Demo [Unofficial Button]

Unofficial Facebook Messenger
Button

Now, let me tell you that this button is fully based on HTML and CSS. So, if your visitor would enable AdBlocker or disable JavaScript, then this button won't be affected. I have divided the process of adding this button into two part because there are two versions of this unofficial button. First is, without ripple effect and second is with ripple effect. The second one is little bit heavy, and the first one don't have any weight.

Unofficial Button Without Ripple Effect

This button is as simple as a link. But, using CSS, I have made it look like a button. It can work without JavaScript and have a simple hover effect. It is themed according to messenger's real theme color.

Now, to add this button anywhere on your blog, follow these steps:

• Go to Blogger > Template > Edit HTML
• Search for ]]></b:skin> and above it, paste the following set of CSS:

/*
////////////////////////////////////////
Messenger Button By BG
////////////////////////////////////////
*/
a.bg-fm:hover {
background: #0F8BFF;
}
a.bg-fm {
text-decoration: none;
color: #FFF;
}
.bg-fm {
background: #0084FF;
color: #FFF;
transition: .3s;
margin-top: 7px;
padding: 7px;
border-radius: 2px;
display: inline-block;
padding-top: 4px;
padding-bottom: 4px;
font-family: sans-serif;
font-size: 11px;
}
.m-bg {
margin-top: 0px;
}
.fb-m {
background: url(http://s32.postimg.org/6w6lc0z1h/screenshot_21.png);
background-size: 18px;
font-style: normal!important;
background-repeat: no-repeat;
color: transparent;
margin-right: -2px;
padding: 8px;
position: relative;
top: 6px;
left: -3px;
}

• Now save the template.
• Now anytime, if you wish to add this button, use the following HTML:

<div class="m-bg"><a rel="nofollow" target="_blank" href="https://m.me/BloggerGuider" class="bg-fm"><span class="bg-m-a">

<span class="fb-m">`</span>

<span class="msg-bg">Message @BloggerGuider</span>

</span>

</div>

</a>

• Change BloggerGuider in above code with your facebook's profile or page's username (vanity URL or profile ID) in which you would like to receive the messages.
• You're done!

Unofficial Button With Ripple Effect

This button comes with a ripple effect which is a part of material design and polymer project. The ripple effect works with JavaScript & jQuery and so, it is mandatory that you check that your template has jQuery library in it or not. And if not, add this line of code before </head> in your template:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>

Now, firstly do all the steps which are mentioned to add unofficial button without ripple effect (above) and then after it, follow the following steps:

• Go to your blog's template editor;
• Now search for </body> and paste the following code before it:

<style>
/* 
/////////////////////////////////////////
Legit Ripple
/////////////////////////////////////////
*/
.legitRipple,.legitRipple-custom{overflow:hidden}.legitRipple{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0}.legitRipple-ripple{position:absolute;z-index:-1;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;background:rgba(255,255,255,.4);will-change:transform,width,opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);width:0;opacity:1;-webkit-transition:width .15s linear,opacity .9s ease-out;transition:width .15s linear,opacity .9s ease-out}.legitRipple-ripple:before{content:"";padding-top:100%;display:block}img~.legitRipple-ripple{z-index:auto}.legitRipple-template{display:none}.legitRipple-custom>*{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
</style>
<script>
        //<![CDATA[
        /*! legitRipple.js v1.1.0: ripple.min.js by Matthias Vogt (ISC license) */
        !function(t){t.fn.ripple=function(e){if(this.length>1)return this.each(function(n,i){t(i).ripple(e)});if(e=e||{},this.off(".ripple").data("unbound",!0),e.unbind)return this;var n=function(){return d&&!d.data("unbound")};this.addClass("legitRipple").removeData("unbound").on("tap.ripple",function(e){n()||(d=t(this),w(e.coords))}).on("dragstart.ripple",function(t){g.allowDragging||t.preventDefault()}),t(document).on("move.ripple",function(t){n()&&b(t.coords)}).on("end.ripple",function(){n()&&y()}),t(window).on("scroll.ripple",function(t){n()&&y()});var i,o,a,r,s=function(t){return!!t.type.match(/^touch/)},l=function(t,e){return s(t)&&(t=c(t.originalEvent.touches,e)),[t.pageX,t.pageY]},c=function(e,n){return t.makeArray(e).filter(function(t,e){return t.identifier==n})[0]},p=0,u=function(t){"touchstart"==t.type&&(p=3),"scroll"==t.type&&(p=0);var e=p&&!s(t);return e&&p--,!e};this.on("mousedown.ripple touchstart.ripple",function(e){u(e)&&(i=s(e)?e.originalEvent.changedTouches[0].identifier:-1,o=t(this),a=t.Event("tap",{coords:l(e,i)}),~i?r=setTimeout(function(){o.trigger(a),r=null},g.touchDelay):o.trigger(a))}),t(document).on("mousemove.ripple touchmove.ripple mouseup.ripple touchend.ripple touchcancel.ripple",function(e){var n=e.type.match(/move/);r&&!n&&(clearTimeout(r),r=null,o.trigger(a)),u(e)&&(s(e)?c(e.originalEvent.changedTouches,i):!~i)&&t(this).trigger(n?t.Event("move",{coords:l(e,i)}):"end")}).on("contextmenu.ripple",function(t){u(t)}).on("touchmove",function(){clearTimeout(r),r=null});var d,f,h,m,g={},v=0,x=function(){var n={fixedPos:null,get dragging(){return!g.fixedPos},get adaptPos(){return g.dragging},get maxDiameter(){return Math.sqrt(Math.pow(h[0],2)+Math.pow(h[1],2))/d.outerWidth()*Math.ceil(g.adaptPos?100:200)+"%"},scaleMode:"fixed",template:null,allowDragging:!1,touchDelay:100,callback:null};t.each(n,function(t,n){g[t]=t in e?e[t]:n})},w=function(e){h=[d.outerWidth(),d.outerHeight()],x(),m=e,f=t("<span/>").addClass("legitRipple-ripple"),g.template&&f.append(("object"==typeof g.template?g.template:d.children(".legitRipple-template").last()).clone().removeClass("legitRipple-template")).addClass("legitRipple-custom"),f.appendTo(d),D(e,!1);var n=f.css("transition-duration").split(","),i=[5.5*parseFloat(n[0])+"s"].concat(n.slice(1)).join(",");f.css("transition-duration",i).css("width",g.maxDiameter),f.on("transitionend webkitTransitionEnd oTransitionEnd",function(){t(this).data("oneEnded")?t(this).off().remove():t(this).data("oneEnded",!0)})},b=function(t){var e;if(v++,"proportional"===g.scaleMode){var n=Math.pow(v,v/100*.6);e=n>40?40:n}else if("fixed"==g.scaleMode&&Math.abs(t[1]-m[1])>6)return void y();D(t,e)},y=function(){f.css("width",f.css("width")).css("transition","none").css("transition","").css("width",f.css("width")).css("width",g.maxDiameter).css("opacity","0"),d=null,v=0},D=function(e,n){var i=[],o=g.fixedPos===!0?[.5,.5]:[(g.fixedPos?g.fixedPos[0]:e[0]-d.offset().left)/h[0],(g.fixedPos?g.fixedPos[1]:e[1]-d.offset().top)/h[1]],a=[.5-o[0],.5-o[1]],r=[100/parseFloat(g.maxDiameter),100/parseFloat(g.maxDiameter)*(h[1]/h[0])],s=[a[0]*r[0],a[1]*r[1]],l=g.dragging||0===v;if(l&&"inline"==d.css("display")){var c=t("<span/>").text("Hi!").css("font-size",0).prependTo(d),p=c.offset().left;c.remove(),i=[e[0]-p+"px",e[1]-d.offset().top+"px"]}l&&f.css("left",i[0]||100*o[0]+"%").css("top",i[1]||100*o[1]+"%"),f.css("transform","translate3d(-50%, -50%, 0)"+(g.adaptPos?"translate3d("+100*s[0]+"%, "+100*s[1]+"%, 0)":"")+(n?"scale("+n+")":"")),g.callback&&g.callback(d,f,o,g.maxDiameter)};return this},t.ripple=function(e){t.each(e,function(e,n){t(e).ripple(n)})},t.ripple.destroy=function(){t(".legitRipple").removeClass("legitRipple").add(window).add(document).off(".ripple"),t(".legitRipple-ripple").remove()}}(jQuery);
        $(".bg-fm").ripple();
        //]]>
</script>

• Now save your template and you're done.

How To Add Official Facebook Messenger Message Button?

Won't you like to see the demo first?

Demo [Official Button]

Official Messenger
Button [White Theme]

The messenger message button which is official isn't good at all in my view. Both in its appearance and working. It needs JavaScript and Facebook SDK to get loaded which could decrease your blog's loading speed. But, just for information, or if you already have Facebook SDK in your template, let's know how to add the official version of Facebook Messenger message button.

• Firstly, load Facebook SDK in your template by adding this code before </body> in your template:

<script>
        //<![CDATA[
        (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_GB/sdk.js#xfbml=1&version=v2.5&appId=1738888786347521";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
        //]]></script>

• Save your template.
• Now, choose a place where you would like to show the message button and put this HTML at that location:

<div class="fb-messengermessageus" 

         messenger_app_id="95100348886" 

         page_id="XYZ" 

         color="blue"

         size="large">

    </div>

• Currently, you can only change "blue" to "white" for changing the theme of the button. Don't forget to change "XYZ" to your Facebook page's or profile's ID (you can get your Facebook page's ID by going to Page > About > Page Info > last line)
• You're done!

What's More?

Facebook Messenger Message Box

You can even add a message box which is offered by Facebook itself and is official. There are many customization options also available. So, let's quickly also know that how to add a "Facebook Messenger Message Box":

• Load Facebook SDK (as usual; you can use the code given above).
• Now, use this HTML where you would like to show the messenger message box:

   <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>

• Change the values according to your comfort.
• You're done! =)

Final Words

I hope you have learned a lot. I would like to thank labnol because the hint for creating these Facebook elements was given my them. And, I hope you would like to share this page with all of your friends to keep this info in reach of everyone. Gratitude! :)

Share this post