Embed Facebook Messenger Widget in Your Website

Embed Facebook Messenger Widget in Your Website

Facebook Messenger is now everywhere and if you want to put your business online, this will help you to get success. Facebook Messenger has more than a billion monthly users. So, if you want to stay connected with your readers or customers then Facebook Messenger is the best option. For that, you have to implement Facebook Messenger Chat Widget on your website to get a response from your customers of your products or services you provide. Your future customers can easily get in touch with you. So, in this tutorial, I’ll show you how to add Facebook Messenger Chat Widget on your website. This is a very simple procedure, you don’t need to code for that.

Read More: WordPress Tutorials

When you apply this widget on your website, visitors can easily send you a message on your Facebook Page. The best part of this widget is it doesn’t cover more space on your website like other widgets, it needs only a space of button! It is a Facebook Messenger button which is placed at the lower right corner of your web page. When you click on it, a window will open and you can write your message and send it. It’s so easy!

How to add Facebook Messenger Chat Widget?

It’s very simple to add Facebook Messenger Chat Widget on your website. All you need to do is copy the following JavaScript in your website or widgets. This JavaScript is compatible with Blogger and WordPress. So, if you have a website from these platforms then you can also implement Facebook Messenger Chat Widget on your website. But make sure before inserting this JavaScript in your website, copy it to any text editor and replace Mac Specialist Facebook Page link to your Facebook Page link!

<style>.fb-livechat,.fb-widget{display:none}.ctrlq.fb-button,.ctrlq.fb-close{position:fixed;right:24px;cursor:pointer}.ctrlq.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}.ctrlq.fb-button:focus,.ctrlq.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}.ctrlq.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}.ctrlq.fb-close{z-index:4;padding:0 6px;background:#365899;font-weight:700;font-size:11px;color:#fff;margin:8px;border-radius:3px}.ctrlq.fb-close::after{content:’x’;font-family:sans-serif}</style>

<div class=”fb-livechat”>
<div class=”ctrlq fb-overlay”></div>
<div class=”fb-widget”>
<div class=”ctrlq fb-close”></div>
<div class=”fb-page” data-href=”https://www.facebook.com/macspecialistblog/” 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/macspecialistblog/” class=”fb-xfbml-parse-ignore”> </blockquote>
</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),$(“.ctrlq”).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>

How to Insert JavaScript on WordPress?

Login to your website backend. Go to Gadgets under Appearance. Select Text Widget and drag it some place where you like but don’t worry it doesn’t cover more space on your website. Select Text and paste JavaScript. Save Changes and boom!

embed facebook messenger widget

 

Refresh browser cache by Pressing Control+F5 and you will notice at the lower right corner Facebook Messenger button. When anyone goes there and send you a message, it will directly go to your Facebook Page Inbox. If you replied then it will appear at Facebook Messenger app on their smartphone. Or use can use Insert Headers and Footers plugin to insert JavaScript code into WordPress.

Read More: How to add HTML code to WordPress

The best part about this Widget is, your visitors also like your Facebook Page so you don’t need to implement any Facebook Page Widget to get likes from your visitors. So, it’s very important and very useful Widget to stay connected with your visitors.

That’s it for this tutorial, I hope you like it. If you did then thumbs and share with your friends. Leave your comments below and tell me it’s working for your or not? and if you having any issues then comment below.

Subscribe newsletter/RSS for latest updates.

See you in the next one.

Thank You.

Read More:

What is RSS? How to use RSS in WordPress?

What is RSS? How to use RSS in WordPress?

When I started blogging I daily visit blogger and read their content. And I usually found some common thing on every blog. Some orange button and when I click on it I got a page where all posts are saved. I thought what is this, is kind of database or something? I didn’t know what is it? So, I started to search on the internet and I found some interesting things about RSS.

Read More: How to Create a Website/Blog?

WHAT IS RSS?

RSS stands for Rich Site Summary and basically, it’s piece of software which allows your readers to read your content without going to the particular blog. RSS is basically a structure XML document that includes full or summarized text along with other metadata such as published date, author name etc. So, if you are following the 5-6 blog and if you subscribe that RSS feed so you can easily read those articles from RSS feed reader. You don’t have to go their blog and find the latest article they post and then read, which is time-consuming. So, RSS feed is very important for blogs or informative websites where daily posts some interesting stuff.



If you are the owner of any WordPress website you should know about it and interesting part is WordPress automatically publishes RSS feeds of your content & comments. If you know about RSS, that’s great otherwise stick with this article and I’m damn sure you will get complete information about RSS.rss wordpress

ADVANTAGES OF RSS FEEDS

There are so many advantages like your subscribers can read your content easily without visiting your website. There are many feed readers on the market right now but the best software is Feedly which is also available on Android or iOS devices. So, grab the links of your favorite blogs and add to Feedly. You don’t have to remember URL of the blogs. You will get all information at one place.

Feedly is available on mobile devices, you can read feeds from anywhere and even offline. Feedly also allows you to share the articles on social media so if your readers like the article then they can share it on social media. So, you will get more traffic towards your blog. You can easily find the latest article of your favorite blog easily and once you read that article you can Mark as Reading. The biggest advantage is, you save time by visiting every blog you like and read as many articles you want.

HOW TO USE RSS FEEDS?

You can use RSS reader, Feedly or Feed Burner. From these 3 I really like Feedly which is a free RSS reader. Feedly is available as a browser add-on as well as Android, iOS app and Kindle devices. The best part is it is available across every device so you can sync your subscription across any devices you have and even resume reading wherever you left it. You can add as many blogs in one account. The procedure is so simple you have to enter the only URL and you are ready to go!rss wordpress

You can search your favorite topic and you can subscribe the updates from that topic. You can categorize some of your favorite blogs like tech blog, fashion blog, review blog, travel blog etc. Feedly has some great features like highlight the line, social media share, print, email share and much more.

You can download Feedly apps from here;

iOS: https://itunes.apple.com/us/app/feedly-get-smarter/id396069556?mt=8

Android: https://play.google.com/store/apps/details?id=com.devhd.feedly&hl=en

HOW TO ADD RSS FEED BUTTON ON YOUR WEBSITE?

You can add RSS feed button in your WordPress website to allow your readers to subscribe your feed. For that you can add RSS button in the sidebar you can see this on my blog’s sidebar. You can use Feedburner or Feedblitz to get additional statistics regarding your feeds. Feedburner also allows email subscription box which you can add into your sidebar. You can also you Aweber, MailChimp for email subscription box.

I hope you like this article. Thumbs if you did and share if you love. Leave your thoughts below.

See you in the next one.

Thank You.

Read More:



How to Search Videos within a YouTube Channel on Smartphone

How to Search Videos within a YouTube Channel on Smartphone

Hello, YouTube is the 2nd large search engine. Daily 1B views on YouTube worldwide. There are so many people daily stream YouTube and stay connected with it. YouTube provides the best functionality to search particular video, monetization & advertising through videos and much more. There are more half billion people mostly stream YouTube on mobile devices compared to laptop/PC. So, there is a feature YouTube gives only on PC/laptop, not on mobile devices.



You might see while streaming YouTube on PC/laptop, if you are following any YouTuber and you check out some interesting videos on his channel then you use the search function to search any particular video of his channel. But when you are streaming on mobile devices like Android, iOS & Windows, you won’t find that search button which allows searching within the YouTube channel.search youtube videos

So, to overcome this issue, there is “YouTube Search Engine” app which can help you to overcome this problem. You can sign in with your Google account. You will see some kind of YouTube search engine there. The best part is now you can use this website on your smartphone instead of using official YouTube app.

Read More: YouTube SEO: The Ultimate Guide

search youtube videos

Once you log in with your YouTube account, you will see the subscribers list on the “Select YouTube Channel” drop-down box. Now, select the YouTuber and enter the name of the video on “YouTube Search Query” and hit Search. You can’t add multiple accounts but you can switch the accounts. Click “Logout” and login to your new account. The best part is this app doesn’t store any data of your YouTube account. If you are using PC/laptop for YouTube streaming then this app is not for you.search youtube videos

I hope you like this trick. Thumbs if you did and share if you love. Leave you thoughts below and tell me did you like it or not? Did you know about this trick before? I love to hear from you!

See you in the next one.

Thank You.

Read More: