Jetpack: add hashtags to the twitter sharing button

A few days ago I explained how to add hashtags to the tweets sent out by Jetpack Publicize. But what about the tweets your read can send using the Jetpack Sharing buttons at the bottom of your posts?

Here is how to get tags from your posts, and add them as hashtags to the twitter sharing button. As always, you’ll want to paste that code in a functionality plugin.

function jeherve_custom_sharing_title() {
        $post = get_post();
        if ( empty( $post ) ) {
                return;
        } else {
                // Create sharing title
                $sharing_title = get_the_title( $post->ID );

                // Get the tags
                $post_tags = get_the_tags( $post->ID );
                if ( ! empty( $post_tags ) ) {
                        // Create list of tags with hashtags in front of them
                        $hash_tags = '';
                        foreach( $post_tags as $tag ) {
                                $hash_tags .= ' #' . $tag->name;
                        }
                        // Add tags to the title
                        $sharing_title .= $hash_tags;
                }

                return $sharing_title;
        }
}
add_filter( 'sharing_title', 'jeherve_custom_sharing_title', 10, 3 );

Hat tip to Ryan for the idea!

Jetpack: add hashtags to tweets sent by Publicize

Jetpack’s Publicize module allows you to automatically publish your posts to your favorite Social Networks like Twitter or Facebook.

You can customize the message that is posted to Social Networks thanks to the small input field right above the Publish button:

Publicize Options

But what if you wanted to automatically add details to each Publicized post? Since both Twitter and Facebook support hashtags, you could append the post tags after the post title, like so:

Tweet tags

To do so, add the following code to a functionality plugin:

function jeherve_publicize_hashtags() {
	$post = get_post();
	if ( ! empty( $post ) ) {

		// Grab the tags of the post
		$post_tags = get_the_tags( $post->ID );

		// Append tags to custom message
		if ( ! empty( $post_tags ) ) {

			// Create list of tags with hashtags in front of them
			$hash_tags = '';
			foreach( $post_tags as $tag ) {
				$hash_tags .= ' #' . $tag->name;
			}

			// Create our custom message
			$custom_message = get_the_title() . ' ' . $hash_tags;
			update_post_meta( $post->ID, '_wpas_mess', $custom_message );
		}
	}
}

// Save that message
function jeherve_cust_pub_message_save() {
	add_action( 'save_post', 'jeherve_publicize_hashtags' );
}
add_action( 'publish_post', 'jeherve_cust_pub_message_save' );

Semicolon: use Jetpack’s Custom CSS libs in your theme

Yet another good example of how to use libraries bundled with Jetpack on your site!

My colleague Konstantin Kovshenin recently released the Semicolon theme. It uses the libraries used in Jetpack’s Custom CSS module to compile its stylesheet (yay Sass!), and to correct the contrast of the colors you’ve picked in the theme options. So if you pick bad contrasting colors, Semicolon will lighten or darken them until a contrast ratio threshold is reached. This guarantees a certain level of readability.

You can read more about it in Konstantin’s post: Color Options vs. Decisions in WordPress Themes.

Color Posts plugin: how to use Jetpack libs in your own plugin

I’ve talked about customizing Jetpack in the past, and I also mentioned how you can integrate Jetpack features in your theme.

How about including these features in a plugin? As a proof of concept I just released Color Posts, a plugin that uses 2 very useful classes that are bundled with Jetpack.

Continue reading Color Posts plugin: how to use Jetpack libs in your own plugin

Jetpack: change og:title value to be all uppercase

Caps Lock

Some blog owners would like their post titles to be displayed in all caps, to attract more clicks on Facebook. Here is how to change Jetpack’s Open Graph meta tags to use an uppercase og:title tag:

/*
 * Plugin Name: Uppercase og:title for Jetpack 
 * Plugin URI: http://wordpress.org/extend/plugins/jetpack/
 * Description: Removes Jetpack's default og:title tag, and replaces it with an uppercase og:title 
 * Author: Jeremy Herve
 * Version: 1.0
 * Author URI: http://jeremy.hu
 * License: GPL2+
 */
function jeherve_capital_title_og( $tags ) {
        global $post;
 
        if ( is_singular() && $post ) {
                unset( $tags['og:title'] );
 
                $tags['og:title'] = strtoupper( get_the_title( $post->ID ) );
        }
        return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'jeherve_capital_title_og' );

To be pasted in your theme’s functions.php file, or in a functionality plugin.

Jetpack: how to define a custom fallback image

Jetpack handles Open Graph Meta Tags for you, and automatically creates a fallback Image meta tag if you haven’t inserted any image into your post.

If you’d like to define your own custom fallback image, you can use the jetpack_open_graph_image_default filter, like so:

function jeherve_default_image() {
	$fallback_img = 'http://YOUR_IMG_URL';
	return esc_url( $fallback_img );
}
add_filter( 'jetpack_open_graph_image_default', 'jeherve_default_image' );

Note that the filter is new, and will only be added to the next Jetpack release, 3.0.

Creating collaborative maps with Open-Source tools

When talking about maps, Google is a clear winner: its maps are everywhere, its navigation tools are great, and they also propose a Map builder named Google Maps Engine.

Google Maps Engine

It’s not a perfect tool though, and I found its collaborative aspects to be limited.

Luckily, there are alternatives! I recently discovered that GitHub automatically created maps if you uploaded geoJSON files to a repository or to a Gist file. You can evem (https://help.github.com/articles/mapping-geojson-files-on-github#embedding-your-map-elsewhere) on external sites.

To get started, build your own geoJSON file, and add spots with as much information as you’d like. Here is an example:

{
	"type" : "Feature",
	"geometry" : {
		"coordinates" : [
			19.04965,
			47.51591
		],
		"type" : "Point"
	},
	"properties" : {
		"URL" : "http://brioskavezo.hu",
		"marker-symbol" : "bakery",
		"marker-color" : "#ffba00",
		"name" : "Briós Kávézó",
		"phone" : "00 36 1 789 6110",
		"address" : "Pozsonyi út 16",
		"note" : "Breakfast Spot."
	}
}

I used this tool to calculate coordinates for each spot. You can add as many fields as you’d like as properties. marker-symbol refer to the different icons you can use for each marker, and you can use marker-color to change the color of the marker.

Here is the end result:

The maps are built using 3 Open-Source tools:

  • OpenStreetMap, a collaborative project to create a free editable map of the world. Think of it as the Wikipedia of maps
  • Mapbox, to build the Street view baselayer based on OpenStreetMap. It’s used by Foursquare and Evernote, so you might be familiar with such maps.
  • Leaflet.js, a JavaScript Library used to render the geoJSON data and create the markers.

Since all 3 tools are Open-Source, and since I wanted to add more features than GitHub proposes by default, I decided to dig a bit deeper and built my own map using these 3 tools.

Luckily, Mapbox includes a great documentation so it wasn’t very hard. Creating a map is as simple as adding the following 2 Javascript files into an HTML page:

<script src='http://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />

You can then add the map anywhere on your page by adding <div id='map'></div>.

Once you’ve done so, you can use a geoJSON file to add markers to the map. I used the file from the GitHub repo I created. This way, my map will be automatically updated when people contribute to my GitHub repo.

Since I started on GitHub, I decided to host my map there as well, by using GitHub Pages. You can consequently check my work here.

Here is the end result:

What to see, what to do in Budapest?

Custom Map

I still have a lot of work to do, but I think it’s a good start. Let me know what you think, and send me pull requests if you want to add more spots to that map! ;)