Tervezz saját Mentés gombot a webhelyedre

Tippek és hibaelhárítás

„Ha 2016 júniusa előtt adtad hozzá a hivatalos Mentés gombot a kódodhoz, akkor felhívjuk figyelmedet, hogy 2017. október 3-án „Mentés” feliratúra frissítettük .”

A Mentés gomb a legjobb eszköz, hogy népszerűbbé tedd vállalkozásodat a Pinteresten. A webhelyed oldalaira kitett Mentés gombbal ügyfeleid gyorsan és egyszerűen menthetik az ott talált érdekes tartalmakat a Pinterestre, így idővel még többen felfedezhetik azokat. 
 
Amennyiben Wordpress-, Blogger-, Tumblr-, Wix- vagy Squarespace-webhelyed van:
 
WordPress.com WordPress.com
A Wordpresshez készült Pin It gomb nem igényel külön kódot az oldaladon. Az összes Wordpress-blogbejegyzésedet elláthatod Pin It gombbal, ha ezt engedélyezed az alapértelmezett megosztási beállításoknál.
  1. Lépj be a Wordpress irányítópultjára
  2. A Settings (Beállítások) területen válaszd a Sharing (Megosztás) lehetőséget
  3. A Sharing Buttons (Megosztási gombok) részben húzd a Pinterest szolgáltatás gombját az Available Services (Elérhető szolgáltatások) mezőből az Enabled Services (Engedélyezett szolgáltatások) mezőbe
  4. Ha az alapértelmezett Pin It gombot szeretnéd megjeleníteni, a Button style (Gombstílus) legördülő menüben válaszd az Official ​buttons (Hivatalos gombok) lehetőséget
  5. Kattints a Save Changes (Módosítások mentése) gombra az oldal alján
WordPress.org WordPress.org

Töltsd le a lebegő Pin It gomb készítéséhez szükséges bővítményt a WordPress.org bővítménytárából.

Blogger Blogger
  1. A Blogger vezérlőpultjában válaszd a Layout (Megjelenés) részt
  2. Kattints az edit (szerkesztés) lehetőségre a Posts (Blogbejegyzések) részben
  3. Görgess a Show Share Buttons (Megosztási gombok megjelenítése) lehetőségre, és jelöld be a jelölőnégyzetet, ha az még nincs bejelölve
  4. Ha szeretnéd, rendezd át az elemeket az Arrange Items (Elemek elrendezése) részben, majd kattints a Save (Mentés) gombra
Tumblr Tumblr
Első lépésként hozzá kell adnod egy JavaScript sort.
 
A JavaScript-sor hozzáadása:
  1. A Tumblr felületén válaszd ki a szerkeszteni kívánt blogot, majd kattints a Customize (Testreszabás) lehetőségre
  2. Kattints az Edit HTML (HTML szerkesztése) menüpontra a Customize (Testreszabás) képernyőn
  3. Görgess a kód aljára
  4. Ellenőrizd, hogy a kódod tartalmazza-e a pinit.js elemet. Ha tartalmazza, már kész is vagy!
  5. Ha nem tartalmazza, illeszd be a következő kódot pontosan a záró </body> címke elé: <script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
 
Lebegő Pin It gomb hozzáadása:
  1. Győződj meg arról, hogy a fenti lépések végrehajtásával sikeresen hozzáadtad a JavaScript-sort
  2. A Tumblr felületén válaszd ki a szerkeszteni kívánt blogot, majd kattints a Customize (Testreszabás) lehetőségre
  3. Kattints az Edit HTML (HTML szerkesztése) menüpontra a Customize (Testreszabás) képernyőn
  4. Görgess a kód aljára
  5. Add hozzá a data-pin-hover="true" kódot az “src=” elem elé a fenti 4. lépésből. Az új sornak most a következőképpen kell kinéznie: <script type="text/javascript" async data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
  6. Kattints az Update Preview (Frissítések előnézete) gombra. A kurzort a jobb oldalon található kép fölé húzva meg kell jelennie a Pin It gombnak. Ha mégsem, térj vissza a 4. lépéshez, és ellenőrizd, hogy helyesen jártál-e el.
  7. Kattints a Save (Mentés) gombra
Wix.com Wix.com
  1. Kattints a Hozzáadás (+) lehetőségre a szerkesztőpanel bal oldalán.
  2. Kattints a Közösségi fülre.
  3. Görgess a lap aljára, és kattints a Pinterest Pin It gombra.
  4. Húzd a Pin It gombot az oldalon a kívánt helyre.
  5. A Pin It gomb segítségével pint hozhatsz létre az általad választott képből és az ahhoz hozzáadott leírásból. A pin linket fog tartalmazni arra az oldalra, ahol a Pin It gombra kattintáskor tartózkodsz.
Squarespace Squarespace

Ha szeretnéd megtudni, hogyan építheted be a Pin It gombot Squarespace-oldaladra, kattints ide

 
Ha saját gombot szeretnél tervezni, először is el kell döntened, hogy milyen Mentés gombot szeretnél elhelyezni az oldalaidon. 3 típusú gomb közül választhatsz: 
 
  • Képre mutatás (lásd itt): Ha valaki rámutat valamelyik képre az oldalon, megjelenik a Mentés gomb.
    Learn how to build it Learn how to build it
    1. Nyisd meg a modultervezőt.
    2. Válaszd a Lebegő gomb lehetőséget a Gombtípusok szakaszban.
    3. Szabd testre a gombod méretét és formáját. 
    4. Az egérkurzorral a minta kép fölé lépve tekintsd meg a gomb előnézetét. Ha rákattintasz a Pin It gombra, megnézheted annak működését is.
    5. Ha elégedett vagy a gombbal, másold be a kódot a Kód bemásolása mezőbe.
    6. Illeszd be a kódot közvetlenül a záró </body> címke elé webhelyed minden egyes olyan oldalán, ahol szeretnéd, hogy a gomb megjelenjen.
  • Bármelyik kép  (lásd itt): Ha valaki rákattint a gombra, az oldal bármelyik képét mentheti. Ez nagyon egyszerű.
    Learn how to build it Learn how to build it
    1. Nyisd meg a modultervezőt.
    2. A Gombtípusok szakasz alatt válaszd a Bármely kép lehetőséget.
    3. Szabd testre a gombod méretét, formáját, nyelvét és képét. 
    4. Az egérkurzort a mintaképre húzva tekintsd meg a gomb előnézetét. Ha rákattintasz a Mentés gombra, megtekintheted a működését is.
    5. Ha elégedett vagy a gombbal, másold ki az oldal jobb oldalán megjelenő kódot.
    6. Illeszd be a kódot webhelyed minden olyan oldalának nyitó <body> és záró </body> eleme közé, amelyiken szeretnéd, hogy a gomb megjelenjen
  • Egy kép(lásd itt): Ez a Mentés gomb egy képhez tartozik, és több kódolási munka kell hozzá.
    Learn how to build it Learn how to build it
    1. Nyisd meg a modultervezőt
    2. Szabd testre a gombod méretét, formáját, nyelvét és képét. 
    3. Add hozzá azoknak a weboldalaknak az URL-címét, ahol a Mentés gomb létrehozásához használandó képek találhatók (ez lehet a kezdőlapod, vagy a webhelyed bármelyik másik oldala).
    4. Nyiss meg egy új ablakot a böngésződben, és ugorj a saját webhelyedre
    5. A jobb gombbal kattints arra képre, amelyhez létre szeretnéd hozni a Mentés gombot.
    6. Válaszd a Kép URL-címének bemásolása lehetőséget
    7. Térj vissza a modultervezőbe, és másold be a kép URL-címét a Kép mezőbe
    8. Készíts egy leírást a képedhez
    9. Az előnézet megtekintéséhez kattints a Készítsd el! gombra
    10. Ha elégedett vagy a gombbal, másold ki az oldal jobb oldalán megjelenő kódot.
    11. Illeszd be a kódot webhelyed minden olyan oldalának nyitó <body> és záró </body> eleme közé, amelyiken szeretnéd, hogy a gomb megjelenjen

Gyakori problémák

A Mentés gomb számlálója nem jelenik meg, illetve nem jó számot mutat
A Mentés gombra kattintva a táblaválasztó nem nyílik meg egy új ablakban
Nem működik a lebegő gomb
A Pinterest nem tud kapcsolatot létesíteni az oldalammal

A számláló azokat a pineket mutatja, amelyek a gomb kódjához hozzáadott URL-címen találhatók. Ha ez nem egyezik meg azzal az oldallal, amelyen éppen tartózkodsz, a számláló a várttól eltérő számokat mutathat.

Ha a Bármely képhez típusú Mentés gombbal használod a számlálót, akkor az az aktuális tartózkodási oldalad URL-jére mutató összes pin számát mutatja.

Ha olyan számlálót használsz, amely a gomb mellett található, és még nem érkezett pin erről az oldalról, a számláló nem látható. Amint valaki pinel az oldalról, a számláló azonnal megjelenik.

Ha egy külső fél bővítménye által biztosított Mentés gombot használsz, a probléma megoldásáért lépj kapcsolatba a bővítmény készítőjével. 

Ha saját Mentés gombot használsz, próbáld ki az alábbi tippeket:

  • Ellenőrizd, hogy biztosan beillesztetted-e a JavaScript-sort weboldalad kódjába a záró címke elé
  • Ha az oldaladon többször is szerepel a JavasScript sor, próbáld meg eltávolítani az összes példányát a legutolsó kivételével.
  • Ha egyszerre próbálkozol a speciális aszinkron JavaScript sor és a hagyományos JavaScript sor használatával, távolítsd el az egyiket.
  • Amennyiben harmadik féltől származó bővítményt használsz, ellenőrizd, hogy az nem adta-e már hozzá a pinit.js sort a kódodhoz. Ebben az esetben neked azt már nem kell újra hozzáadnod.
Egyes tárhelyszolgáltatók nem támogatják a JavaScript használatát, ezért nem fogod tudni hozzáadni webhelyedhez a modultervezőnk által generált kódot. Valószínű azonban, hogy ők is kínálnak valamilyen megoldást a modulok hozzáadására.

Próbáld ki a következő hibaelhárítási tippeket:
 
  • Győződj meg róla, hogy a képek mérete az egyik oldalukon (magasság vagy szélesség) eléri a 100 pixelt, a másik oldalukon pedig a 200 pixelt (a lebegő Mentés gomb megjelenéséhez a képek mérete nem lehet 120x120 pixelnél kisebb).
  • Győződj meg róla, hogy a képeid nincsenek CSS háttérben definiálva, és ellenőrizd, hogy minden egyes kép src attribútuma "img"-vel kezdődjön
  • Add hozzá a lebegő gomb kódját közvetlenül a záró címke fölé

Ez azt jelenti, hogy a Pinterest időtúllépés miatt leáll, mielőtt létrehozhatnánk a pint az oldaladon. Ezt a problémát sajnos mi nem tudjuk megoldani, mivel rendszerint a webhelyek lassúsága okozza. Javasoljuk, nézd át saját beállításaidat.