Friday, 30 December 2016

How to Monetize Google Maps on your Website with AdSense Ads

You have been using Google AdSense ads to monetize the content of your website but did you know that you can also use the same AdSense program to also monetize any Google Maps that are embedded on your web pages. You can embed a Google Map and AdSense ads will be automatically served inside the map that will either be contextually relevant to the content of the page or targeted based on the location of the visitors.

The Google Maps block embedded below contains a rectangular AdSense ad unit placed near the top-center area of the map. Where Am I is another example of a website that embeds Google Maps with ads.



AdSense Ads for Embedded Google Maps

Google Maps offers you an easy option to embed maps onto your website but the default embed code does not allow monetization. You’ll have build the map on your own using the Google Maps API to enable advertising and this isn’t difficult either. Let me show you in few easy step.

To get started, go to the Google AdSense website and create a new ad unit. You can choose the default color scheme for the ad unit (white background) and pick responsive for the size. The latter doesn’t matter though as the ad unit will automatically fit inside the container map.

Next, copy-paste the following Google Maps embed code anywhere in your web template.

<div id="google-maps" style="width:500px; height:500px;"></div>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp">
 </script>
<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
 </script>

<script>

  function showGoogleMaps() {

    var mapOptions = {
      center: new google.maps.LatLng(38.8977, -77.036),
      zoom: 5
    };

    var map = new google.maps.Map(
      document.getElementById('google-maps'), mapOptions);

    var ad = '<ins class="adsbygoogle" \
              style="display:inline-block;width:300px;height:100px" \
              data-ad-client="ca-pub-xxxx" \
              data-ad-slot="yyyy"></ins>';

    var adNode = document.createElement('div');
    adNode.innerHTML = ad;

    map.controls[google.maps.ControlPosition.TOP_CENTER].push(adNode);

    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
      (adsbygoogle = window.adsbygoogle || []).push({});
    });

  }

  google.maps.event.addDomListener(window, 'load', showGoogleMaps);

</script>

You can replace the height and width of the Google Maps in line #1 to fit your website layout while the latitude and longitude of the place needs to be replaced in line #11. Finally, xxxx and yyyy in the embed code should be replaced with your AdSense Publisher ID and the Ad Slot ID respectively. You can find these values in the embed code generated by AdSense.

How to Hide AdSense Ads on your Website

Google AdSense supports Responsive Ads which means that the size of AdSense ads on your website will automatically change based on the visitor’s device. Thus, if they are viewing your pages on a desktop computer, they may be served the bigger 728×90 leaderboard while the same ad unit may serve a smaller 468×60 banner to visitors who are on a tablet.

There’s no need to change the code as the AdSense script smartly detects the browser’s width and serves the right size accordingly.

Now consider a slightly different scenario where, instead of showing a smaller sized ad, you would like to completely hide the AdSense ad if the screen width is less than ‘n’ pixels. For instance, you may have a 160×600 px Skyscraper unit in your website’s sidebar but it should be displayed only when the site is being viewed on a desktop computer and not on a mobile phone.

There are two ways to achieve this. You can either write a CSS media query that will completely hide the sidebar on a mobile phone and thus the included AdSense ad will also be hidden from the visitor. This will however be against AdSense program policies because the AdSense ad will still be rendered on the visitor’s screen though hidden from view.

How to Hide AdSense Ads with CSS Media Queries

What we therefore need is a mechanism where the the AdSense ad is itself ‘blocked’ from rendering on a small screen. This is also possible with CSS media queries but the big difference is that we need to apply the CSS rules to the ad element and not the parent container (which in our case is the sidebar). Let me explain:



What you see above is a standard AdSense code snippet that will render a 160×600 pixels ad unit. The size (height and width) of the ad is specified as an inline style.

If you copy-paste the above ad unit as is into your website, it will always download and render the ad irrespective of the visitor’s screen size. If you however need to prevent the AdSense ad from showing on small screens, we need to make a few “officially permitted” changes to the default code.

The modified code will look something like this:



If you carefully notice the two snippets, you’ll find that we’ve added a new class sidebar_ads (you can give it any name) to the default AdSense snippet. Next we’ve added a media query that will hide all elements of this class if the screen width is less than 480 pixels. That’t it.

With this approach, no ad requests is made to the Google server and thus no ad is shown to the visitor. The ad area will be hidden and the content below will get pushed up leaving no whitespace, just as you’d like it to be.

The Ultimate WordPress Guide For Beginners

where you will be learning how to create and setup your WordPress blog. This guide is exclusively for new bloggers who want to set up their blog on the WordPress platform.

For existing WordPress bloggers, I have also listed some pro tips that you should start implementing right now to make your WordPress blog more professional.
This WordPress guide will show you the following things:
  • How to buy web-hosting and a domain name for your WordPress blog.
  • Essential things to setup after installing WordPress.
  • Things that you need to do immediately after the initial WordPress configuration (Step by step tutorials with pictures).
  • WordPress plugins that you need to install and how to set them up.
  • Pro tips to make your WordPress blog grow faster.
  • Essential SEO of your WordPress blog.
You can have your WordPress blog up and running in the next 10 minutes.
Do remember, this WordPress for beginner’s guide is crafted with the utmost care and is regularly updated (Last updated – July 2016). You should bookmark this page for future reference. You are encouraged to browse our WordPress catalog where you can find more articles apart from what I have listed here.

Creating your WordPress blog (First step)

The first thing that you need to do in order to create a WordPress blog is to buy web-hosting and a domain name.
  • Web-hosting is where your files are stored.
  • The domain is the name of your blog.
You can buy hosting from Bluehost, which comes with a free domain and costs only $5.95/month for unlimited hosting space and bandwidth (with the discount link below).
This process will take 5 minutes and here is a video guide to help you along the way. Click on the below link and get a hosting package now.
  • Sign up for Bluehost (Exclusive discount + free domain name)
The next thing you need to do is install the WordPress blog onto your domain name. This process will take another 5 minutes. Below is the step by step tutorial:
  • How to install WordPress blog on Bluehost in 5 minutes
Now you have your WordPress blog ready. You just need to make a few changes such as setting up permalinks, updating the ping list, setting up discussion settings, etc. Don’t worry, it’s not technical and you can quickly do it with the help of the guide below:
  • Essential settings after installing WordPress blog
Good job on getting this far! Your blog is now up and running.
But before you play with more stuff, let’s quickly watch a few videos that will make you understand WordPress better.
  • Free WordPress videos for beginners
A few things to learn before moving to the next level:
Here are a few more things that you need to learn before moving to the next level. This will help you to move through everything quicker and without getting stuck anywhere in between.

How to Receive Notifications for Google Forms on your Mobile Phone

The Email Notifications add-on for Google Forms will send you the form data in an email message each time a respondent submits your form. You can use the same add-on to also send automated emails to the form respondents immediately after they complete your Google Form.

The popular Google Forms add-on has been updated and it can now send push notifications to your mobile devices as well. That means when respondents complete and submit your online form, you’ll get an instant real-time notification (sample) on your iPhone or Android phone. The notification text can also include answers from the Google Form.

A fast response time is a key to success, especially in areas like customer service and closing sales leads, and mobile notifications will ensure that your important form entries are never lost in the daily deluge of emails.

Setup Mobile Notifications for Google Forms

It takes a few easy steps (video tutorial) to get up and running.

Install Email Notifications for Google Forms from the Google Add-on store.
Install the IFTTT mobile app on your Android or iOS device.
Next, we need to create a connection between our Google Form and the IFTTT app so that mobile notifications are triggered on the mobile phone immediately after the form is submitted.

1. Configure IFTTT

Open ifttt.com on your desktop and create a new applet. Choose the Maker service for if-this condition and set the Event name as the name of your Google Form. For if-this-then-that action, choose Notifications as the service and set the text as {{Value 1}}. Click Finish to make your IFTTT applet live.

2. Configure Google Forms

Open any Google Form, go to the Addons menu, choose Email Notifications and then select Mobile Notifications. Enter the Event name, the IFTTT key and the notification text. You can put any {{form field name}} in the text and these will be replaced with actual values filled by the user.

That’s it. Click the Test button to test the connection between the form and your mobile phone. If it works, click Save to enable mobile notifications.



If you have multiple Google Forms, you need to create separate IFTTT applets for each form and the event name should be unique for each applet.

Internally, when someone submits your form, the Google Addon triggers and sends a web request to the IFTTT service which in turn pushes the notification to your mobile device.

How to Add a Picture Password to your Google Forms

Google Forms have this “all-or-none” problem. The forms are either public (anyone can fill your form) or, if you are on Google Apps, you can create forms that are visible to everyone in your organization. It is however not possible to restrict access to forms to specific people.

Another shortcoming is that Google Forms do not allow passwords or CAPTCHAs to prevent spam bots from filling your forms with random data. Google itself maintains the reCAPTCHA project but it is not known if integration with Google Forms is in the works. There is a workaround, though.

Google Forms with Picture Passwords

Google Forms do not support CAPTCHA but they do offer an option to attach images with questions. These can be used as picture passwords.



The idea is simple.

We add a multiple-choice question where the user is asked to pick an image from a selection of multiple images. If they select the correct image, the main form is displayed else an error message is shown. Also, these images are shuffled so the answer’s position is random for each respondent.

How to Make Google Forms with Picture Passwords

Take this sample Google Form for a spin and you’ll get the idea.

Open a new Google Form and create 3 sections. The first section will have the picture password, the second section will contain the error message and the last one will have the actual questions that you want to ask users who have passed the anti-spam test.

In the first section, create a multiple choice question and attach a different image with every choice. Make this a required question and turn on the shuffle order for the question. Also turn on the option “Go to section based on answer” for the section so that only valid answers are taken to the main form.



For each choice that is not valid, choose “Go to section 2” (see screenshot) and choose “Go to section 3” for the right choice. In section 2, do not add any questions but for the error message in the section description. Also set “Go to section 1” after section 2 so that the user cannot go to the main section 3 without passing the picture test.

Make the Google Form live and respondents will only see the main questionnaire if they have solved the problem in section 1.

Friday, 6 May 2016

How to Delete the Useless Photos in your WhatsApp Automatically

WhatsApp is probably the largest space hog on our mobile phones. We all have friends and relative who diligently forward us every single motivation quote and meme they’ve received from their own network. Some think it is their duty to wake us with a “good morning” message accompanied with photos of the rising sun or chirping birds.

The bigger problem with WhatsApp is that these ‘spam’ messages often originate from contacts who are close to you in real life and thus blocking them would be considered rude. You have an option to mute WhatsApps groups but the downloaded images would still take up precious space on your mobile phone.

A simple solution to the problem would be that you open the Photo Gallery app on your Android phone, or use a File Manager app to locate the media folder of WhatsApp, and delete the entire folder containing those WhatsApps images. But since WhatsApp makes no distinction between real photographs and useless forwards, you risk deleting the good pictures too.


Siftr, an Indian startup founded by ex-Adobe employees, has launched an intelligent Android App that can help you get rid of all the junk photos from your WhatsApp with no effort.
The app, Magic Cleaner, scans the media folder of your WhatsApp app and automatically detects all the junk images including screenshots, memes, video screen grabs, cartoons and other pictures with overlay text. You are then offered an option to delete all the detected images in one go.
Previous: Create Photography Websites with Siftr
How does it work? Like Cloud Vision, Google’s image recognition API, Siftr has developed their own image recognition engine that analysis the content of an image to determine whether it’s junk or not. It requires an active Internet connection because the image analysis is done on Siftr servers and not locally on the mobile phone. However it is unlikely to blow up your data plan as the app only uploads a small hash of the image and matches it against their own database of images.
I ran the photo cleaner app against a WhatsApp account that had about 4000+ images and it could successfully clean it up in about 10 minutes. The accuracy was very impressive. The app is free but you can only auto-delete a limited number of images in a single run. If you would like to delete more images, you either need to invite a friend to use the app or wait for a day.

If you have WhatsApp, which you probably do, Magic Cleaner is a must-have app. An iPhone version is in the works. Also, though the WhatsApps images are deleted from the memory card, a blurred thumbnail will still exist inside your WhatsApp message logs and you’ll have to erase them manually.





How to Write a Twitter Bot in 5 Minutes

Twitter Bots can do interesting things. You can tweet questions like “how many calories are in diet coke” to @DearAssistant and the Twitter bot, like Google Now or Apple Siri, will reply with the answer. The @HundredZeros bot tweets links to eBooks that are free on Amazon. Another Twitter bot @WhatTheFare will tell you the Uber fare between two locations.




A bot is a program that runs in the background and, when it encounters a command, it performs some action. For instance, you can have a grammar bot that looks for tweets containing misspellings and tweet the correct spelling.
A bot can automatically favorite or retweet tweets that match certain criteria. It can follow Twitter user who have tweeted a particular phrase. A brand may build an auto-reply bot that automatically responds when the brand gets a @mention on Twitter. You may have a bot that auto-sends a DM (direct message) to users who follow you on Twitter.
Writing a Twitter bot is easy and you can get one up and running in 5 minutes. Our Twitter bots run on Google servers and you don’t need any coding skills to create the bot. The bots are internally written using Google Scripts.

How to Create your own Twitter Bot

The basic idea behind bots is simple. You specify a search phrase and choose an action. The bot will find all tweets that match the search phrase and perform the associated action on those tweets.
Twitter Bots

Step A: Make an App for the Twitter Bot

  1. Create a new account at Twitter that will work as a bot. Then go to apps.twitter.com, sign-in with your new Twitter account and create a Twitter app. Give your app a name, description and put any URL in the website field. Agree to the developer terms and submit the form.
  2. Once the Twitter app has been created, click Modify App Permissions under Application Settings and change the access level to Read, Write and Access Direct Messages.
  3. Next switch to the Keys and Access Tokens tab and click the Create my Access Token button. Twitter will generate the Consumer Keys and Access tokens that we will need in a next step.

Step B: Configure your Twitter bots

  1. Go to labnol.org/bots to open the Twitter bots application. You may have to authorize the bot once.
  2. Edit the values of Twitter Consumer Key, Consumer Secret, Access Token and Access Secret that were generated in the previous step.
  3. Next you need to specify the search phrase for the bots. The app will find all new tweets that match this search phrase and process them all, one at a time. If you have the premium version, you can create up to 5 bots in one go.
  4. Click the Create to initialize the Twitter bot. That’s it. The bots are now initialized and they’ll auto-run in the background.

Twitter Bots Video Tutorial

Please watch the Twitter Bots Video Tutorial (download) for a more detailed getting started guide. It is important to note that Twitter TOS discourages automation so you may want to test the waters with a test Twitter account.



You can use Twitter search operators to find more specific tweets for processing through bots. For instance, use min_faves or min_retweets operator to filter out spammy tweets from search results. Here are some area where bots are handy:
  • If you are changing your Twitter username, set an auto-DM bot for the old account so followers can know about your new screen name.
  • If you are offline during specific hours, setup out of office replies so people can expect a delayed response.
  • Follow users or add them to a Twitter list who tweet on particular topics.

Twitter Bots – Unlock Premium Features

The Twitter bot is available in free and premium editions. The latter includes more features and you are entitled to technical support for 3 months.

Features Free Premium
Favorite Tweets Yes Yes
Retweet Tweets Yes Yes
Auto-Reply to Tweets Yes Yes
Emoji Support Yes Yes
Run bot at specific time Yes Yes
Follow Users No Yes
Add Users to Twitter List No Yes
DM New Followers No Yes
Reply via DMs (to users who allow) No Yes
 How often do the bots run? Once per hour Every 15 minutes
How many Twitter bots can be created? One Five
Support options None Email
Buy Premium Edition

How to Embed Facebook Message Buttons in your Website

Email has always been the preferred mode for reaching out to people on the Internet. Websites would put their email addresses on web pages and made them clickable hyperlinks using the mailto protocol. Things have changed and while email is still considered important, the new generation is known to prefer instant texting apps like Facebook Messenger over email. For them, writing an email is as boring as creating a résumé.

This step-by-step guide explains the various techniques that you can use to easily embed the Facebook Messenger button in your website. When someone clicks the Message Me button, it will directly launch the Facebook Messenger app on their mobile phone or the messenger.com website if they are on the desktop. You can choose to receive messages in your Facebook profile or your Facebook page, if you have one.

A: Simple Facebook Messenger Link


The default Facebook Messenger button is rendered using JavaScript but you can also write them in pure HTML without requiring JavaScript. The advantage is that these buttons (see demo) would show up even if the user has enabled ad blockers and second, you can embed message links inside email newsletters.



All you have to do is replace “XYZ” in the snippet below with your Facebook vanity username. If you don’t have a username yet, you can use your numerical Facebook profile ID instead. The link may be customized    with CSS to resemble a button as seen in this live demo.

  1. <a href="https://m.me/XYZ">
  2. Message us on Facebook
  3. </a>
Tip: If you are not seeing messages sent to your Facebook profile, it is because Facebook automatically hides messages from people that are not in your contacts / friends list. Go to facebook.com/messages, click the “More” dropdown and choose “Filtered” to see all messages that are not in your main inbox.

B: Facebook Messenger Button

This is the default Facebook Messenger button (see live demo) rendered with JavaScript. Unlike the previous option that allows messaging to personal profile as well, this button is only available to Facebook Page owners for them to receive messages from other Facebook users.
To get started, copy-paste the following snippet in your blog template but remember to replace “XYZ” with the numeric ID of you Facebook Page. You can set the color as white for a blue text on white background button.
  1. <script>
  2. window.fbAsyncInit = function() {
  3. FB.init({
  4. appId : '95100348886',
  5. xfbml : true,
  6. version : 'v2.6'
  7. });
  8. };
  9.  
  10. (function(d, s, id){
  11. var js, fjs = d.getElementsByTagName(s)[0];
  12. if (d.getElementById(id)) {return;}
  13. js = d.createElement(s); js.id = id;
  14. js.src = "//connect.facebook.net/en_US/sdk.js";
  15. fjs.parentNode.insertBefore(js, fjs);
  16. }(document, 'script', 'facebook-jssdk'));
  17. </script>
  18.  
  19. <div class="fb-messengermessageus"
  20. messenger_app_id="95100348886"
  21. page_id="XYZ"
  22. color="blue"
  23. size="large">
  24. </div>
Tip: If you are unable to use the Facebook Messenger button, it is likely that your Facebook Page is configured to not receive messages. Go to your Facebook Page settings, choose General, Messages and turn on the option that says “Allow people to contact my Page privately by showing the Message button”.

C: Facebook Messenger Box

You have seen the Facebook Like box embedded in websites but did you know that the same box can also include an inline form allowing any Facebook user to contact you without even leaving your webpage. Here’s a live demo.
In this case you need to replace “XYZ” in the snippet below with the vanity username or ID of your Facebook Page. Anyone who is logged into Facebook can message you from your website itself, similar to regular contact us forms.
  1. <script>
  2. window.fbAsyncInit = function() {
  3. FB.init({
  4. appId : '95100348886',
  5. xfbml : true,
  6. version : 'v2.6'
  7. });
  8. };
  9.  
  10. (function(d, s, id){
  11. var js, fjs = d.getElementsByTagName(s)[0];
  12. if (d.getElementById(id)) {return;}
  13. js = d.createElement(s); js.id = id;
  14. js.src = "//connect.facebook.net/en_US/sdk.js";
  15. fjs.parentNode.insertBefore(js, fjs);
  16. }(document, 'script', 'facebook-jssdk'));
  17. </script>
  18.  
  19. <div class="fb-page"
  20. data-href="https://www.facebook.com/XZY/"
  21. data-tabs="messages"
  22. data-width="400"
  23. data-height="300"
  24. data-small-header="true">
  25. <div class="fb-xfbml-parse-ignore">
  26. <blockquote></blockquote>
  27. </div>
  28. </div>
 You should also check the Facebook Page Plugin to learn about all the other configuration options that can be easily set using the data attributes.

How to Copy an Entire Folder to Another Folder in Google Drive

Google Drive, launched almost 4 years ago, is an online vault where you can store all your files and documents. It offers nearly all the functionality that you would expect in a file manager app making it easier for you to manage files from within the browser. You can move files between folders, rename files, differentiate them with colors, add text notes for easier lookup and more.

However the one piece that is still missing in Google Drive is the ability to copy folders. You can duplicate any file in Google Drive by right-clicking the file and selecting “Make a Copy” but this option is not available for folders. A Google Script exists to copy folders in Google Drive but it is complicated.



The option to duplicate folders doesn’t exist in Google Drive

How to Copy Folders in Google Drive

Wouldn’t it be nice if there were an xcopy (Windows) or rsync (Mac, Unix) like command for Google Drive that would recursively copy everything inside a folder, easily It should not only copy all the files and subdirectories but also retain the directory tree structure and maintain the shared file permissions.
Well, we are not sure if Google will ever provide an option to duplicate folders in Google Drive but there’s an open source web app by Eric YD that does exactly what you are looking for. Here’s how to get started:
  1. Go to labnol.org/xcopy and click the Authorize button.
  2. Allow the app to access your Google Drive files. The app would perform the copy operation directly inside your Google account without involving a third-party server.
  3. Once authorized, select the source folder using the Google File picker and specify the destination folder name.
  4. Click the Copy Folder button to begin the cloning process.
That’s it. The script will run in the background and copy files, one-by-one, into the target folder.  It will log everything in a Google Spreadsheet so you know what’s happening behind the scene.

While optional, the app can also retain permissions and in the case the copied files will be editable/viewable by the same people as the original files. The copying process would however take longer if you choose to copy the sharing permissions.

Copy Folders to another Google Drive Account

Say you have a folder in one Google account (A) that you would like to copy to another Google account (B). While the app doesn’t support copying across accounts, there’s a simple workaround:
  1. Use labnol.org/xcopy to copy the folder in its original account (A).
  2. Log into account B, create a blank folder and share it with account A.
  3. Log into account A and move the copied folder into the shared folder.
  4. Go back to account B and remove the sharing permissions for the folder.
The Alternative – If you are not comfortable giving access to your Google Drive to another app, you can manually copy folders using the Google Drive desktop client for Windows and Mac. Go to Windows Explorer (or Finder), select the source folder and press Ctrl+C followed by Ctrl+V to duplicate the folder.

This would however not retain the original file permissions. The other downside is that Google Drive will have to reupload all the copied files whereas in the previous case, the copying happened on Google servers directly.