Publishing your store locator online
Your unique Blipstar URL is http://www.blipstar.com/blipstarplus/viewer/blipstar.php?uid=2435124
Choose an option...
Publishing on a standard website
- Option 1. Standalone page - Open store locator in its own webpage
- Option 2. Embed within webpage - Embed store locator within a webpage Recommended
- Option 3. Pop-up - Open store locator inside a pop-up window
- Option 4. Pop-up Lightbox - Open store locator inside a jQuery Lightbox
- Option 5. Search bar above map - Search bar and map/results on same page
Publishing with popular web platforms
- Option 6. Facebook page - Embed store locator inside your Facebook page
- Option 7. Wordpress - Open store locator within a Wordpress site
- Option 8. Joomla - Open store locator within a Joomla site
- Option 9. Drupal - Open store locator within a Drupal site
- Option 10. Google Earth - Export your data as a KML file
- Option 11. e-Commerce platforms - Using your locator with an e-commerce system
Option 1. Standalone page
The simplest option is to open your store locator in its own page. You do this by linking to your unique Blipstar URL.
<a href='http://www.blipstar.com/blipstarplus/viewer/blipstar.php?uid=2435124'>Store locator</a>
Option 2. Embed within webpage
If you can edit the pages of your website manually (e.g. HTML, PHP, ASP or JSP pages) another method is to use an iframe to embed your store locator directly within a page. Just copy and paste the following code into the page.
<iframe width='802' height='502' src='http://www.blipstar.com/blipstarplus/viewer/blipstar.php?uid=2435124' scrolling='no' frameborder='0'></iframe>
TIP: If you have a mobile-specific version of your site we recommend the standalone link method (Option 1) rather than using an iframe.
TIP: If you don't have the "Auto-size" option turned on, if you change the width and height of your store locator, you'll also need to update the iframe tag. See below for an alternative.
Automatically resizing store locator (responsive design) New
It's possible to use your Blipstar store locator with a responsive design website (that adapts to the width of the viewing device). To achieve this you need to:
- Turn on the "Auto-size" option (you'll find it Configure>Basic)
- Use % values for the IFRAME width and height
The following code will embed the store locator to cover 60% of the page. If the browser window width changes the store locator is automatically resized.
<iframe width='60%' height='60%' src='http://www.blipstar.com/blipstarplus/viewer/blipstar.php?uid=2435124' scrolling='no' frameborder='0'></iframe>
Option 3. Pop-up
Option 4. Lightbox (using jQuery)
If you want something a bit special then you can open your store locator inside a jQuery lightbox (a lightbox allows you to view large versions of images without having to actually leave the current page. In our case, instead of an image, we display the store locator). Here we use the excellent prettyPhoto plugin from No Margin For Error. If your site already uses jQuery then even better, but remember to remove the line of code for loading the jQuery library (as you don't want to load it twice!).
- The first code snippet needs to go inside the <head>...</head> tags:
- Add the following code snippet where you'd like the link to be on your page
Option 5. Search bar above map
You can combine a search bar and the map results page into a single page (rather than using a separate search page) - just copy and paste the following code. In this example the search bar is placed above the map/results but the layout can easily be altered.
TIP: If you change the width and height of your store locator, you'll also need to update the width and height values in the iframe code.
Option 6. Embed within Facebook
At last, an easy way to add a store locator to your Facebook page! Now your customers can use your store locator without ever leaving Facebook.
Go to how to create a store locator in Facebook for details.
Option 7. WordPress
The best way to add your store locator to WordPress is with the Blipstar WordPress plugin. It's very easy to install and set up.
A simpler alternative is to add a link on your post or page to your locator. In the WordPress editor, click the button and enter http://www.blipstar.com/blipstarplus/viewer/blipstar.php?uid=2435124 as the link.
Option 8. Joomla
You can embed your store locator within a Joomla powered site without writing a single line of code, thanks to iframes. How you do this depends on the version:
For Joomla 1.7+ (and Joomla 1.6) see Create a store locator in Joomla 1.7.
For Joomla 1.5 see Create a store locator in Joomla 1.5.
If all that sounds a little complicated then you can always add a standard link in an article (see Option 1) as you would add a link to any other website. This will open your locator in its own page.
Option 9. Drupal
If you're using the TinyMCE editor within your installation of Drupal the iframe code in Option 2 won't work because the editor automatically strips out the iframe tag. A neat solution is available courtesy of Toodlepip (check out their site to find out the details of the workaround).
- Download this TinyMCE plugin
- Copy the tinymce_extended folder to the modules folder in your installation
- Enable the module using Administer > Site building > Modules (e.g. /admin/build/modules)
- Enable the function in WYSIWYG's TinyMCE profile. To do this go to Administer > Site Configuration > Wysiwyg and click 'Edit' for the TinyMCE profile that you want to access iframe tags.
- Expand the 'Buttons and plugins' option and tick the option for 'Iframe Fix', which will be near the bottom
- You can now follow Option 2
On sites built with Drupal it's also easy to open your store locator within a lightbox.
- Edit the page/article you want the store locator link to appear in
Paste the following code:
<a href='http://www.blipstar.com/blipstarplus/viewer/blipstar.php?uid=2435124' rel='lightframe[|width:802px; height:502px; scrolling: no;]'>Store locator</a>
- You can now follow Option 2
If all that sounds too complicated then you can always add a standard link in a Drupal post (see Option 1) as you would add a link to any other website. This will open your locator in its own page.
Option 10. Google Earth
You can download a KML file of your data. It might take a few moments to generate.
Option 11. e-Commerce integration
If you use Magento, Zen Cart, Open Cart, osCommerce, Presta Shop or Tomato Cart and want to integrate your store locator directly within your site then check out this tutorial which will guide you through the process.
Other simpler options include adding an external link to a standalone page (option 1) or using a pop-up (options 3 and 4).
Secure site (HTTPS) link
You can use Options 1,2 and 3 above on a HTTPS page. It's easy, you just need to alter the blipstar URL by replacing
View all locations on a map
There are three available options if you want to show a map showing all your store locations:
- You can display your store locator map showing all locations (bypassing the search page) by using the link:
- To embed it within a page you can use
<iframe width='802' height='502' src='http://www.blipstar.com/blipstarplus/viewer/map.php?uid=2435124&type=all' scrolling='no' frameborder='0'></iframe>
- Alternatively you can plot all your locations on a Google map, useful for reference
NB: These options displays a maximum of 600 locations. If you have more than that then some will not appear on the map. Displaying more than 600 locations can slow down a user's browser considerably, hence the limit.
Small search widget
Here's a sample html snippet for adding a simple search widget to any page.
<form action='http://www.blipstar.com/blipstarplus/viewer/map.php'><input type='hidden' name='uid' value='2435124'/><input type='text' name='search' value=''/> <input type='submit' value='Go'/></form>Tip: This will cause the results to open full page but if you create an iframe and set the target attribute to that the results will appear there instead as per normal html forms.