Embed Qibla Direction Into Your Website
Benefits of Embedding
- It appears to be part of your own website. Our own home page uses the embedded version.
- Styling can be overridden.
- No advertisements.
- No branding except your own.
- Free of charge.
- Automatically updates when a new version is available.
- Hosted on cloud infrastructure, giving near 100% availability/uptime and high bandwidth.
Basic Usage
Copy the following code into the body of your web page:
<iframe src="http://www.qib.la/embed/" width="300" height="200" scrolling="no" frameborder="0" style="border:5px solid #BBB"> Check the prayer direction towards the Ka'ba in Makkah at <a href="http://www.qib.la/">Qibla Direction</a>. </iframe>
This is how it looks:
Advanced Usage
Display your own location. To obtain your latitude and longitude, right-click on your location within Google Maps, then select "What’s here?":
<!-- zoom and type are optional. Type can be satellite, terrain, etc. --> <iframe src="http://www.qib.la/embed/?lat=51.50093&lng=-0.14279&zoom=15&type=satellite" width="300" height="200" scrolling="no" frameborder="0" style="border:5px solid #BBB"> Check the prayer direction towards the Ka'ba in Makkah at <a href="http://www.qib.la/">Qibla Direction</a>. </iframe>
Override any style or image. To make all borders red and the address text green:
<!-- #map{border-top:1px solid red} #addr{color:green} must be URL encoded. --> <iframe src="http://www.qib.la/embed/?style=%23map%7Bborder-top%3A1px+solid+red%7D+ %23addr%7Bcolor%3Agreen%7D" width="300" height="200" scrolling="no" frameborder="0" style="border:5px solid red"> Check the prayer direction towards the Ka'ba in Makkah at <a href="http://www.qib.la/">Qibla Direction</a>. </iframe>
This is how it looks now:
Google Analytics is enabled to gauge how much effort should be invested in further enhancements. To disable it:
<iframe src="http://www.qib.la/embed/?track=no" width="300" height="200" scrolling="no" frameborder="0" style="border:5px solid #BBB"> Check the prayer direction towards the Ka'ba in Makkah at <a href="http://www.qib.la/">Qibla Direction</a>. </iframe>
Geolocation
Have the web browser determine the person's location automatically if their browser supports geolocation:
<head> <script> var zoom = 12; // 18 for mobile phones because the geolocation is more accurate function init() { // Don't bother if the web browser doesn't support cross-document messaging if (window.postMessage) { if (navigator && navigator.geolocation) { try { navigator.geolocation.getCurrentPosition(function(pPos) { send(pPos.coords.latitude, pPos.coords.longitude); }, function() {}); } catch (e) {} } else if (google && google.gears) { // Relevant if targeting mobile phones (some of which may have Google Gears) try { var geoloc = google.gears.factory.create("beta.geolocation"); geoloc.getCurrentPosition(function(pPos) { send(pPos.latitude, pPos.longitude); }, function() {}); } catch (e) {} } } } function send(pLat, pLng) { var myiframe = document.getElementById("myiframe").contentWindow; // The third parameter, zoom, is optional myiframe.postMessage(pLat + "," + pLng + "," + zoom, "http://www.qib.la"); } window.onload=init; </script> </head> <body> <iframe id="myiframe" src="http://www.qib.la/embed/" width="400" height="400"> Check the prayer direction towards the Ka'ba in Makkah at <a href="http://www.qib.la/">Qibla Direction</a>. </iframe> </body>