Jetpack 4.0: WP 4.5 Customizer compatibility and more

The new Jetpack introduces improvements for better performance under the hood and to allow you work faster.

Real-Time Widget Customizing

WordPress 4.5 shipped with a new feature, Selective Refresh: if your theme supports it, widgets refresh in the Customizer as you edit them, letting you see changes instantly without refreshing the entire page.

We’ve updated Jetpack widgets to leverage Selective Refresh, and now they’ll update in real time as well!

VideoPress Made Simpler

A new tool lets you edit VideoPress shortcodes right in the Editor, with a fancy new modal window containing key playback options:

VideoPress modal in Editor

Plus, videos placed in the Editor now adjust themselves to your theme’s content width, so you can more accurately see how it will look in your post or page when published.

WooCommerce Sharing

Use WooCommerce? You just got sharing options for each of your products:

Jetpack sharing buttons placed below "Add to cart" button

Social icons are now placed under the “Add to cart” button in singular product views, making it easier for customers to share your products with their friends and fans on social media.

First-Time User Support

We’ve done a better job explaining the benefits of Jetpack and connecting it to WordPress.com when the plugin is installed but not yet connected.

We also added handy links to shortcode documentation to convey the types of media you can quickly and safely embed.

Performance

Jetpack protect helps safeguard your site against brute-force attacks, and now it’s got more muscle behind it. We’ve updated the code and routines that verify your site is protected to be more efficient. For folks using the Contact Form module, sweeping spam submissions out of your database is now faster.

And there’s more

Custom Content Types: a new CSS class on Testimonial featured images — has-testimonial-thumbnail — allows you to customize Jetpack custom post types as you see fit.

Theme Tools: improved schema.org microdata for breadcrumbs gives search engines an easier time knowing what page they are on, and how that page relates to the other pages in your site hierarchy.

Widget Visibility: get granular with your widget display:

Widget Visibility UI

Select widgets and specify to show or hide them right from custom post types, in both single and archive views.

We also fixed some issues…

  • Comments: we fixed a mistake where a comment subscription checkbox appeared on custom post types — despite the fact you couldn’t actually subscribe to those types of comments.
  • Contact Forms: we fixed a bug where the telephone field (which can only be added manually) rendered incorrectly, breaking some forms in the process.
  • General: we blocked direct access to the Jetpack_IXR_Client class which caused fatal PHP errors in some server setups.
  • Shortcodes: we removed the frameborder attribute in the YouTube embed code. It was deprecated in HTML 5. Unminified responsive-videos.min.js in order to address a false positive virus alert in ClamAV. Expect it to be re-minified in 4.0.1 once we resolve the issue with ClamAV.

Thanks to everyone who contributed to 4.0:

Alex Kirk, Barry Abrahamson, Bernhard Reiter, Biser Perchinkov, Brando Meniconi, Brandon Hubbard, Brandon Kraft, Christopher Finke, Dan Walmsley, Derek Smart, Drew Butler, Elio Rivero, Enej Bajgoric, George Stephanis, Igor Zinovyev, Ivan Kristianto, Jeff Golenski, Jeremy Herve, Jesse Friedman, Joey Kudish, Lance Willett, Matt Wiebe, Michael Cain, Miguel Lezama, Mohammad Jangda, Patrick Rauland, Philip John, Richard Muscat, RC Lations, Rocco Tripaldi, Sam Hotchkiss, Tammie Lister, Thomas Guillot, Weston Ruter.

Update April 21, 2016

We’ve released 4.0.2 that fixes a fatal error that was caused by Jetpack not being able to find a library directory.

Posted in Releases | Tagged , , , , | 4 Comments

Hook of the Month: Customizing Sharing Buttons

Jetpack’s sharing buttons look good, are simple to use, and include several hooks allowing you to customize every single aspect of the module. Let’s learn to use some of these hooks together!

Use filters to customize sharing buttons on your site

Posted in Code snippets, Tips & Tricks | Tagged , , , , | 11 Comments

Jetpack 3.9 — Sitemaps, a new Skype Sharing Button, and More

With the release of Jetpack 3.9, we’re introducing a brand new module, as well as a lot of improvements for several existing Jetpack modules.

Jetpack’s new Sitemaps Module

Jetpack already includes features like Subscriptions and Publicize, to let your readers know whenever you publish a new post on your site. You can now let Search Engines know, too!

What are sitemaps? Sitemaps are files that list each post and page that should be indexed by search engines like Google or Bing.

Once this new module is activated, two sitemaps will be created: a generic sitemap, available at yoursitename.com/sitemap.xml, as well as a News Sitemap, available at yoursitename.com/news-sitemap.xml. The News sitemap is useful if you want your posts to appear in Google News.

You can learn more about this new module here.

A new Skype Sharing Button

Skype Sharing Button

Now that Skype offers a Skype button, we’ve added it to Jetpack’s Sharing module. To add it to your site, head over to Settings > Sharing in your dashboard, and drag the new Skype button to your list of sharing buttons.

Social Menu

Social Menu is a new tool that is available for all theme developers. It allows site owners to create a new menu location which is used to display links to Social Media Profiles.

To learn how to add Social Menu support to your theme, you can follow the instructions on our support page.

And More…

This release also adds its fair share of improvements to existing modules, as well as bug fixes:

  • Added new options to allow management of users on your site directly from WordPress.com or from the WordPress.com Desktop app.
  • Made several changes to Photon to improve compatibility with WordPress 4.4. Custom image sizes are handled better now and all responsive image sizes will be properly displayed when using the Photon module.
  • Photon is now enabled by default on sites using HTTPS. You don’t need to use a filter to enjoy Photon on your HTTPS site anymore!
  • Added support for Wistia oEmbeds.
  • Fixed some issues with long album and track IDs in the BandCamp shortcode. Also added support for two new parameters: tracks and esig.
  • And a lot more! You can check the full changelog here.

Once again, a big thank you to all Jetpack Contributors:

Alex Shiels, Andrew Duthie, Andrew Ozz, Andy Peatling, Biser Perchinkov, Brandon Kraft, Dan Robert, Derek Smart, Dion Hulse, Miguel Polfliet, Eduardo Reveles, Elio Rivero, Eric Binnion, George Stephanis, Hiroshi Urabe, Igor Zinovyev, Jeff Golenski, Jennifer M. Dodd, Jeremy Herve, Jesse Friedman, Joen Asmussen, Joey Kudish, Jonathan Sadowski, Joseph Scott, Justin Shreve, Kat Hagan, Kelly Dwan, Lance Willett, Matt Wiebe, Michael Cain, Miguel Lezama, Rachel Baker, Richard Muscat, Rocco Tripaldi, Sam Hotchkiss, Scott Grant, Steve Seear, Stéphane Boisvert, Takashi Irie, Thomas Guillot, and Xiao Yu.

Posted in Releases | Tagged , , , , | 12 Comments

How to increase your blog’s traffic with Jetpack

Jetpack comes with a set of features specifically designed to help you increase your site’s traffic and grow your audience. That is after all the reason we build websites and blogs and write content – for people to see them, read them and enjoy them 🙂

Jetpack helps you tackle this along two fronts: attracting new visitors to our sites and encouraging the existing ones to keep coming back.

Getting more traffic

Its worth mentioning what countless people have said before: writing well-written, useful and targeted content is eighty percent of the job. Neither Jetpack nor any other plugin, is a silver bullet that can ever be a substitute for that. However, if you’ve got that nailed, these features will help you with the other twenty percent:

  1. Publicize
    Jetpack PublicizePublicize simply automates what you probably do already: posting your articles directly to Twitter, Facebook, LinkedIn and a few more social networks. Once you set this up (about 5 minutes usually) you can sit back and not worry about this and focus on writing great content while your friends and followers read what you’ve just posted.
  2. Sharing
    The Sharing feature, when enabled, places share buttons at the bottom of your blog posts. This allows (and encourages!) your readers to share your content with their own networks giving you broader reach. Currently we support Twitter, Facebook, Reddit, StumbleUpon, Digg, LinkedIn, Google +1, Print, and Email. Additionally you can define your own custom services.
  3. Site Verification
    Verifying your website with external services like Google, Bing and Pinterest. This means you will be rated as “safe” by these services (e.g. by getting a “Verified” badge) and gives you to access advanced features (e.g. Webmaster tools).
  4. Enhanced Distribution
    At WordPress.com we have a service called “Firehose” which is a stream of the public data (public posts, comments, etc.) that flow through WordPress.com as well as Jetpack blogs that enable Enhanced Distribution. The firehose in turn is used by companies and people to display your content at which point they are required to link back to your blog. This means that you get both traffic back to your site as well as building up quality back-links.
  5. Google+ Profile
    Sharing_Settings_GoogleLastly, when you activate and connect this feature you connect your blog and with your Google+ accounts. Now, displayed below your posts, will be a link back to your Google+ profile, a Google+ follow button and a link will also be added to your Google+ profile allowing Google+ users to find you more easily.

Keep them coming back

The other side of the coin is staying in touch with the visitors who’ve seen and read your content so that they don’t forget about you and come back to see what else you have to say. You may not necessarily want to use all of these of course as it depends a lot on the kind of site or blog you’re running. But because Jetpack makes it easy to turn these on and off some of our users opt to try things one at a time to test out their effect.

  1. Jetpack Comments
    Comment Module NotificationsComments are a great way of enabling your visitors to join the conversation. It can be a pain for them however to have to create a new account if its their first time visiting your site. Jetpack Comments enables your visitors to use their existing WordPress.com, Twitter, or Facebook accounts when commenting on your site making it more likely they’ll do so.
  2. RSS Widget
    RSS is used by millions of people to keep track of blogs they like. When you enable Extra Sidebar Widgets in Jetpack you can show widget that allows you to add links to your blog’s RSS feeds in your sidebar. This makes it easy for your readers to stay updated when you post new content or receive new comments.
  3. Likes
    Likes MetaboxLikes allow your readers to show their appreciation for your posts and other published content. They will then be able to review their liked posts from their WordPress.com Reader which will remind them your blog exists and encourage them to come back.
  4. Subscriptions
    Easily allow any visitor to subscribe to all of your posts via email through a widget in your blog’s sidebar. Every time you publish a new post, WordPress.com will send a notification to all your subscribers. Depending on their preferences this notification will either show up on their WordPress bar (top right) or they will receive an email directly in their inbox.
  5. Notifications
    Example of a comment Push Notification from the WordPress for iOS app

    Example of a comment Push Notification from the WordPress for iOS app

    Finally, this last one is for you, the site owner. With Notifications enabled you will be instantly notified when somebody comments on any of your posts or previous comments. This means that you can instantly comment back making your interaction with your readers feel more personal and in real-time.

And of course, Jetpack also gives you great stats so that you can see the effect of your work! If you’ve not used Jetpack before, read our step-by-step installation guide here to try it out for yourself.

If you are a Jetpack user already please tell us what you think in the comments and, if you’d like to get involved by writing a guest post about Jetpack get in touch!

Posted in Tips & Tricks | Tagged , , , , , , | 6 Comments

How to add a default fallback image if no image can be found in a post

When you publish a new post on your site, Jetpack crawls it and looks for images that can be used when sharing that post on Facebook, on Twitter, or if that post appears in the Top Posts and Pages widget in your sidebar.

Jetpack starts by looking for a Featured Image. If you didn’t define any, we will look for slideshows and galleries, and then for any images that may be attached to the post. If we don’t find any image attached to that post, we’ll look for single images you may have inserted in the post. If you’ve inserted an image that is hosted on another site, we can use it too.

However, sometimes you may not have added any image to your post. In such cases, you can add this code snippet to your theme’s functions.php file, or in a functionality plugin. This way, your readers will see a default image when sharing that post on Facebook, for example:

function jeherve_custom_image( $media, $post_id, $args ) {
	if ( $media ) {
		return $media;
	} else {
		$permalink = get_permalink( $post_id );
		$url = apply_filters( 'jetpack_photon_url', 'YOUR_LOGO_IMG_URL' );
	
		return array( array(
			'type'	=> 'image',
			'from'	=> 'custom_fallback',
			'src'	=> esc_url( $url ),
			'href'	=> $permalink,
		) );
	}
}
add_filter( 'jetpack_images_get_images', 'jeherve_custom_image', 10, 3 );

It’s worth noting that the fallback image has to be larger than 200 x 200px, as per Facebook requirements. If your image is smaller, Facebook will ignore it.

Reference

Posted in Code snippets, Tips & Tricks | Tagged , , , , | Comments Off on How to add a default fallback image if no image can be found in a post

Remove Jetpack Sharing buttons in the Mobile Theme

You can add the following code to a functionality plugin to remove the Jetpack Sharing buttons in the Mobile Theme:

// Check if we are on mobile
function jetpackme_is_mobile() {

    // Are Jetpack Mobile functions available?
    if ( ! function_exists( 'jetpack_is_mobile' ) )
        return false;

    // Is Mobile theme showing?
    if ( isset( $_COOKIE['akm_mobile'] ) && $_COOKIE['akm_mobile'] == 'false' )
        return false;

    return jetpack_is_mobile();
}

// Let's remove the sharing buttons, but only if we're on a mobile device
function jetpackme_maybe_add_filter() {

    // On mobile, and on the home page?
    if ( jetpackme_is_mobile() ) {
        remove_filter( 'the_content', 'sharing_display', 19 );
		remove_filter( 'the_excerpt', 'sharing_display', 19 );
    }
}
add_action( 'wp_head', 'jetpackme_maybe_add_filter' );

// Build the function
function jptweak_remove_share() {
	remove_filter( 'the_content', 'sharing_display', 19 );
	remove_filter( 'the_excerpt', 'sharing_display', 19 );
}

Looking for more mobile tips? You’ll find them here!

Posted in Code snippets, Tips & Tricks | Tagged , , | Comments Off on Remove Jetpack Sharing buttons in the Mobile Theme

Moving Sharing Icons

One of the most common requests you send us is “Can we move the Sharing and Like buttons?” By default, the Sharing and Like buttons get printed at the end of the the_content() Loop function, which causes them to display at the end of your post’s text — but that may not be where you want them in your site’s design.

There are actually two ways to move the Sharing buttons and one for the Like button.

Move the Sharing and Like buttons

Jetpack, by default, just attaches this tag to two filters — the_content() and the_excerpt() — so that the Sharing icons get displayed. By editing your theme files, you can move the tag wherever you’d like — we default to attaching it to the filters so that, when the Sharing and Likes modules are activated, the buttons are displayed with no extra work. You’re free to move it around to put the Sharing icons where you’d like; here’s how:

  1. In your functions.php file, add the following:
function jptweak_remove_share() {
    remove_filter( 'the_content', 'sharing_display', 19 );
    remove_filter( 'the_excerpt', 'sharing_display', 19 );
    if ( class_exists( 'Jetpack_Likes' ) ) {
        remove_filter( 'the_content', array( Jetpack_Likes::init(), 'post_likes' ), 30, 1 );
    }
}

add_action( 'loop_start', 'jptweak_remove_share' );
  1. Find the file for the location where you’d like the sharing icons to appear and insert the following code in the area you want the Sharing or Likes buttons to appear:
if ( function_exists( 'sharing_display' ) ) {
    sharing_display( '', true );
}

if ( class_exists( 'Jetpack_Likes' ) ) {
    $custom_likes = new Jetpack_Likes;
    echo $custom_likes->post_likes( '' );
}

Note that you do not need to display these together; you can put sharing_display() in a separate place from the Likes display codeblock.

Move the Sharing Buttons via jQuery

This method comes via Beau Lebens, a fellow Automattician. He coded this jQuery method for moving the Sharing icons:

jQuery( document ).ready( function( $ ) {
    // Relocate Jetpack sharing buttons down into the comments form
    jQuery( '#sharing' ).html( jQuery( '.sharedaddy' ).detach() );
} );

The #sharing selector is just the DOM location where I want to move the buttons to, and the .sharedaddy one is the container that Jetpack places its buttons in normally. We just detach it from the normal position and then dump it into the new location exactly as it was.

We hope this helps you develop your theme and display things the way you like.

Posted in Tips & Tricks | Tagged , , , | 4 Comments

How to insert another plugin before the Jetpack sharing buttons

Jetpack sharing buttons are added immediately after the post content. In some cases, you may want to insert a new element between your post content and the sharing buttons.

To control whether that element will appear before or after the Jetpack sharing buttons, you will have to change the priority of the filter. In the example below, we’ve added an author box and used the priority 18. As long as the priority is less than 19, it will appear before the sharing buttons.


<?php
/**
* When hooked to either the_content or the_excerpt filters,
* this should append the contents of the `author-box.php`
* file in your theme before the Jetpack ShareDaddy contents
* is added, so long as the priority is 18 or less!
* (as ShareDaddy's sharing options go in at priority 19)
*
* @param string $content The post content as passed to the function
* @returns string The content with the author box appended to it.
*/
function my_author_box( $content = '' ) {
ob_start();
get_template_part( 'author', 'box' );
$author_box = ob_get_clean();
return $content . $author_box;
}
add_filter( 'the_content', 'my_author_box', 18 );

Posted in Code snippets, Tips & Tricks | Tagged | Comments Off on How to insert another plugin before the Jetpack sharing buttons

How to use your own resources in the sharing module

The sharing module includes an “advanced” option, allowing you to use your own JavaScript and CSS files instead of the files added by Jetpack by default.

To get started, go to Settings > Sharing in your dashboard, and check the “Advanced” checkbox at the bottom of the page.

Then, you can add your own libraries by adding the following code in a functionality plugin or in your theme’s functions.php file:

function tweakjp_add_sharing_js() {
    wp_enqueue_script( 'sharing-js', WP_SHARING_PLUGIN_URL . 'sharing.js', array( ), 4 );
    $sharing_js_options = array(
	    'lang'   => get_base_recaptcha_lang_code(),
	    'counts' => apply_filters( 'jetpack_sharing_counts', true )
    );
    wp_localize_script( 'sharing-js', 'sharing_js_options', $sharing_js_options );
}
add_action( 'wp_enqueue_scripts', 'tweakjp_add_sharing_js' );

function tweakjp_add_sharing_css() {
    wp_enqueue_style( 'sharing', WP_SHARING_PLUGIN_URL. 'sharing.css', false, JETPACK__VERSION );
}
add_action( 'wp_enqueue_scripts', 'tweakjp_add_sharing_css' );

Once you’ve checked the option, you will be able to manually enqueue your own sharing js and css files.

You’ll note that Jetpack uses the WP_SHARING_PLUGIN_URL constant to build the path to load the libraries. You will have to change that constant by your own when re-enqueueing the sharing libraries.

You’ll also notice that you must localize the script and pass over lang and counts values to the sharing.js script.  A working example is included above.

Reference

Posted in Code snippets, Tips & Tricks | Tagged | Comments Off on How to use your own resources in the sharing module

Adding reCaptcha to the Email Sharing Button

How do I add reCaptcha to the Email button

The Email button is great, and you can make it even better by adding a Captcha to the submission form:

reCaptcha for Jetpack

To add the Captcha to your site, follow these steps:

  1. Start by registering on this site. Upon registration for reCAPTCHA v2, you will receive a Public/Site and a Private/Secret key.
  2. Open your site’s wp-config.php file in your favorite text editor, and add the following constants with both reCaptcha keys right before /* That's all, stop editing! Happy blogging. */:
    define( 'RECAPTCHA_SITE_KEY', 'XXXXXXX' );
    define( 'RECAPTCHA_SECRET_KEY', 'XXXXXXX' );
    
  3. Voila! Your email sharing buttons are now protected against spammers!
Posted in Code snippets, Tips & Tricks | Tagged , , , | 1 Comment
  • Enter your email address to follow this blog and receive news and updates from Jetpack!

    Join 112.3K other subscribers
  • Browse by Topic