Hello dosto aaj hum log janege ki Facebook Messenger Chat Widget Ko Blog/Website Me Kaise Add Kare. Asha karta hu aap ne bhi apne blog ya website ke liye. Facebook Page to jarur banaya hoga. Aur aap ke visitors aap ke facebook page par message bhi karte hoge. Magar us ke liye aap ke visitors ko aap ke facebook page par ja kar message karna hota hai. But agar aap apne blog ya website par hi facebbok messenger ka option dede. To aap ke visitors aap ki blog ya website se. Facebook messenger dwara app ke facebook page par direct message send kar shakte hai.
Facebook Messenger ko apne blog ya website par add kar dene se. App ke aur visitors ke beech ka connection pahle se kahi jayada majbut ho jayega. Jo ki her ek blog ya website owner chahta hai. To cahliye aur jayada baat na karte huwe. Ab hum log jaan lete hai ki ‘Facebook Messenger Chat Widget Ko Blog/Website Me Kaise Add Kare’. But us se pahle jaan lete hai Facebook Messenger kya hai.
Facebook Messenger Kya Hota Hai?
Aaj ka samay internet aur social media ka samay hai. Facebook Messenger ek instant messaging service aur software application hai. Ish ke dwara aap bina facebook ko open kiye. Apne friends ko direct messenge send ya receive kar shakte hai. Facebook ne ish se Aug 2011 ko iOS aur Android apps ke liye released kiya tha. Facebook messenger se aap voice aur video calling bhi kar shakte hai. April 2017 tak Facebook Messenger ke 1.2 billion user ho chuke the.
Apne Blog/Website Me Facebook Messenger Chat Widget Kaise Add Kare?
Facebook Messenger Chat Widget apne blog ya website me add karna bahut hi aasan hai. Kyu ki aap ko bus ek code ko apne blog ya website me add kar dena hai. Us ke baad aap ka Facebook Messenger Chat Widget ek contact form ki tarah se kaam karne lagega.
Step 1 : Sab se pahle aap apne blogger ya wordpress account me login kar dashboard par jaye. Aur niche jo code diya huwa hai use copy kar le.
<style>.fb-livechat,.fb-widget{display:none}.HIH.fb-button,.HIH.fb-close{position:fixed;right:24px;cursor:pointer}.HIH.fb-button{z-index:1;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff;width:60px;height:60px;text-align:center;bottom:24px;border:0;outline:0;border-radius:60px;-webkit-border-radius:60px;-moz-border-radius:60px;-ms-border-radius:60px;-o-border-radius:60px;box-shadow:0 1px 6px rgba(0,0,0,.06),0 2px 32px rgba(0,0,0,.16);-webkit-transition:box-shadow .2s ease;background-size:80%;transition:all .2s ease-in-out}.HIH.fb-button:focus,.HIH.fb-button:hover{transform:scale(1.1);box-shadow:0 2px 8px rgba(0,0,0,.09),0 4px 40px rgba(0,0,0,.24)}.fb-widget{background:#fff;z-index:2;position:fixed;width:360px;height:435px;overflow:hidden;opacity:0;bottom:0;right:24px;border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;box-shadow:0 5px 40px rgba(0,0,0,.16);-webkit-box-shadow:0 5px 40px rgba(0,0,0,.16);-moz-box-shadow:0 5px 40px rgba(0,0,0,.16);-o-box-shadow:0 5px 40px rgba(0,0,0,.16)}.fb-credit{text-align:center;margin-top:8px}.fb-credit a{transition:none;color:#bec2c9;font-family:Helvetica,Arial,sans-serif;font-size:12px;text-decoration:none;border:0;font-weight:400}.HIH.fb-overlay{z-index:0;position:fixed;height:100vh;width:100vw;-webkit-transition:opacity .4s,visibility .4s;transition:opacity .4s,visibility .4s;top:0;left:0;background:rgba(0,0,0,.05);display:none}.HIH.fb-close{z-index:4;padding:0 6px;background:#365899;font-weight:700;font-size:11px;color:#fff;margin:8px;border-radius:3px}.HIH.fb-close::after{content:'x';font-family:sans-serif}</style><style>.fb-livechat,.fb-widget{display:none}.HIH.fb-button,.HIH.fb-close{position:fixed;right:24px;cursor:pointer}.HIH.fb-button{z-index:1;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff;width:60px;height:60px;text-align:center;bottom:24px;border:0;outline:0;border-radius:60px;-webkit-border-radius:60px;-moz-border-radius:60px;-ms-border-radius:60px;-o-border-radius:60px;box-shadow:0 1px 6px rgba(0,0,0,.06),0 2px 32px rgba(0,0,0,.16);-webkit-transition:box-shadow .2s ease;background-size:80%;transition:all .2s ease-in-out}.HIH.fb-button:focus,.HIH.fb-button:hover{transform:scale(1.1);box-shadow:0 2px 8px rgba(0,0,0,.09),0 4px 40px rgba(0,0,0,.24)}.fb-widget{background:#fff;z-index:2;position:fixed;width:360px;height:435px;overflow:hidden;opacity:0;bottom:0;right:24px;border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;box-shadow:0 5px 40px rgba(0,0,0,.16);-webkit-box-shadow:0 5px 40px rgba(0,0,0,.16);-moz-box-shadow:0 5px 40px rgba(0,0,0,.16);-o-box-shadow:0 5px 40px rgba(0,0,0,.16)}.fb-credit{text-align:center;margin-top:8px}.fb-credit a{transition:none;color:#bec2c9;font-family:Helvetica,Arial,sans-serif;font-size:12px;text-decoration:none;border:0;font-weight:400}.HIH.fb-overlay{z-index:0;position:fixed;height:100vh;width:100vw;-webkit-transition:opacity .4s,visibility .4s;transition:opacity .4s,visibility .4s;top:0;left:0;background:rgba(0,0,0,.05);display:none}.HIH.fb-close{z-index:4;padding:0 6px;background:#365899;font-weight:700;font-size:11px;color:#fff;margin:8px;border-radius:3px}.HIH.fb-close::after{content:'x';font-family:sans-serif}</style> <div class="fb-livechat"> <div class="HIH fb-overlay"></div> <div class="fb-widget"> <div class="HIH fb-close"></div> <div class="fb-page" data-href="https://www.facebook.com/helpsinhindi/" data-tabs="messages" data-width="360" data-height="400" data-small-header="true" data-hide-cover="true" data-show-facepile="false"> <blockquote cite="https://www.facebook.com/helpsinhindi/" class="fb-xfbml-parse-ignore"> </blockquote> </div> <div class="fb-credit"> <a href="http://helpsinhindi.com/facebook-messenger-chat-widget/" target="_blank">Facebook Messenger Chat Widget</a> </div> <div id="fb-root"></div> </div> <a href="https://m.me/helpsinhindi" title="Send us a message on Facebook" class="HIH fb-button"></a> </div> <script src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9"> </script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script>$(document).ready(function(){var t={delay:125,overlay:$(".fb-overlay"),widget:$(".fb-widget"),button:$(".fb-button")};setTimeout(function(){$("div.fb-livechat").fadeIn()},8*t.delay),$(".HIH").on("click",function(e){e.preventDefault(),t.overlay.is(":visible")?(t.overlay.fadeOut(t.delay),t.widget.stop().animate({bottom:0,opacity:0},2*t.delay,function(){$(this).hide("slow"),t.button.show()})):t.button.fadeOut("medium",function(){t.widget.stop().show().animate({bottom:"30px",opacity:1},2*t.delay),t.overlay.fadeIn(t.delay)})})});</script>
Step 2 : Upper jo code diya huwa hai. Us code me aap meri Facebook Page ke Username ki jagah. Apne Facebook page ka username daal dijiye. Sab se pahle aap upper diye huwe code ko ek notepad par copy kar lijiye. Aur us me mere username hi jagah apna username daal diiye.
- https://www.facebook.com/helpsinhindi
- http://helpsinhindi.com
- https://m.me/ helpsinhindi
Step 3 : Username dalne ke baad. App puri code ko copy kar le. Phir apne WordPress ya Blogger ke HTML Widget me paste kar de. Aur agar aap HTML code me add karna chahte hai. To Body tag me bhi paste kar shakte hai. Paste karne ke baad Save jarur kar de. Save karte hi Facebook Messenger Chat Widget aap ke blog me add ho jayega. Chahe to aap ja kar check kar shakte hai.
Widget Code source: Labnol
Asha katra hu ab aap ko pata chal gaya hoga. Facebook Messenger Chat Widget Ko Blog/Website Me Kaise Add Kare. But agar koi problem aati hai. To aap hume comment kar ke puch shakte hai. Hume aap ki madad kar ke bahut khushi hogi. Finally ab aap apne visitors se direct connect ho kar accha relation bana payege.
Dosto aap ko mera yah post kaisa laga. Agar aap ko mera yah post pasand aaya hai. To ish se social media par share jarur kare. Aur ish si tarah ke interesting update ke liye humare Newsletter ko Subscribe jarur kar le. Taki aap ke email par humare new post ka notification milta rahe. Thank you.
Post Pasand Aayi Hai To – Please Share This Post On Social Media:
Share Your Comments & Feedback: