Add to Home Screen WordPress Plugin

Hi! I’m happy to share with you my WordPress plugin called Add to Home Screen WP. This plugin is based on the awesome Add to Home Screen script by Matteo Spinelli from Cubiq.org. This script places a floating balloon inviting the user to add your website to home screen of its iPhone, iPod touch and iPad. It’s a very nice function knowing the fact that few people know that they can add a website to  the home screen as any iPhone or iPad application.

I adapted the script to let it work on WordPress, and added a settings page to let you custom appearance, effect, delay, message, icon touch, etc…

[info]

NEW UPDATE 2020 : plugin supports now all recent iPhones and tested up to WordPress 5.4 !

NEW: Use it with a PWA WordPress plugin, and turn your WordPress blog into a real « like » mobile app! More information below.

Click here to download Add to Home Screen WP Plugin from the official directory of WordPress plugins.

[/info]

You can now use a PWA WordPress plugin, like SuperPWA for instance, to turn your WordPress blog into a kind of mobile app, without the constraints of a native mobile app (store submission, costs, etc…).

With PWA coupled with Add to home screen WP Plugin, you will be able to display the legendary floating balloon that invites your visitors to add your blog to their iOs device, and then your blog will load as a PWA.

This combination is the best way to increase visitor loyalty, without being obliged to upload a costly native mobile app into App Store and Play Store.

 

Installation of Add to Home Screen WP Plugin

1. Upload add-to-home-screen-wp folder to the ‘/wp-content/plugins/’ directory or upload the zip file from the add new plugin page of your dashboard.

2. Activate the plugin through the ‘Plugins’ menu in WordPress. The floating balloon is now enabled.

3. Go to Settings > ATHS Options and play with settings.

 

Screenshots of the plugin

As you can see below, the floating balloon is displaying differently according the version of iOS.

screenshot-6  screenshot-8

 

[framed_box height= »60″ rounded= »true »]

Add to Home Screen
WP Plugin

[button size= »large » bgColor= »#db004c » link= »http://wordpress.org/extend/plugins/add-to-home-screen-wp/ » linkTarget= »_blank »]Download on WordPress »[/button]

[/framed_box]

[note title= »This plugin helped you? » align= »center » width= »517″]Please let me know by sending me a tweet, and by rating it on WordPress![/note]

44 réponses

  1. Hello

    I am using your plugin and really love (Thanks)

    Is there a way that I can force my site/webapp to load Landscape and not allow the user to rotate to portrait?

    Thanks for any help

    Kind Regards
    Ken

  2. Dear Zizo,

    Is there a way to make the fullscreen mode on an iPhone 5 full screen? I’m getting a letter boxed view which is really awful. thanx in advance.

    1. i get this too, i think there is a problem with the output of the iphone 5 image, the iphone sets the width of the app based on the image provided so the plgin is not giving the iphone 5 correct image

    2. I have the same problem with iPhone 5. There is a empty, black space on the top and the bottom. Is there a way to fix this?

      Thanks for this plugin! it’s (almost) great :)!

  3. Great plugin and so easy to use…Thanks…

    Would be great if possible to change the colours of the full screen buttons as red does not really fit my current design…possible?

    Thanks…

  4. Hi,
    First i would like to say it is a great plugin!

    I have a question. I am only interested in the Fullscreen mode and our site is very well designed that it does not need any extra navigation custom bars.

    Your plugin works in a way that:

    In Fullscreen mode, the web app will not open in Safari mode but as a separate Web application with a custom nav bottom bar. The pro is that the balloon will never appear again in this mode. The con is that you will not have Safari native options.

    Is there a way to completely delete the custom nav bottom bar. Many new responsive themes have no need for such bar as you can navigate from within the website.

    Any way to delete it?

    Best,
    Adrian

  5. I am having issues with the styling of the pop-up.
    I cannot get the background to the pop-up to display, I just see the floating text.
    I am on latest workpress version.
    Any ideas how I can fix.

    Many thanks

    Mark

  6. Is there a possibility when customers already added to home screen the message don’t show up? Because my customers really annoy when they visit my website often and everytime see that message when they already added it. Go have a look at my website yourself please. seo-site.nl

    Thank you and waiting for your reply!

  7. RESET THE EXPIRE TIMEFRAME?

    Hello!

    I changed the setting it Expire timeframe one year to reconfigure 0 to display always returned to no longer function, how can reset the timeframe Expire?

    THANKS

  8. Hi there!

    I LOVE your plugin (!), but I have one question though…

    I’m using your plugin to make a fullscreen safari web app. But, when I open the site on my iPhone, the bar above the page (the one that shows the clock, network and battery life, becomes totally black. It would be great if that bar could keep it’s original colors.

    Can you (or anyone) help me to fix this?

    Thank you.

    1. Hi!

      Thanks for the feedback, you helped me to fix this. In fact, it seems that there is a bug since iOS 7 with the status bar.

      I updated the plugin to fix this so please update your plugin to the last version et let me know if the problem has been solved.

      Thank you very much!

      1. Hi Zizo,

        Your update fixed it all! Thank you.

        Maybe I found another little bug. I’m not sure it’s a bug or I’m just stupid but here’s the thing:

        In your plugin you can add a startup screen for full-screen web-apps. I made 4 different images for every device. On my iPad 4 the image by start-up is just a quarter of the screen. And the image is alligned in the left-below corner. I made the image on a 288 dpi scale with the exact pixels you’ve mentioned.

        My iPhone 4 doesn’t recognize te image at all. I don’t have the oppertunity to test the web-app on the other devices.

        I hope you can take a look at this.

        Thank you so much!

        Grtz René

  9. Hey there, what is the code that needs to be put into the header.php? I have all of the icons added to my directory and the popup works on my mobile phone but the icon is empty. I added above … can you help?

  10. Hi Zizo,

    I tested it now. Maybe you can assist me with this:

    The startup screen works fine on iPhone 5 and 5s. Even on iPad (portrait mode). It doesn’t work properly on iPhone 4 (white startup screen) and on iPad (Landscape mode). The image on iPad is just a quarter of its original format. Al the devices I tested run on iOs7

    Is there anything I can do or is this just a little bug?

    Thank you

  11. Hi Zizo,

    As per the other comments great plugin and anyone else that has tried to build this doesnt come near. However I too have a few of the issues mentioned above, the only way to get the load screen to work on iPhone 4/4S is to remove the iPhone 5 URL in ATHS settings. I need to test if this still works but I think it will be smaller image on the iphone 5.

    Also same issue with the ipad if I use your image size recommended for IPad Portait is fine however landscape goes into the corner and doesnt work well. So I tried using different sizes (same as they do on other plugins) using 2048×1496 in the ipad landscape field on your plugin works perfectly! However it only works on the 3rd and newer generation ipads, 1 and 2 now dont see anything, so think it needs two ipad size fields 1024×748 for Ipad1&2 (Landscape) and 2048×1496 Ipad 3 onwards (landscape).

    I too get the issue with the timeout its set to 0 but once you have added the webapp to home screen, even if you delete etc you dont see the balloon again, which makes end to end testing difficult.

    If you could fix these few issues would be fantastic!! And a 5 star plugi 🙂

    Thank you for all that you have done so far

    Lee

  12. I have installed the plugin and it’s working very well. Where are the images for the navigation in fullscreen mode located? I’d like to change their color, etc.

    Great plugin! Thanks.

  13. Unfortunately, I can’t access the code to see what’s wrong exactly, but when I pair this plugin with others on my WordPress site (http://release.commons.yale.edu/trumbull/), I get the following error message:

    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘addmetawebcapablelinks’ not found or invalid function name in /var/www/html/wp-includes/plugin.php on line 406

    Any ideas? Any help would be greatly appreciated!

    Thanks!

  14. Does this plugin work for Android devices too? Also, not clear but are there setting that let you only display this the first time or couple times a user visits the site? Then after that does not display?

    Thanks

  15. Hi Zizo,

    Great plugin!

    2 questions:

    > How can I choose a certain page on which page the balloon should appear?
    Now I can only choose between ‘All pages’ or ‘Homepage’

    > Your plugin does not exist for Android?

    Merci beaucoup!

    Pieter

  16. I read a lot of interesting content here. Probably you spend a lot of
    time writing, i know how to save you a lot of time,
    there is an online tool that creates unique, google friendly
    posts in minutes, just search in google – laranitas free content source

  17. Great plugin.

    i have two question the first, when using bottom nav bar of the Fullscreen mode the image in the webpage will make the nav bar disappear when i scroll down, how do i make nav bar on the top layer?

    the second question is how do i change the nav bar icon color?

    thanks

  18. dear Zizo
    My website show error when i active plugin

    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘addmetawebcapablelinks’ not found or invalid function name in C:\wamp\www\envisionasiapacific\wp-includes\plugin.php on line 496

    how to fix this . thanks

  19. This plugin works well on iPhone but seems not working on iPad.
    I don’t know why. Maybe it has to support larger images as well?

    Another question:
    Is it possible to switch the message off when somebody has already
    your page/website on the home/bookmarks?

    Best,

    R

  20. Hi!

    I’ve found your add to home screen plugin really useful, but I seem to have a problem when I use the envira plugin with it – the lightbox function of the envira plugin seems to clash when running http://www.alexsavillephotography.com as an app from my iPhone home screen. From Safari, everything appears fine when I tap on the photo at the top, but from the home screen app, tapping on the photo doesn’t display the lightbox correctly. If I deactivate the add to homescreen plug in, the light box works, but using any links opens the website in Safari.

    Hope this makes sense. Can you cast any light on this please? Thanks

    Alex

  21. Hello!
    well done plugin! I just need to fix the following:
    on full screen mode, with the bar below with back – forward – reload I do not like icons and background color, how can i change them?

    thanks!!
    Alberto

  22. Hello,

    Please please update this plugin – I’ve been using it for long time but it’s not working with certain latest WP themes one being http://www.houzez.co

    Please can you update this plugin I will much appreciate it.

    Many thanks in advance.

    Cheers!

  23. Hello, i feel that i noticed you visited my weblog thus i got
    here to return the choose?.I am trying to find issues to enhance my site!I suppose its ok to use some
    of your concepts!!

  24. Hey Ziyad,

    Thanks for the plugin. I’ve it installed on my website. However, I want the popup to be shown only on Safari. Because on Firefox Focus or Brave browser, we do not get add to home screen option. Is there a way to fix this?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.