PHPMatters Help You Better Hosting Your PHP-based Sites
How to Display Mobile App Badges in WordPress

How to Display Mobile App Badges in WordPress

As the smartphone has become a must-have item for all the people nowadays, the app stores are more and more crowded, coming with a large number of options to achieve different purposes, such as online shopping, listening music, watching videos, social networking, dating and many more. Due to this circumstance, many webmasters now choose to add some badges for the paid mobile apps on their websites after signing up the affiliate programs with these applications.

This practice can help you earn some commissions if people purchase or download the app from your website. On the other hand, your readers can be informed with some popular or newly added mobile applications which might be useful for them.

As researched, we have found that some webmasters even turn their blog site into a mobile app review site. Due to the necessity and importance of the mobile phone in our daily life, this kind of review site generally gets a massive daily traffic.

Looking to know how to do this? In the following, we have shared a simple guide about how to display mobile app badges in WordPress sites.

Install and Configure the WP-AppBox Plugin

To insert the mobile app badges into your WordPress site, the easiest way is to utilize the WP-AppBox plugin. In addition to the badges, this special tool also allows you to display the app details in your pages or posts, which are tracked from a variety of online stores automatically via the generated shortcode. These app stores include Amazon App Shop for Android, App Store for IOS system, FireFox Add-On, Chrome Web Store, Opera Marketplace, Google Play Store and many more.

In addition, this plugin is responsive enough that can adapt to different devices and screen sizes. Even, it allows you to display the QR code for the download and purchase of each mobile app based on the mouse-over.

Now, you need to install this great plugin on your site. For this, you should log into the admin panel of your WordPress website and click Plugins tab. After that, you can press the Add New button and search for this plugin. After targeting the right option, you simply need to click the Install Now button and activate it instantly.

WP-AppBox Plugin

To set up this plugin for the proper utilization, you should click the WP-AppBox button from the WordPress Settings tab and finish the below settings.

Decide the Overall Output

First of all, you should decide how these app badges will be displayed on your site. There are 4 standard formats you can choose, which include the Simple Badge, Screenshots, Compact Badge and Screenshot Only. You can choose them based on your webpage layout and design.

Badge Formats

Personally, we recommend you to adopt the default option of Simple Badge if you decide to showcase multiple badges in a single page.

Simple Badge

After that, you should determine some minor aspects, such as whether to show the icons of Apple Watch apps and whether to replace the gray icons for the app stores with the colored options.

Also, as this plugin allows you to add the star rating system for the showcased mobile applications, you can choose to display the default monochrome stars or the colorful stars. Also, you have the freedom to hide the app rating based on your needs.

In addition, as you need to offer the download links for the apps so that people can get them easily, here, you also should decide the caption of the download button, whether to add the “nofollow” tag for these links and whether to open these download links in a new window.

Decide the Overall Output

Set Up the Cache Settings

The caching interval directly indicates how long and how open the app data will be updated from your web server. The recommended interval is 600 minutes, which can benefit the running speed of your site in the maximum.

As for the settings of disabling auto-caching and clearing the post-cache, we personally recommend you to leave the settings unchanged.

Cache Settings

Enter the Affiliate IDs

This part is essential if you are looking to make money by showcasing the mobile app badges on your site. By default, this plugin allows you to add your own affiliate ID or token for the Windows Store, Amazon Store and App Store. After that, the app downloading links can be showcased with the affiliate ID attached. If you have no ID at these stores, you can also use the ID of the app developer.

In addition, it is possible that your website is the multi-author one, so you can choose to activate the custom affiliate IDs. In this case, all the users and editors have the right to enter their custom affiliate IDs for different mobile applications.

Enter the Affiliate IDs

Now, your website users should navigate to the Users tab and tick the Your Profile button. After moving to the bottom of the screen, there is a special “WP-Appbox: Affiliate-IDs” area, from which users can enter their custom affiliate IDs.

WP-Appbox: Affiliate-IDs

Choose the Store Buttons

This part decides which buttons for the app stores can be showcased in the Text Editor and Visual Editor of your WordPress site.

Store Buttons

Here, you can show all the supported store buttons separately.

Store Buttons

Or, you can combine them within a single AppBox button.

AppBox Button

In addition, you can choose the custom settings for the button display. For instance, you can hide some of them, include some options into the AppBox button drop-down menu and display some button in the Text Editor only and others in the Visual Editor only.

Custom Store Buttons

Decide the Store URLs

Now, you need to decide the query URLs of all the app stores. Here, you can choose to use the default URL or the customized link that is attached with your affiliate ID.

Store URLs

Determine Some Advanced Settings

The above-mentioned aspects are the most important settings you should configure. If you want to set up a little bit more, you can also check the Advanced tab for determining the aspects of Stylesheets and Scripts, Error Output and Troubleshooting and SSL utilization for Apple App Store.

  • Stylesheets and Scripts – From this part, you can choose to load all the stylesheet and font in a normal way by disabling the lean loading, disable the plugins stylesheets and stop loading the Google fonts.
  • Error Output and Troubleshooting – Here, you can choose whether to show the error messages when apps are not found via your links, whether to activate parse output, whether to force reloading and many more.
  • SSL – You can use SSL for the images tracked from Apple App Store. However, we personally do not recommend this practice for some images are not available on the HTTPS servers.

Add and Display Mobile App Badges in Your WordPress Posts and Pages

This plugin makes it easy to display the mobile app badges on your blog posts or webpages. Here, you simply need to edit your existing post or create a new one for the badges display.

In the editing screen, you can find the app store buttons. Here, you simply need to click your target buttons and the plugin will generate the corresponding shortcode just like the below screenshot shows.

Store Shortcode

Only having the store shortcode displayed is not enough. You also need to check the app store to find out the mobile app you are going to display. After that, copy the app ID correctly from the address bar, and then, paste it into the previously generated shortcode just like as below.

APP ID Shortcode

Note that this plugin allows you to add as many mobile app badges as possible into your blog posts or main pages. And the display of multiple options is based on Output settings you have determined previously.

Badge Example