Generiertes Bild aus Canvas auf Facebook teilen

Hallo zusammen,

Ich habe eine neue Frage, nach dem ich derzeit mit der Weiterleitung meies Designten Artikels im eigens programmierten Artikelkonfigurator keine Ergebnisse erzielen konnte,
habe ich nun beschlossen, mich der implementierung von Facebook zu widmen.

nun stelltr sich die Frage, ob und wie es möglich ist, ein in Canvas Konfiguriertes Produkt als Bild auszugeben und mit einer kleinen Nachricht in Facebook zu teilen.

Die ausgabe als Bild habe ich bereits hinbekommen und jetzt möchte ich dem User die Möglichkeit geben, das designte Produkt auf Facebook zu Posten. Wie mache ich das, ohne eine Applikation auf Facebook selbst.

Ich freue mich sehr auf eure Hilfe und bedanke mich wie Immer schonmal im Voraus für eure Bemühungen :smiley:

Das Bild muss eine URL haben, damit man es teilen kann. Hat es eine?

Hallo Webdesigner_AT,

wie vanilla thunder bereits geschrieben hat, muss das Bild eine URL haben. Dazu musst du das Bild aber nicht unbedingt physikalisch auf dem Server ablegen.

Du könntest dir ein PHP-Script programmieren und diesem als Parameter die DataURL (http://simeonvisser.hubpages.com/hub/HTML5-Tutorial-How-To-Use-Canvas-toDataURL) des Canvas mitgeben.

Dein PHP-Script echoed diesen Base64-String einfach und sendet als Header dann den MIME-Type des Bildes.
Beispiel: Embedding Base64 Image Data into a Webpage

Somit kannst du Facebook dann die URL übergeben und Facebook bekommt ein Bild von deinem Script zurück.

@Kai Neuwerth

Vielen dank für die sehr hilfreiche Antwort :smiley:
hat geklappt und ich bin zufrieden mit dem Ergebnis :smiley:

[QUOTE=Webdesigner_AT;125097]@Kai Neuwerth

Vielen dank für die sehr hilfreiche Antwort :smiley:
hat geklappt und ich bin zufrieden mit dem Ergebnis :D[/QUOTE]

Super, das freut mich! :slight_smile:

ich muss leider nochmals was fragen.

wenn ich im Metatag einen fixen Pfad angebe bekomme ich das Bild angezeigt das ich haben möchte, wenn ich nun aber den Pfad generieren lasse und mit javascript einfüge, bekomme ich keine Bilder angezeigt. wie kann ich das umsetzen, dass er mir das Bild übernimmt ?

Ich denke mal nicht, dass Facebook auch eine JS-Engine hat, wenn Links gefetched werden. Deshalb wird es mit JS nicht funktionieren.
Den Pfad musst du wohl schon vorher generieren…

das ganze lauft ja so, dass der User einen Artikel gestaltet und ihn dann in Den Warenkorb legen kann. bevor er aber in den Warenkorb kommt soll der User noch die möglichkeit besitzen, dass er seinen Freunden auf Facebook mitteilen kann was er Kreirt hat. nun clickt er dazu auf einen Button, der den Meta-Tag mit daten befüllen und dementsprechend dann auch in Facebook posten soll. Ich kann ja kein Bild generieren, wenn ich nichteinmal etwas designt habe… :wink:

Okay dann musst du es so machen, dass du die Bild-URL nicht in das Meta-Element schreibst, sondern dies direkt mit an den Sharer übergibst.
Als Parameter an den Sharer einfach &[images][0]=<URL_ENCODED_PATH_TO_IMAGE> mitgeben. Hier ein beispiel: http://www.daddydesign.com/wordpress/how-to-create-a-custom-facebook-share-button-for-your-iframe-tab/

okay :smiley: funktioniert super:D vielen lieben dank

Über einen Keks würde ich mich wirklich sehr freuen! :slight_smile:

entschuldige aber … über was ?? :confused: :smiley:

kennst du zufällig auch eine Möglichkeit, wie du den Share-button komplett umgestalten kannst? oder ist das nicht möglich ?

Kennst du zufällig Google?

[QUOTE=Webdesigner_AT;126033]entschuldige aber … über was ?? :confused: :D[/QUOTE]

Einen KEKS!

[QUOTE=Webdesigner_AT;126034]kennst du zufällig auch eine Möglichkeit, wie du den Share-button komplett umgestalten kannst? oder ist das nicht möglich ?[/QUOTE]

Das kann doch ein stinknormaler Link auf die sharer.php von FB sein… Den kannst du doch stylen, wie du willst :confused:

:rolleyes: ja habs dann auch rausgefunden sorry … xD -.- ich hab nicht überlegt …

[QUOTE=Webdesigner_AT;126045]:rolleyes: ja habs dann auch rausgefunden sorry … xD -.- ich hab nicht überlegt …[/QUOTE]

Okay und wo ist nun mein Keks? xDlolr0flk1d

hier ist dein Keks :smiley: