Hem  ›  1. Kontakter  ›  Prenumerationer  ›  Samla in prenumeranter till ditt nyhetsbrev via Facebook

Samla in prenumeranter till ditt nyhetsbrev via Facebook

Taggar: ,

Artikeln uppdaterad 2012-12-13. Facebook har gått över till en säker anslutning så denna metod orsakar vissa bekymmer i en del webbläsare. Bland annat ger Internet explorer användaren en varning när formuläret skickas, men informationen går ändå iväg. Det är tyvärr inget vi kan göra för att lösa detta i nuläget.

 

Nu kan du enkelt och smidigt lägga upp ett formulär direkt på din Facebook-sida. Gå igenom stegen nedan så har du ett fullfjädrat prenumerationsformulär på Facebook.

Installera applikationen ”Static HTML: iframe tabs” på din Facebook-sida

Sök efter ”Static HTML” på Facebook och välj det översta alternativet. I nästa steg klickar du på ”Add static HTML to a page”. Du får då upp en lista med dina sidor där du kan lägga till applikationen på den aktuella sidan.

Lägg till prenumerationsformuläret på Facebook-sidan

Gå till den aktuella sidan och klicka på tabben ”Welcome” för att börja redigera den. När du klickar på tabben kommer du in i redigeringsläget. Där kan du klicka på ”Edit”, det är i denna yta du klistar in prenumerationsformuläret.

Vet du inte hur du tar fram koden för ett prenumerationsformulär, se supportavsnittet angående detta här.

Här kan du skriva en kort inledningstext samt klistra in koden för formuläret som du får från Get a Newsletter. I exemplet nedan har vi skrivit introdutionstexten innanför paragraf-taggar (<p>text</p>) för att det ska formateras på rätt sätt och sedan klistrat in koden för formuläret.

Lägg till titel och egen ikon

När du väl klistrat in koden för prenumerationsformuläret är egentligen allt klart. Men för att skapa en lite trevligare känsla kan det vara en idé att namnge tabben. För att göra detta följ stegen nedan:

  1. Klicka på den lilla pilen längst till höger i bild nedan. Detta försätter tabbarna i redigeringsläge.
  2. Klicka sedan på ikonen med pennan och välj ”redigera inställningar”.
  3. När detta är gjort får du upp en dialogruta som ger dig möjligheten att namnge tabben samt lägga till en egen ikon.

Resultat

Om allt gått planenligt har ni förhoppningsvis ett resultat som liknar det nedan. Den vänstra bilden visar hur tabben ser ut med ny ikon och den högra bilden visar hur själva formuläret ser ut. Vi genererar endast ren HTML-kod när du skapar ett prenumerationsformulär i verktyget men om du vill ha ett lika snyggt formulär som oss finns koden att tillgå nedan.

Koden för formuläret:
Denna kod klistrar du alltså in i redigeringsläget för tabben och ersätter raden [ din formulärkod här ] med koden som du genererat i verktyget.

<style>
 body { font-family: 'lucida grande',tahoma,verdana,arial,sans-serif; }
 h2 { font-size: 18px; }
 p { font-size: 13px; line-height: 1.4; color: #555; margin-bottom: 20px; }
 .gan-form {
 border: 1px solid #ccc;
 background: #f1f1f1;
 padding: 10px 20px;
 border-radius: 4px;
 width: 300px;
 margin: 50px auto;
 }
 .gan-form input {
 background: white;
 border: 1px solid #ddd;
 box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
 padding: 7px;
 border-radius: 4px;
 -webkit-transition: all 0.2s ease-out;
 -moz-transition: all 0.2s ease-out;
 -o-transition: all 0.2s ease-out;
 transition: all 0.2s ease-out;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
 width: 295px!important;
 height: 40px;
 }
 input[type="submit"] {
 color: white;
 text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
 display: inline-block;
 border: none;
 font-size: 14px;
 text-transform: uppercase;
 letter-spacing: 1px;
 text-decoration: none;
 cursor: pointer;
 margin-bottom: 0px;
 line-height: 21px;
 border-radius: 4px;
 background: #a7cfdf;
 background: -moz-linear-gradient(top, #a7cfdf 0%, #23538a 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a));
 background: -webkit-linear-gradient(top, #a7cfdf 0%,#23538a 100%);
 background: -o-linear-gradient(top, #a7cfdf 0%,#23538a 100%);
 background: -ms-linear-gradient(top, #a7cfdf 0%,#23538a 100%);
 background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%);
 }
</style>
<div class="gan-form">
 <h2>Veckans nyhetsbrev</h2>
 <p>Varje månad skickar vi ut ett nyhetsbrev fullmatat med tips och erbjudanden. Fyll i din e-postadress nedan och klicka på prenumerera!</p>

[ din formulärkod här ]

</div>