16 May 2015

Add Related Posts to WordPress with Jetpack but without the Extra Baggage


It is recommended that you include Related Posts on your blog pages as they help decrease the bounce rate of your site and are good from the SEO perspective. That’s because when you publish a new article, the old content, that was previously hiding in the archives, shows up in the list of related posts and thus gets fresh exposure to both human visitors and search engines.

Matt Cutts, in 2010 when Google search results were a collection of 10 blue links, recommended using related posts and the advice is still relevant today in the age on Penguins and Pandas.

YARPP, short for Yet Another Related Posts Plugin, is the most popular plugin in the WordPress repository for display related articles but it does put lot of strain on your WordPress database server. All the related posts calculations are done using complex SQL queries on your WordPress database and that can affect your website’s performance.

Jetpack, the official WordPress plugins from the makers of WordPress, now includes Related Posts functionality and it is a better alternative to YARPP for one simple reason – Jetpack runs the algorithms to compute related posts in the cloud and thus put no additional load on your server. Through the WordPress plugin, your website makes an API call to Jetpack which in turn returns a list of posts related to the current post.

WordPress Related Posts

Jetpack Related Posts for WordPress

I’ve obviously replaced YARPP with Jetpack for displaying related posts on labnol.org but there’s something I was not too happy about Jetpack. It adds a number of JavaScript and CSS files to the website’s header for rendering the related posts. This in turn increases the weight of the page but, fortunately, there’s a way around that.

<?php

/* Jetpack Related Posts */

/* This is required to remove the CSS and JS enqueued in the header */
function jetpackme_no_related_posts( $options ) {
    if ( is_single() ) {
        $options['enabled'] = false;
    }
    return $options;
}

add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_no_related_posts' );

/* Create shortcode for displaying related posts anywhere in the post */
function labnol_related_shortcode( $atts ) {

    $related_posts = "";

    if ( class_exists( 'Jetpack_RelatedPosts' ) && method_exists( 'Jetpack_RelatedPosts', 'init_raw' ) ) {

        $related = Jetpack_RelatedPosts::init_raw()
            ->set_query_name( 'jetpackme-shortcode' )
            ->get_for_post_id(
                get_the_ID(),
                array( 'size' => 5 ) // How many related posts?
            );

        if ( $related ) {

            foreach ( $related as $result ) {
                $related_post = get_post( $result[ 'id' ] );
                $url = get_permalink($related_post->ID);
                $title = $related_post->post_title;
                $related_posts .= "<li><a href='" . $url . "'>$title</a></li>";
            }
            $related_posts = '<ol>' . $related_posts . '</ol>';
        }

    }

    return $related_posts;
}

/* Create a new shortcode for Jetpack related posts */
add_shortcode( 'labnol_related', 'labnol_related_shortcode' );

/* Do not load the one-big Jetpack concatenated CSS file */
add_filter('jetpack_implode_frontend_css', '__return_false');

/* Dequeue the default styles and jQuery for Jetpack module */
function add_labnol_scripts() {
    if (!is_admin()) {
        wp_dequeue_script('jetpack-related_posts');
        wp_dequeue_style('jetpack-related_posts');
    }
}

add_action("wp_enqueue_scripts", "add_labnol_scripts", 20);

?>

You can use the Related Posts module of Jetpack but without adding extra baggage to your website. Assuming that the Jetpack plugin is already installed on your website, activate the Related Posts module and then paste this code inside the functions.php file of your WordPress theme.

What we have done so far is dequeued all the extra CSS and JS files that are normally added to the site by Jetpack and we’ve also created a WordPress shortcode that will let us include the Related Post module anywhere on the page (and not limit us to the end or start of an article).

You can also set the number of related posts to display in line #27.

Next open the file where you wish to display related posts, most likely the single.php or loop.php file in the WordPress theme folder, and add this line.

<?php echo do_shortcode( '[labnol_related]' ); ?>

You should also check this page on the Jetpack website for more technical details on how to customize the related posts module of Jetpack.

One more thing. If you have only recently enabled Related Posts for Jetpack, the related posts may not show up on your website because it may take some time for Jetpack servers to index your site.


The story, Add Related Posts to WordPress with Jetpack but without the Extra Baggage, was originally published at Digital Inspiration by Amit Agarwal on 16/05/2015 under WordPress, Internet.

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="http://ift.tt/1Fk2WNC;
 </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.

If you are ready to fiddle with the JavaScript, you can even more option to customize the embedded map.

Google Maps with AdSense Ads

For instance, you can easily change the position of the AdSense ad unit inside Google Maps from TOP_CENTER (line #28) to BOTTOM_CENTER or something else.

Similarly, you can change the default view of the embedded map from Roadmap to Satellite or Hybrid. The various controls inside the Google map – like the street view Pegman, the zoom slider, the pan control – can be easily hidden or moved to a different position by setting the corresponding properties inside the mapOptions object.

Also see: Embed Google Maps Street View

<script>

  var mapOptions = {

    // Center the map on this address
    center: new google.maps.LatLng(38.8977, -77.036),

    // Set the initial zoom level
    zoom: 14,

    // Hide the slider to control the zoom levels
    zoomControl: false,

    // Hide the controls to pan the map
    panControl: false,

    // Display the street view peg but in a different position
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.BOTTOM_CENTER
    },

    // Allow visit to switch to Satellite view and back
    mapTypeControl: true,

    // Set the default type of the map to Roadmap 
    mapTypeId: google.maps.MapTypeId.ROADMAP

  };

</script>

The story, How to Monetize Google Maps on your Website with AdSense Ads, was originally published at Digital Inspiration by Amit Agarwal on 16/05/2015 under Google AdSense, Google Maps, Internet.

15 May 2015

Google Play Music for Desktop Has a New Interface


Google Play Music's web app switched to Material Design and has a new interface that closely resembles the mobile UI. The left sidebar is now a hamburger-style menu, photos are bigger, there's more white space and everything looks like a mobile app stretched out to fit a much bigger screen.




"We're moving towards making the web feel more like an app and less like a series of web pages strung together by links," said Google UX designer Bryan Rea. "The new header, the slick transition as you scroll, the collapsible nav, new animations, these all feel like things you expect in an app not on the web."

YouTube Discontinues Collections


YouTube had a feature that allowed you to group subscriptions and create collections. This feature will soon be removed: "on 5/20/15, we'll discontinue Collections, as we'll focus on other efforts to make your subscriptions more enjoyable."


"A collection is a group of subscriptions you can create to help you organize and view content from the channels you're subscribed to. Collections can be created by themes (like 'basketball' or 'music')," explains YouTube.



Collections could be created, deleted and edited from the subscription manager. In many ways, YouTube collections were just like folders in a feed reader.

If you want to use a feed reader to manage your YouTube subscriptions, you can export them to OPML and import the file in your favorite feed reader. Open the subscriptions manager, scroll down to the bottom of the page and click "Export subscriptions". Another options is to use this link.

YouTube Switches to Roboto


After a few months of experiments, YouTube changed its font from Arial to Roboto. In addition to Android, many other Google apps and services use Roboto, a typeface designed in-house at Google by Christian Robertson.

Here are some screenshots from Firefox for Windows:



Browsers like Firefox and Chrome show a lot of information about fonts: you can select some text, right-click, pick "inspect element", switch to the Fonts or Computed tab and find the fonts that are used.


9to5Google.com says that "the font comes in several weights, but the one Google has gone with is slightly lighter than what users may be used to compared to the Arial font. This will surely lead to some complaints about it being harder to read".

13 May 2015

Send Personalized Tweets & DMs in Bulk from a Google Spreadsheet


Introducing Twitter Merge, a new Twitter app that will help you send personalized tweets and direct messages (or DMs) to multiple Twitter users in one-go. You create a template for the tweet, specify a list of Twitter users and the app will take care of the rest. The Twitter Merge app, like Gmail Mail Merge, also runs inside a Google Spreadsheet but instead of emails, this one allows you to send customized tweets and DMs in bulk.

Let me share a scenario where such an app may be useful.

Say you are a brand and you are trying to organize meetings with Twitter users in various cities on different dates. You want to send them invites on Twitter but it would take just too much effort to compose the tweets or DMs manually. You thus create an invite template and add the Twitter user names in a Google Sheet. The Twitter Merge app, using that template, will send a personalized tweet (or DM) to every handle listed in the sheet automatically.

Here’s a sample Tweet template and the corresponding tweets / DMs generated from the template.

Personlized Tweets

To create a Twitter template, write a tweet in notepad (or any text editor) and replace the words that will be different in each tweet with {{variables}}. For instance, if you are write a tweet with customized name and city, your template will read something like “hello {{first name}} from {{city name}}” while the “First Name” and “City Name” will be columns in your Google Spreadsheet.

Bulk Send Tweets & Direct Messages

Follow these steps to get started:

  1. Click here to copy the Twitter Merge spreadsheet in your Google Drive.
  2. Add new columns to the sheet so that you have one for every variable that exists in your tweet template. The column names should be the same as the variable name though the case doesn’t matter.
  3. Fill the spreadsheet with one or more rows. Add the Twitter screen names in the “Twitter User” column while keeping the “Tweet” and “Status” columns as blank.
  4. Go to the Twitter Merge menu at the top and choose Authorize. This is required because you need to allow the Spreadsheet to send tweets on our behalf.
  5. From the same menu, choose Configure and paste the text of your tweet template. You also need to specify whether the tweets are be sent as DMs or public tweets. Save the configuration.

We are almost done now.

The “Tweet” column will display the actual text that will be sent and you have an option to manually edit that text. Choose Send tweets from the Twitter menu and the app will send the customized tweets to all the listed Twitter users. The following video (link) will also guide you through the process.

Also see: Archive Twitter Search Results in Google sheets.

Later, if you wish to send more tweets or DMs, you can just repeat from step 2 onwards.  Also, if the “Status” column for a tweet is set as “SENT”, the app will skip sending a tweet to that particular Twitter user.

Internally, there’s a Google Script running that transforms your template into actual tweets using data from the row and it then connects to the Twitter API to send the tweets. Give it a try and do share your feedback in the comments section below.


The story, Send Personalized Tweets & DMs in Bulk from a Google Spreadsheet, was originally published at Digital Inspiration by Amit Agarwal on 13/05/2015 under Google Docs, Twitter, Internet.

New Gmail Login Page


Gmail has a new login page. When you first sign in, Google only asks you to enter you email address. Click Next to enter your password and Google might show your name and your Google+ profile photo.


It's not clear if Google only shows the name and the profile photo for your Gmail accounts. I tried various email addresses and Gmail only displayed a generic image.


{ Thanks, Maurice Wahba. }

12 May 2015

Google Translate Community Uses Material Design


Google Translate Community has a new interface powered by Material Design. It's a site that helps Google improve the quality of Google Translate. "Your help will enhance translations for millions of users," informs Google.

The new interface is more colorful and uses more images. There's a hamburger-style menu, a section that shows your stats and the badges you've earned. You can select 2 to 5 languages, including a few languages that aren't yet available in Google Translate like: Cantonese, Cherokee, Corsican, Tibetan, Guarani, Hawaiian and more.