Jetpack

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 supprt 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 creat 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 improve your User Experience using Jetpack

Jetpack has a ton of features (more than 30) that help you improve your WordPress site or blog in many ways – both for yourself as administrator as well as for your readers. Today I’m going to focus on eight Jetpack features that you can use to improve the User Experience of your site so that visitors find it easier to navigate and stick around longer.

Performance and Stability

It can seem like a no-brainer but the absolute worst user experience when visiting a site is when the site doesn’t work at all or takes a long time to load. Jetpack comes with two must-have features that stop this from happening:

  1. Photon
    Turning on Photon means that all your images get automatically served to users from the WordPress.com content delivery network (CDN) which means faster images for your readers (and less load on your host). To turn it on all you have to do is go to the Jetpack page in your blog dashboard and click the Activate button for Photon. And if you’re a developer, you can also speed up your theme with Photon.

  2. Monitor
    All sites go down once in a while. It could be your database, your host, some rogue code – whatever the reason, your visitors don’t really care, they just want to see your stuff! Jetpack Monitor will keep tabs on your site, and alert you the moment that downtime is detected so that you hear it from us first.

 

Mobile Devices

If you keep tabs on your traffic you’ve probably noticed you’re getting more and more visitors browsing your site from a mobile device: smart phones and tables of all shapes and sizes. Jetpack provides two features that help you make the reading experience on these devices significantly better:

  1. Mobile theme
    Jetpack comes with a responsive theme that works instantly on all mobile browsers. It also comes with various options and settings that enable you to choose exactly how you’d like your mobile browsing experience to work.

  2. Custom CSS
    Jetpack’s Custom CSS feature lets you tweak your site’s appearance to your heart’s content in a way that doesn’t break your theme when an upgrade is released. In addition, you can also create custom CSS for your mobile theme, further refining your mobile experience.

 

Interaction

Finally the last set of features deal with enabling your visitors to interact with your site, content and the community in a smoother fashion:

  1. Likes
    This feature puts a “Like” button on your posts and is a way for people to show their appreciation for your content. Enabling it is a short two-step process.

  2. Related Posts
    This feature pulls relevant content from your blog to display at the bottom of your posts. If the feature is enabled, a section of related posts appears just underneath your Likes (if you’ve turned these on). Just activate the feature from your Jetpack dashboard to turn them on but you can also customize how they display.

  3. Infinite Scroll
    Infinite scroll simply means that when a visitor scrolls to the bottom of your posts page Jetpack will automatically load the next set of posts without requiring clicking on any buttons. Activating it is similar to “Related Posts” above but not every theme supports it.

  4. Jetpack Comments
    When someone reads an article on your site and wants to comment, they can now use one of their existing social networking accounts to post a comment. No longer do they need to create yet another account and profile! You can also customize how Jetpack Comments display.

 

That’s it! Eight Jetpack features that can help your visitors have a more pleasurable experience when visiting your site. 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 Features, Tips & Tricks | Tagged , , , , , , , , , , | 13 Comments

Indispensable Jetpack features for theme developers

Jetpack offers a number of great features for theme developers that help you cut down both development time as well as load times. Most of these features work right out of the box, but you can also get under the hood to apply tweaks and customisations that really take your theme to the next level.

This article introduces you to:

  1. Speeding up your theme with Photon
  2. Showcasing posts with Featured Content
  3. Automatically loading posts with Infinite Scroll
  4. Instantly applying a Mobile Theme
  5. Customising CSS
  6. Providing Sharing functionality
  7. Integrating Social Links
  8. Showing similar content with Related Posts
  9. Additional resources

 

1. Speeding up your theme with Photon

Jetpack for developersPhoton is a free image CDN offered by Jetpack. As soon as Photon is enabled, it automatically serves the images found in posts and pages from WordPress.com’s speedy servers around the globe.

But did you know that you can use it to save bandwidth and speed up load times for images within your theme, too? You can link to a Photon-ized version of an image by calling the jetpack_photon_url() function. Its quite straightforward and we’ve put together some step-by-step instructions to make it even easier.

 

2. Showcasing posts with Featured Content

Featured Content SettingsFeatured Content is one of Jetpack’s lesser known features. But it’s a really powerful tool for theme development because you can use it to create a completely custom area in your theme for users to showcase posts. The appearance and placement is completely up to you, the theme author.

Your users can then specify which posts to show in that area simply by selecting a tag of their choice. There’s even an option to hide the tag from post meta and tag clouds.

Whether you are building an image slider on your homepage, or want to allow users to highlight specific posts, Featured Content makes it easier than rolling your own custom functionality. You can see a few examples of the feature in action here.

 

3. Automatically loading posts with Infinite Scroll

With Infinite Scroll active, users no longer have to click a link to get to the next set of posts on archive pages. Instead, your theme loads the next set of posts automatically into view when the reader approaches the bottom of the page. You’ve probably seen similar functionality on other sites, and thanks to Jetpack, it’s a snap to add it to your theme.

 

4. Instantly applying a Mobile Theme

Jetpack Mobile Front PageMobile internet usage is growing exponentially and any theme worth its salt should work on mobile devices. That’s why you’ll be happy to know that Jetpack ships with a full Mobile Theme ready-to-go out of the box.

Just use the .mobile-theme CSS class to style the mobile theme or take things a step further and use jetpack_is_mobile to target mobile visitors.

That way you can build the best user experience for your theme, no matter what device visitors are using.

Check out this article on customizing Jetpack’s mobile theme to learn more.

 

5. Customising CSS

If you’ve published a theme before you most likely know that users often want to customize its appearance. Savvy users might create a child theme, but more often than not, users will simply edit your theme’s files directly.

revision_listThat can get messy when you release a theme update that overwrites users’ modifications. But thanks to Jetpack, a much more user-friendly alternative is available through the Custom CSS feature which also includes a revision history.

After activating the feature, a ‘Custom CSS link’ is added to the Appearance menu in the Dashboard. From there, users can add their own Custom CSS, without touching the theme’s files. They can even use their favorite CSS pre-processer, as support for both SASS and LESS is built right in.

 

6. Providing Sharing functionality

The Sharing feature allows you to add social media sharing buttons to your theme. There are multiple display options built in and you can opt to use your own custom styles as well.

In this way you can integrate social sharing buttons in your theme, and keep complete control over their appearance. You can even alter the functionality with some jQuery magic. Our friends over at ThemeShaper have a great article with more information about this.

 

7. Integrating Social Links

Jetpack also makes it easy to include Social Links within your theme. After a user connects their social media accounts through Publicize, you can automatically use links to their accounts in your theme. You can add support with add_theme_support() and then use the Theme Modifications API to pull the data into your theme.

 

8. Showing similar content with Related Posts

Related posts in visually striking modeRelated Posts is one of Jetpack’s newer features. When activated, this adds a section to single posts that includes automatically generated links to similar content.

By default the section appears at the bottom of your content, but you can also move it to the top with a filter. In addition users can add a shortcode wherever they want the section to appear.

This means that you can include styling for the Related Posts section in your theme and then users are able to drop in a custom Related Posts section that matches the rest of their site wherever they want.

 

9. Additional resources

Finally, we’d love to see what you’ve done yourself and what you think of Jetpack. If you have questions, comments or your own tips drop us a comment below! In addition to that, we’re always open to suggestions, so feel free to get in touch. Thanks for flying with Jetpack!

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

Top 5 Best Practices when using Jetpack on client websites

If you’re creating WordPress websites for clients, Jetpack is for you. Jetpack easily adds a great number of features to your client’s websites without the need for a dozen different plugins, reducing the technical debt that you or your client will need to maintain over time.

We recommend these best practices when using Jetpack for a client site that will keep things running smoothly and help you provide a great service to your clients.

This article covers:

  1. Use Jetpack’s Development Mode
  2. Invite your client to connect a WordPress.com account
  3. Activate Jetpack only on the live domain
  4. Use your account when a connection is required
  5. Work with staging sites
  6. How to install Jetpack

 

1. Use Development Mode

Jetpack offers a Development Mode that is enabled when using Jetpack on a localhost. If you’re developing on a development server, you can manually enable development mode.

You can enable this as constant in wp-config.php by adding:

define( 'JETPACK_DEV_DEBUG', true);

or you can add this as a filter in your theme’s functions.php or a development plugin via:

add_filter( 'jetpack_development_mode', '__return_true' );

Use a development plugin
We suggest using a “Development Plugin” that you can use for all of your in-development needs. With a custom development plugin, you can include the Jetpack Development Mode filter and include other necessary tools like the Debug Bar. The added benefit is that it reduces the number of items on your launch checklist and consequently less things to slip through the cracks when launching. The code might look something like this:

Screenshot of the code for a sample development plugin

No matter how you enable Development Mode, ensuring that it is disabled before handing the site over the client is important to ensure your clients aren’t asking you or us why Jetpack isn’t working!

 

2. Invite your client to connect the site to a WordPress.com account

Many site developers will connect Jetpack to WordPress.com with their WordPress.com account for convenience. This becomes problematic however when you end up with hundreds of sites listed on your http://wordpress.com/my-blogs/ page. After your work is done its very likely that for many (if not most) of them you do not need or want access to any longer unless you have a continued relationship with the client. (Even if you do, its a good idea to teach your clients to self-serve so that you’re not a bottle-neck.)

From your client’s perspective, if Jetpack is connected to your account, they aren’t able to manage their Jetpack connection via http://wordpress.com/my-blogs/ or access their enhanced stats via WordPress.com.

Your client may already have a WordPress.com account if they’ve used Gravatar or Akismet in the past so very often its easy to connect Jetpack with their existing account.

 

3. Activate Jetpack only on the live domain

Jetpack connections are based on the URL of the site. Often, we’ll see a Jetpack user write in asking why all of their stats suddenly disappeared or why do their wp.me shortlinks don’t work. Typically, their site was originally connected when it was on a development address and the migration to the live URL didn’t pass back to us.

To avoid this, connect Jetpack to WordPress.com only on the live domain.

 

4. Use your account when a connection is required

With the above practices stated, we realize that development processes can’t always follow the practices outlined above. What if you’re developing off of a feature that requires a WordPress.com-connected feature, like styling our Subscription widget?

While on a development server, you can connect your client’s site to WordPress.com with your own WordPress.com account. The key is to disconnect Jetpack from WordPress.com using the link in the footer of the Jetpack dashboard page at the beginning of the migration to your production server and reconnecting after the site is on the production URL with the client using their WordPress.com account.

By doing this, you’ll disassociate your account from the client site and your client’s site will be connected using the production URL, avoiding the most common pitfalls of client sites.

 

5. Work with staging sites

An increasing number of hosting providers include a staging site, where you can have an exact copy of the client’s site on a separate server. This is great for testing out updates, new features, and more.

Jetpack communicates with WordPress.com through a shared token and blog ID that is stored in the database. When the staging site is copied from the live site, these database values are included. Whenever you deactivate Jetpack, Jetpack communicates with WordPress.com to invalidate the token as a solid security practice.

For you, this means if you deactivate/disconnect Jetpack on the staging site, the same token used on the live site is now invalid. If this happens, simply have the client disconnect and reconnect Jetpack on the live site.

 

6. How to install Jetpack

If you’ve never used Jetpack before and you’re looking for some guidance on how to install it for the first time, you’re in the right place!

There are two ways of installing the Jetpack plugin:

  1. The simplest way is install it directly from your Dashboard. You can find step-by-step instructions here.
  2. Alternatively, if you’re an advanced user, you can download the plugin files (.ZIP) and install it manually.

Finally, if you discover a bug in Jetpack during your development work, please submit an issue or a patch via GitHub. If you have questions or run into problems, drop us a line or leave a comment to share your tips on using Jetpack with clients.

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

How to exclude a category from the Mobile Theme

If you’ve ever wanted to exclude a particular category of posts from being displayed by Jetpack’s Mobile Theme, you can use the following code in your theme’s functions.php or in a functionality plugin:

// 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();
}
 
// Modify the main query on the home page for the mobile theme.
function jetpackme_modify_main_query( $arg ) {
    if ( jetpackme_is_mobile() && is_home() ) {
         $arg -> set( 'cat', '-1' );
    }
}
add_action( 'pre_get_posts', 'jetpackme_modify_main_query' );

You would need to replace the 1 in

$arg -> set( 'cat', '-1' );

with the ID of the category you want to exclude.

Looking for more mobile tips? You’ll find them here! And if you more general need help with the Mobile Theme, take a look at our support doc.

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

Let Users Showcase their Posts with Featured Content

Featured Content Settings

The power of showcasing content

Featured Content is a great way to let users highlight their most important posts. Our Theme Wranglers use it often on WordPress.com, but this awesomeness is available to all theme developers.

The concept is simple: each theme can determine where and how Featured Content is displayed. Then, right from their blog’s dashboard, users can specify a tag to determine which posts to showcase in the Featured Content area. Users can even specify how many posts they want to show, and decide if they want to hide the tag from post meta and tag clouds.

Featured Content in Action

If you’ve been following the development of the Twenty Fourteen theme, you’ve seen the prominent featured posts section on the front page. This area was created with Featured Content! The user specifies which posts they want to feature, and the theme does the rest of the work. Check it out here.

Twenty Fourteen

Another great example of Featured Content is the rotating header on the Superhero theme. In Superhero, Featured Content was coupled with Flexslider to create the beautiful post slider that you see at the top of the front page.

Superhero Theme

The possibilities really are endless. Photography themes can use Featured Content to display beautiful photos, and business sites can highlight their most important news and alerts. Best of all, users don’t have to worry about Custom Post Types or theme-specific categories or tags. They simply set a tag, and the theme handles the rest.

Add Featured Content in a snap

Adding Featured Content to your theme is a piece of cake. You can find all of the information you need to get started on the Featured Content support page.

Keep in mind that Featured Content is designed to spotlight content right on your theme’s homepage. If your theme includes a front-page.php file, that’s the only template file to which you’ll need to add the Featured Content area.

Do you have a great idea for Featured Content? Or have you done something cool with it on your own site? Let us know! We’d love to see how Featured Content is being used in the wild!

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

Publicize Crash Course: LinkedIn, Tumblr, and Path

Carolyn Sonnek:

The second part of the Publicize Crash Course series. Learn how to connect LinkedIn, Tumblr, and Path in your Publicize settings!

Originally posted on WordPress.com News:

Yesterday, we learned the ins and outs of pushing your new posts to Facebook, Twitter, and Google+. Today, we continue our tour of the Publicize universe with the three other social networks you can connect to from your WordPress.com account: LinkedIn, Tumblr, and Path.

The ability to share your content with different audiences quickly and easily will help you cultivate a healthy readership. Just as important, with Publicize you can tweak your sharing preferences so that each post reaches its intended destination: you can always choose which services to publish to, and what custom message to include (if any).

You can connect to these three services in exactly the same way, and from the exact same page, as the ones discussed yesterday. Simply visit Settings → Sharing in your dashboard, click “Connect” on the desired one, and authenticate your account in the window that opens. Once you’re done…

View original 491 more words

Posted in Tips & Tricks | Comments Off

Publicize Crash Course: Facebook, Google+, and Twitter

Carolyn Sonnek:

Great explanation of the Publicize feature found in Jetpack. Also instructions on how to connect Facebook, Google+, and Twitter accounts.

Originally posted on WordPress.com News:

“I’m publishing posts every day, but where are my readers?”

While there’s no exact science to successfully building a readership, you have a number of built-in tools on WordPress.com to share your work with the world. Our advice? Hook up your various social accounts to WordPress.com and let us do the rest. We want to emphasize, especially to our newest users, that no blog is an island. Clicking Publish is just the first step, and sharing your work across the internet is key to expanding your audience.

What is Publicize?

With Publicize, you can automatically push out your new posts to social networks: Facebook, Google+, Twitter, LinkedIn, Tumblr, and Path.

Publicize

Connecting to your accounts is easy, and you can select which ones to link to your WordPress.com account. To get started, head over to Settings → Sharing. At the top of the page, you’ll see the options pictured…

View original 823 more words

Posted in Tips & Tricks | Comments Off

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 single images you may have inserted in your posts. 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

Ever accidentally publicize a post that you didn’t mean to?

Ever accidentally publicize a post that you didn’t mean to? This snippet will prevent the connections from being auto-selected, so you need to manually select them if you’d like to publicize something.

add_filter( 'publicize_checkbox_default', '__return_false' );

You can place this code snippet in your theme’s functions.php file, or in a functionality plugin.

Posted in Code snippets, Tips & Tricks | Tagged , | 5 Comments
Follow

Get every new post delivered to your Inbox.

Join 62,102 other followers