Select Page

Ipod, iPhone, iPad Add to Home Screen for Joomla! CMS

Ipod, iPhone, iPad Add to Home Screen for Joomla! CMS

add2Home_ipod_iphone_ipad_joomla_000

This small plugin for #Joomla! add a message inviting iPhone/iPad users to add the web application to the home screen.

The code is compatible with iPhone/iPod touch, iPhone4 and iPad. On older devices the “add” icon is a “+” while on iOS 4.2 it has been replaced with . The script detects the OS version and displays the appropriate icon.

The message appears after 2 seconds (customizable) from page load, and is destroyed after 20 seconds (also customizable). The balloon enters and exits the screen with a quick configurable animation: drop from top, bubble from bottom or fade in/out. Additionally it also let you choose a custom icon for your blog when a visitor adds your website to start screen.

add2Home_ipod_iphone_ipad_joomla_001 add2Home_ipod_iphone_ipad_joomla_002

This plugin is based on the project add2Home (MIT license) and all credits goes to the author Matteo Spinelli

Download here 

  • plg_add2home_j15.zip for #Joomla! 1.5
  • plg_add2home_j16.zip for #Joomla! 1.6/1.7

add2Home_ipod_iphone_ipad_joomla_00

  • animationIn: the animation the balloon appears with. Can be: drop, bubble and fade. Default: drop.
  • animationOut: the animation the balloon exits with. Can be: drop, bubble and fade. Default: fade.
  • startDelay: milliseconds to wait before showing the message. Default: 2000
  • lifespan: milliseconds to wait before hiding the message. Default: 20000
  • bottomOffset: distance in pixels from the bottom (iPhone) or the top (iPad). Default: 14
  • expire: minutes before displaying the message again. If you don’t want to show the message at each and every page load, you can set a timeframe in minutes. The message will be shown only one time inside that timeframe. Default: 0 (=always show).
  • message: Define a custom message to display OR set a fixed locale. If you don’t like the default message we have chosen for you, you can add your own. You can also force a language by passing the respective locale (eg: ‘en_us’ will always display the English message). Default: ” (=script decides).
  • touchIcon: if set to true, the script checks for link rel="apple-touch-icon" in the page HEAD and displays the application icon next to the message. Default: false.
  • arrow: shows the little arrow pointing the bottom bar “add” icon. For custom designs you may want to disable it (ie: set it to false). Default: true.

You can see a demo of it at http://vimeo.com/19090508 and it is currently active on this blog.

You can create your own Apple icon using free online service like

http://wizardtoolkit.com/shooter/iPhone-Icon-Generator

About The Author

I worked with various Insurances companies across Switzerland on online applications handling billion premium volumes. I love to continuously spark my creativity in many different and challenging open-source projects fueled by my great passion for innovation and blockchain technology.In my technical role as a senior software engineer and Blockchain consultant, I help to define and implement innovative solutions in the scope of both blockchain and traditional products, solutions, and services. I can support the full spectrum of software development activities, starting from analyzing ideas and business cases and up to the production deployment of the solutions.I'm the Founder and CEO of Disruptr GmbH.

Categories