So binden Sie einen Amazon Astore kostenlos in eine Facebook-Seite ein

Ein aStore in Facebook?

Sie haben entschieden, dass Affiliate-Marketing für Sie ist. Sie haben einen Amazon aStore erstellt. Sie haben Ihre Zeit damit verbracht, Produkte sorgfältig zu sichten, um sie zu ergänzen…

Sie nutzen die Möglichkeiten der sozialen Medien und haben sogar eine Facebook-Seite, die Ihren Affiliate-Marketing-Bemühungen gewidmet ist. Sie haben ein Titelfoto erstellt, um die Seite visuell klar auszudrücken. Sie veröffentlichen Statusaktualisierungen auf dieser Facebook-Seite mit Links zu bestimmten Produkten in deinem aStore…

Aber wäre es nicht großartig, wenn Sie den gesamten aStore direkt auf dieser Facebook-Seite präsentieren könnten? Nun… du kannst!

Benutzerdefinierte Registerkarten sind recht einfach zu verwalten. Sie können sogar die Bilder und den Titeltext anpassen, die auf der Registerkarte selbst angezeigt werden.

Ein Beispiel

Schauen Sie sich zum Beispiel die Facebook-Seite von Communist Closet an. Beachten Sie die Registerkarte "Sowjetischer Laden?"

Der sowjetische Shop ist ein Amazon aStore, der mit ein wenig HTML und einer "Facebook-legalen" App direkt in die Facebook-Seite eingebettet ist. Nein, wir hacken nichts… nutzen nur Ressourcen.

Was du brauchen wirst

Administratorzugriff auf eine Facebook-Seite (wenn Sie sie erstellt haben, haben Sie bereits Administratorzugriff)
Kostenlose benutzerdefinierte Tab-App (Ich verwende gerne statisches HTML: Iframe-Tabs)
Amazon aStore und der dazugehörige Link

Tun Sie sich selbst einen Gefallen… lassen Sie Facebook und Amazon Associate Central in separaten Browser-Registerkarten öffnen (oder sogar in separaten Browsern, wenn Sie dies bevorzugen). Auf diese Weise können Sie bei Bedarf zwischen den beiden hin und her wechseln.

App hinzufügen

Navigieren Sie zu der App in Facebook (mit dem obigen Link) und klicken Sie auf die Schaltfläche "Installieren", um die App zu Ihrer Seite hinzuzufügen. Auf dem nächsten Bildschirm werden Sie von der App aufgefordert, das Installationsziel (die Seite, auf der Sie die App installieren) zu bestätigen, wenn Sie mehr als eine Facebook-Seite verwalten.

Wählen Sie die richtige Zielseite aus und klicken Sie zur Bestätigung auf die Schaltfläche "Installieren". Ja, so einfach ist das wirklich.

Bearbeiten Sie den Inhalt der Registerkarte

Kehren Sie nach Abschluss der App-Installation zu Ihrer Seite zurück. Sie finden einen neuen Tab mit dem Titel "Willkommen!" auf Ihrem Bildschirm. Klicken Sie darauf und lassen Sie uns etwas Magie wirken!

Machen Sie sich noch keine Sorgen um den Titel und das Bild der Registerkarte, wir werden in Kürze darauf zurückkommen.

Durch Klicken auf die neue Registerkarte "Willkommen" gelangen Sie zu diesem Bearbeitungsbildschirm. Hier können Sie:

Hosten Sie Ihren "Code" im Abschnitt index.html
Organisieren Sie den Code in den Abschnitten style.css und script.js weiter (für fortgeschrittene Benutzer).
Ändern Sie die Registerkarteneinstellungen
Erstelle ein Fan-Gate (das machen wir in einem anderen Hub)

Standardmäßig landen Sie im Abschnitt index.html der App (hier erledigen wir alle unsere Arbeiten). Bitte löschen Sie den vorhandenen Text in diesem Abschnitt.

Holen Sie sich Ihren aStore-Code

In Amazon Associate Central:

Verwenden Sie das Dropdown-Menü oben links auf dem Bildschirm, um die richtige Tracking-ID Ihres aStore auszuwählen. (Dies ist nur erforderlich, wenn Sie mehrere aStores in demselben Konto haben. Wenn Sie nur einen aStore haben, machen Sie sich über diesen Schritt keine Sorgen.)
Klicken Sie im linken Menü auf "Link abrufen".
Auf der Seite wird ein neuer Bildschirm mit dem Titel "Ihr Shop wurde veröffentlicht!" Angezeigt. Direkt unter der Ankündigung sehen Sie mehrere Versionen Ihres aStore-Links.
Wählen Sie die Option "Mein Geschäft mit einem Inline-Rahmen einbetten". Wir werden diesen Code leicht ändern, um ihn für die Facebook-Integration zu optimieren.
Kopieren Sie den gesamten Code in das Textfeld und fügen Sie ihn in die App (Abschnitt index.html) in Facebook ein.

Der Code, mit dem wir arbeiten werden, sollte ungefähr so aussehen:

Sichere URL

Wenn Sie Ihren Linkcode zum ersten Mal in die App einfügen, wird eine Warnmeldung angezeigt, dass Ihre aStore-URL unsicher ist. Nein, der Link fragt Sie nicht, ob der Quellcode ihn fett aussehen lässt. Einige Browser zeigen Ihren aStore jedoch möglicherweise nicht richtig an, da sie nicht "glauben", dass der Store auf einem sicheren Server gehostet wird. Dies ist hier besonders wichtig, weil wir Ihre potenziellen Kunden beim Einkauf nicht paranoid machen wollen.

Also, als erstes… Ändern Sie das http: // in Ihrem Code in http s: //

Passen Sie die Abmessungen der Anzeige an

Jetzt ändern wir die angezeigten Abmessungen Ihres aStore auf der Facebook-Seite.

Beachten Sie, dass die Breite auf 90% eingestellt ist? Das sind 90% dessen, was der Browser als aktuelle Seitengröße berechnet. Dies ist absolut ungenau… Wir geben die Breite als 815 Pixel an, damit sie in die iframe-App passt.

Ändern Sie width = "90%" in width = "815px".

Ich empfehle auch, die Höhe (deutlich) auf 1000 oder sogar 1200 Pixel zu verkürzen. Dadurch werden Ihre Inhalte etwas zurückhaltender…

Ändern Sie height = "4000" in height = "1200px".

Scrollen zulassen

Ihr aStore kann sehr lang werden (sogar länger als die ursprünglich angegebenen 4000 Pixel). Dies ist in der Regel der Fall, wenn die Produktbeschreibungen lang sind und mehrere Produktbewertungen veröffentlicht wurden. Standardmäßig ist das Scrollen deaktiviert… und der Inhalt wird über die angegebene Höhe hinaus abgeschnitten. Da wir Ihren aStore nicht einschränken möchten, aktivieren wir das Scrollen.

Ändern Sie scrolling = "no" in scrolling = "yes"

Ihr fertiger Code sollte jetzt ungefähr so aussehen:

Vergessen Sie nicht, auf die Schaltfläche "Speichern & Veröffentlichen" in der oberen rechten Ecke zu klicken. Sie können Ihre Arbeit auch jederzeit mit der nebenstehenden Schaltfläche "Vorschau" in der Vorschau anzeigen…

Pingelig, wählerisch…

OK, ich suche nicht… Wir haben Iframe-Code in einer Iframe-App. Ja, es ist überflüssig. Ja, es sollte behoben werden. Zur Vereinfachung der Verwendung in diesem Anfänger-Level-Guide werde ich es jedoch so lassen, wie es ist. Verurteile mich nicht.

Benutzerdefinierte Schaltfläche

Nachdem Ihre aStore-Integration abgeschlossen ist, möchten Sie dieses lästige kleine "Willkommen!" Schaltfläche auf der Titelseite, um ein wenig aussagekräftiger auszusehen, oder?

Kehren Sie zum "Frontend" Ihrer Facebook-Seite zurück.
Klicken Sie auf die kleine Schaltfläche (mit einem nach unten gerichteten Dreieck) rechts neben allen Seitenregistern.
Bewegen Sie beim Erweitern der Seite die Maus über das neue "Willkommen!" Tab.
Über der Registerkarte wird ein neues Symbol (Bleistift) angezeigt. Klicken Sie auf dieses Symbol, um ein neues Dropdown-Menü aufzurufen.

Klicken Sie im Dropdown-Menü auf "Einstellungen bearbeiten".
Ein Popup-Fenster wird angezeigt, in dem Sie den Namen der Registerkarte ändern und ein benutzerdefiniertes Bild hinzufügen können, das als Schaltfläche angezeigt wird.
Passen Sie die Registerkarte nach Ihren Wünschen an.