JustSnowboard.nl Snowboardshop op basis van Magento Wij maken solide webapplicaties op basis van het CakePHP framework Wij beheren en onderhouden Magento E-commerce websites
E-commerce site op basis van Magento voor iPhone hoesjes
Home » Blog » iPhone bookmark icon toevoegen aan je (Magento) site - Aquive Media

iPhone bookmark icon toevoegen aan je (Magento) site

Door Akif in: Magento |
iOS-bages

E-commerce verplaatst langzaam maar zeker naar mobiele apparaten. Ik denk niet dat ik een bron hoef aan te halen omdat iedereen dit wel zal erkennen. Dit merk ik vooral ook bij mezelf ook omdat ik steeds vaker webshops opzoek op een mobiel device. Met de opkomst van tablets zal dit nog veel meer worden. Op iOS devices zoals op de iPhone en iPad kan je een bookmark maken van een website op je homescreen. Standaard word hiervoor een leeg wit icoontje geplaatst. Om extra op te vallen kan je dit icoontje zelf wijzigen. Dit werkt overigens voor elke website. Hoe je dat doet staat hieronder beschreven.

Stap 1: Maak en PNG bestand van exact 57×57 pixels en noem deze “apple-touch-icon.png”.

Stap 2: Upload het naar de root of een andere directory op de server.

Stap 3: Voeg het volgende element toe in de tag van de website.

<link rel="apple-touch-icon" href="apple-touch-icon.png" />

Om vervolgens te testen hoe dit er uit ziet ga je naar safari en open je de website. Kies vervolgens voor meer opties, en kies voor “Zet in beginscherm”. Er zal nu een bookmark gemaakt worden in de homescreen van je device met het logo die je zelf hebt gemaakt. Je krijgt gratis een Apple glans over je logo. Dat ziet er dan bijvoorbeeld zo uit.


9 reacties op “iPhone bookmark icon toevoegen aan je (Magento) site”

  1. Femke zegt:

    hoi, ik heb het logo toegevoegd en ziet er super uit!
    Heb alleen een vraagje; wanneer je hem toevoegt staat er voor een deel bij: “Bel nu:0162 ..” het nummer is dan niet copleet. Hoe kan ik ervoor zorgen dat het nummer compleet is?

    Mvg femke

  2. Akif zegt:

    Goed om te horen dat het is gelukt Femke. De naam wat onder het icoon komt te staat is de naam van de bookmark. Dus wanneer je het op je beginscherm zet kan je voordat je akkoord geeft de tekst veranderen.

  3. Menno zegt:

    Waar moet ik die regel code aan toevoegen? Ik heb wel ervaring met code maar met Magento helaas nog niet.

  4. Akif zegt:

    Dag Menno,

    Dat moet in het bestand head.phtml. Deze staat op de volgende locatie: /app/design/frontend/template/page/html/head.phtml

    Succes!

    Groet,
    Akif

  5. Mike zegt:

    En hoe doe je dit in css? kan geen html zien in bijvoorbeeld seoshop

Geef een reactie