How to Add the Facebook Messenger Chat Widget in your Blogger Website

Facebook Messenger, with more than a billion monthly users. enables brands to have real-time one-on-one conversations with their customers. Businesses can also embed Facebook messenger buttons on their website and visitors, whether they have a pre-sales question or need to resolve an issue, can initiate a conversation with the simple click of a button.

The only downside with embedded buttons is that visitors will have to exit your website to send a message through Facebook Messenger. Wouldn’t it be nice if people could stay on your website and yet be able to message you through Facebook?So let's Begin....

Step-1: Log In To Your Blogger Account.

Step-2: Click On Layout Option From The Sidebar.

Step-3: Click on Add A Gadget From Sidebar.

Step-3: Click on HTML/Javascript Option From The Pop UP Window.

Step-4: Copy The Below Codes And Paste Them Into The Box.

1:  <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>  
2:  <div class="fb-livechat">  
3:   <div class="ctrlq fb-overlay"></div>  
4:   <div class="fb-widget">  
5:    <div class="ctrlq fb-close"></div>  
6:    <div class="fb-page" data-href="https://www.facebook.com/blogspotpoint/" data-tabs="messages" data-width="360" data-height="400" data-small-header="true" data-hide-cover="true" data-show-facepile="false">  
7:     <blockquote cite="https://www.facebook.com/blogspotpoint/" class="fb-xfbml-parse-ignore"> </blockquote>  
8:    </div>  
9:    <div class="fb-credit">   
10:     <a href="https://www.blogspotpoint.com" target="_blank">Facebook Chat Widget by Blogspotpoint.com</a>  
11:    </div>  
12:    <div id="fb-root"></div>  
13:   </div>  
14:   <a href="https://m.me/digital.inspiration" title="Send us a message on Facebook" class="ctrlq fb-button"></a>   
15:  </div>  
16:  <script src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9"></script>  
17:  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  
18:  <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>  

Note: Change The Facebook Page URL From The Codes.

Step-5: Now Save The Widgets And You Are done.

Now You will found a floating messenger icon in your website.When you click on the icon this pop up message box will open.

Your websites visitors can message you directly from your website by this method.Hope this will be very useful for you.

How To Add an Instagram Widget in a Blogger Blog

Instagram is a most famous picture and photograph sharing system application for smartphones.It's additionally have a place with long range interpersonal communication stage like Facebook, Twitter, and Flicker.You can enroll as a client in Instagram. When you post a photograph or video on Instagram, It will show on your profile.So, others can tail you, as on your photographs and remark on photos.Same thing additionally you can do, remark and like different photographs. In instagram, there are 200 millions dynamic clients utilize a month.

Adding Instagram gadget to blogger, you can get more offices to your blog. Since it will demonstrate your photographs in profile pages. At whatever point you go elsewhere, you can take a photograph and offer it on Instagram. There are more channels you can add to photographs. This Instagram gadget, exceptionally plan for blogger and it will demonstrate your pictures on blogger even they are not your supporter.

By including this Instagram gadget for blogger ,You can build your devotee. When they visit your blog and if your common photographs are intriguing, they will tail you. What's more, you need to share photographs as indicated by your blog content,for case on the off chance that you doing nourishment making blog, you can share about foods.It will simple to get more supporters in Instagram. 


Today, this article will clarify, how to add Instagram gadget to your blog webpage with well ordered. By utilizing this blogger gadget you can redo Instagram gadget appearance like foundation shading, text style shading and how to demonstrate this gadget on blogger.So simply take after beneath steps.

How to Add An Instagram Widget in Blogger

1: You need to visit this site to get Instagram widget  http://www.intagme.com/

2: Type Instagram  username first

3: You can choose slideshow as Widget type

4: Thumbnail Size 100

5: You can select Photo Border  If you want a border to photos

6: You can choose Background Color match to your template color with color picker

7: If you want to add sharing button select Yes

Note: Once yo done, click preview and check your Instagram widget appearance.

8: Once you are done click Get Code and copy it.

9: Now just login to your blogger account https://www.blogger.com

10: Go to layout on left side bar on blogger dashboard

11: Click Add Gadget,  Select HTML/JavaScript gadget on popup window.

12: Paste the instagram widget code that you copied from intagme website and click Save

13: Now you can drag the widget where you want to keep and click Save Arrangement

You are done :)

Once you added Instagram widget to blogger, you can ask your visitors to follow you. Before do it, just make sure to add few photos to your profile and profile photos as well.Then they will get trust about you profile and follow you.

I hope you added Instagram gadget to your blog.Hence, you can share photographs and recordings as i said above. To change shading or appearance of this Instagram gadget, you can go that site and alter it as your need.

How To Add Twiiter Widgets In Blogger Blog

You can display your latest Tweets in your sidebar by pasting embed code for a Twitter widget in a text widget.

Here is an example of what it looks like:

ADD A TWITTER WIDGET

1.  Go to publish.twitter.com

2.  Select what you want to embed.

• For a User Timeline, enter the username of the user whose tweets you want to display.
• 
  

• For Lists, enter the URL of the list you want to display.

For a Hashtag or Search, you need to log into your Twitter account and then use Create A Search Widget.

3.  Choose your display option. We are using the Embedded Timeline option.

4. Click on set customization option.

5.  Set the height and width of the widget and click Update.  You can also change the widget color and default link color.

• We recommend 600 high by 220 wide.

6.  Copy the embed code.

7.  Paste the embed code from Twitter into the html/javascript widget in your sidebar.

8.   You should see a Twitter widget in your sidebar.