Förbättra dina intressen genom att skapa en Facebook Giveaway med WordPress

Som många vet du att vi nyligen lanserade en ny webbplats List25 förra månaden. Vi har gjort en hel del sociala medier kampanjer för det, och på en månad kan du se att webbplatsens facebook gillar räkna redan överträffar 27 tusen. Ja det är ganska vansinnigt. En av de saker vi gjorde för att ge den här webbplatsen en start på facebook var att skapa en facebook giveaway-kampanj. För vilken du ser annonsen i sidofältet i WPBeginner. I den här artikeln kommer vi att visa dig hur du kan öka dina gillar genom att skapa en facebook giveaway-kampanj med WordPress. Detta kommer att bli väldigt intressant när det gäller resultat, så läs vidare.

Obs! Intermediate nivå av teknisk kunskap om WordPress och CSS krävs för denna handledning. Vi försökte göra det så klart som möjligt för alla att följa.

Hur fungerar denna Giveaway?

När användaren landar på List25s Facebook-sida, ser de målsidan för vår tävling. Det står "List25 gör en Holiday Giveaway" -> Vinn $ 25 Amazon Presentkort. Gilla vår sida för att se hur du kan skriva in. Bild nedan:

Amazon presentkort är något som många människor vill ha. Så majoriteten av användarna klickar Liknande för att se hur de kan komma in. När de gillar sidan visas de nu som fan-only-innehållet som innehåller instruktionerna om hur man vinner. Det säger i princip att vi ger bort 25 x 25 dollar Amazon Presentkort. Du måste dela den här sidan med dina vänner för att kvalificera dig. Det finns en knapp för användaren att klicka och dela sidan med sina vänner.

När användaren klickar på knappen visas en popup-fönster till din vägg så här:

Vi har redan fördefinierat texten och bilden där. Så allan användaren måste göra är att skriva sin kommentar och dela den. När de slår dela kommer de att komma till sidan för att skriva in deras information. Om användaren klickar på Avbryt, skickas de tillbaka till föregående flik.

Denna kampanj kommer att vara live fram till 20 december (det är när vi kommer att meddela våra vinnare). Så för dem som vill se en live demo av detta, gå över till List25 Fan Page och se det själv.

Den skrämmaste delen om allt detta är att de flesta tror att det kommer att kräva att du gör någon galen kodning eller betala stora pengar för att få en app så här. Vad händer om vi skulle säga att vi gjorde allt detta med en kombination av WordPress-plugins, MailChimp och självklart designkompetenser för bilderna. Vill du veta hur man gör det? Läs med.

Steg 1: Få saker tillsammans

Första sak du behöver göra är att räkna ut vad du ska ge upp. I vårt fall var det Amazon Giftcards. Som jag nämnde tidigare krävde det en kombination av plugins och tjänster. Så jag lägger ut allt här ute. Kom ihåg att vissa är betalade plugins:

• WP4FB Pro <- Get the Pro option if you want to be able to do the stuff we did (the feature is called Like Gate and Share Gate) which is only available at Pro and Developer level.
• WordPress HTTPs-plugin (gratis från arkivet)
• SSL-certifikat för HTTP-användare. Från och med 1 oktober kräver Facebook nu att utvecklare har en SSL-klar version för användarna som använder säkrade surfning. Om du är på en dedikerad server som oss måste du betala för ett SSL-certifikat. HostGator avgifter som $ 50 / år för tjänsten. Men vi slutade få vår för $ 12,99 / år från Godaddy Special Klicka här för att få det.

  Om du befinner dig på HostGators delade värdplan har KimWoodbridge en handledning som visar hur du använder deras delade SSL.

• MailChimp eller Aweber konto. I grund och botten behöver du ett sätt att lagra namn och e-post, så du kan senare meddela vinnarna. Facebook kräver att du samlar in uppgifterna separat, annars är det mot deras TOS. Så nej, du kan inte meddela användaren på Facebook för att låta dem veta att de vann.

Bortsett från allt ovan måste du ha följande grafik redo:

• Grafisk sida för sida utan sida
• Fan-Only Page Grahpics där du visar detaljer om hur du skriver in (med ett klick för att dela knappen)
• Succes sida med en blankett där du kan användaren kan ange deras data
• Miniatyrbild för delinnehållet

Total investering:

- $ 67 för WP4FB Pro
- $ 12.99 för SSL via Godaddy (Detta är ett specialerbjudanden. Normalt kostar det $ 69. Klicka här för att få det)
- Gratis upp till 2000 e-postmeddelanden: MailChimp (Vår plan kombineras med WPBeginner så vi betalar för det)
- 25 x $ 25 Amazon Presentkort ($ 625) <- This will vary based on what you are giving away. Before you move on to the next step, It is assumed that you have gotten all the things together. For SSL, if you got the certificate, it needs to be installed on your server. HostGator installed it on our server for us. You just have to ask their support.

Steg 2: Installera WordPress HTTP

Installera och aktivera insticksprogrammet WordPress HTTPs plugin från WordPress-arkivet.

Gå till Inställningar »WordPress HTTP och ändra SSL-värd till din domän.

Kontrollera att kryssrutan för Force SSL Exclusively är markerad.

Klicka på Spara inställningar.

Steg 3: Konfigurera WP4FB Pro

När du har köpt WP4FB Pro, installera och aktivera den på din webbplats. Du kommer att se att ytterligare 3 menyalternativ läggs till i WordPress-instrumentpanelen. Main WP4FB en, och sedan två anpassade posttyper som heter WP4FB-sidor och WP4FB-bilder. Så kan vi börja med WP4FB Meny. Fyll i alla allmänna inställningar som sidfot, RSS-adress, Twitter osv.

Nästa alternativ är Facebook. Om du åker dit märker du att det kräver Facebook Application ID och Secret Key. Så du måste gå och få det. Registrera din egen applikation i Facebook Developers-området. Det finns många tutorials på webben av hur man gör det. När du köper WP4FB Pro kommer det med en serie videotutorials om hur du gör det här. Därför kommer jag inte att täcka hur jag registrerar en facebook-applikation i den här artikeln. (Använd sin video handledning) eller en annan handledning på webben.

När du har fått ditt app-ID och facebook-hemlig nyckel lägger du in den i WP4FB Facebook-inställningarna.

Du måste ha kryssrutan fan-gate markerad. Välj sedan preliknande sidan. Men eftersom du bara installerade den här sidan ser du inget alternativ där. Så vad du behöver göra är att gå till WP4FB Sidor-fliken och klicka på Lägg till ny.

Skapa en pre-liknande sida. I vårt fall för List25 skapade vi en sida som heter Giveaway. Lägger inte till något innehåll i innehållsrutan. Vi använde helt enkelt en bakgrundsbild för att få den stil som vi behövde. Men det här var en genväg för att göra saker snarare än att spendera tid för att skapa en anpassad mall för WP4FB.

Om du ser, har vi visningsnavigering och visar sidtitel inställd på NO. Det finns en definierad headerhöjd eftersom vi använder vår bild som huvudbakgrundsbild. Vårt innehåll är tomt, så all användare ser verkligen bilden.

Observera: Att vår bildadress har https: // i den. Anledningen till det är så det fungerar på Facebook.

Du måste försäkra dig om att alla virala egenskaper är avstängda för den pre-liknande sidan. När du har skapat den pre-liknande sidan publicerar den. Gå sedan tillbaka till Facebook-menyn under de viktigaste WP4FB-inställningarna och välj den här sidan.

Därefter måste du skapa en sida med en enda innehållsrik sida som innehåller detaljer om hur man skriver in innehållet. Därför använde vi också en bakgrundsbild för att göra saker snabbare och enklare för oss. Utom den här tiden använde vi innehållswebbplatsens webbadress i stället för rubrikens bildadress. Anledningen till det var att vi ville använda HTML för att initiera Share Gate-funktionen.

Observera igen att bildadressen är HTTPS. Du måste göra det här.

När jag förklarade att vi använde innehållswebbadress, så kan vi använda HTML-taggar. I grund och botten såg vår bild så här:

Vi behövde göra knappen Klicka här för att Dela-knappen klickbar. Så vi lade till följande HTML-taggar i vårt innehållsområde med hjälp av HTML-redigeraren snarare än den visuella redigeraren.

 Klicka här för att dela 

Din CSS varierar beroende på bakgrundsbilden du använder. Men du får den allmänna idén om vad vi gör ovanför rätt? I grund och botten vill vi göra Klicka här för att Dela knappen en länk till vår hemliga sida där användaren kan komma åt formuläret för att komma in i tävlingen.

Låt oss fortsätta och skapa vår tredje och sista sida. Vi följde i stort sett samma riktning som den enda fläktens sida ovan. Vi använde innehållswebbplatsens bildadress och använde HTML i innehållsredigeraren. Den viktigaste delen om den här sidan var att vi aktiverade Viral Feature Share Gate.

Nu märker vi att vi fyllde i Open Graph Settings också. Detta är den information som kommer att visas för användaren när de träffar delgatepunkten. Se bilden nedan:

Så se till att du lägger rätt bild, en exakt titel och en övertygande beskrivning.

Den sista sidan såg ut så här:

Så i grunden hade vår bakgrundsbild två tomma fält. Vi gick in i MailChimp och tog tag i en formulärkod för en ny e-postlista som vi skapade för List25. Och lägger till det på den sista sidans innehållsområde med styling.

Här är koden som vi lagt till (självklart kommer din formulärkod att vara annorlunda, men det skulle vara en bra utgångspunkt):

När du har publicerat den här sidan. Ta webbadressen till den här sidan och lägg till den i knappen på den sida som endast är fan-bara som vi delade ovan.

Steg 4: Främja Giveaway

Du kan lägga till den givna sidan, men ingen kommer att veta om det. Om du har en befintlig användarbas kan du låta dem veta om giveaway. I vårt fall hade vi inte det. Följande är de steg som vi tog:

- Lades till en sidobar banner på List25 och WPBeginner som främjar tävlingen.
- Vi kör även Facebook-annonskampanjer för att marknadsföra tävlingen (extra pengar som vi spenderar men du behöver inte)
- Delade det med våra vänner

Den virala aspekten av giveawayen bär sig själv. Alla vill ha gratis pengar.

Resultat

Behöver jag säga mer att vi har över 27 000 gillar på en månad. Of course inte alla är från tävlingen eftersom vi gör andra kampanjer också. Men det är rättvist att säga att minst en tredjedel av dessa fans är från giveaway.

Hur lång tid tog det oss för att göra det här? Jag skulle säga ungefär 4 - 5 timmar. Var det värt det? Heck ja det var.

Kommer du att göra detta på din webbplats? Låt oss veta dina tankar.