Ich habe derzeit eine vertikale Social-Share-Plugin-Leiste implementiert, die der hier gezeigten ähnlich ist.
Ich habe den gleichen Code verwendet, der für die Like-Schaltfläche von Facebook generiert wurde. Ich verwende den erzeugten HTML5-Code. Wenn Sie den Chrome-Browser verwenden, verschiebt sich die Facebook-ähnliche Schaltfläche leicht von der Position, wenn die Zurück-Taste gedrückt wird. Ich bin nicht sicher, was das verursacht und wie man es löst.
Benutzter Code für den Facebook-Like-Button:
%Vor% Wenn ich Ihre Quelle anschaue, sehe ich, dass Sie Tabellen verwenden (das könnte ein potenzielles Problem sein). Bei einer normalen Seitenauslastung werden die span Breite und Höhe festgelegt. Nachdem Sie auf den Zurück-Knopf geklickt haben, werden diese Eigenschaften nicht gesetzt (diese werden automatisch berechnet). In normalen Situationen wird das funktionieren, aber ich denke, die Daten werden nicht aktualisiert / neu geladen, wenn Sie den Zurück-Knopf drücken und so die Breite und Höhe wird nicht neu berechnet. Sie könnten versuchen, data-width="122" data-height="20" zu setzen.
z. <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-width="81" data-height="20" data-show-faces="true" data-share="true"></div>
oder erzwingen durch CSS:
%Vor%Lesen Sie auch folgenden Artikel: Ajax, Zurück-Button und DOM-Updates
Bearbeiten: Nach einigen Recherchen ist ein anderer möglicher Grund, warum dies passiert, mit dem Cache von WebKit-Browsern verbunden (seltsam, weil es auf meinem iPhone funktioniert). Die Lösung, die sie bereitstellen, besteht darin, die Funktion onunload zu deaktivieren:
Siehe Das Problem mit der Safari-Zurück-Schaltfläche
Wahrscheinlich behoben : Nach eingehenderer Untersuchung habe ich festgestellt, dass Chrome in der Konsole einen Fehler meldet: fb:like failed to resize in 45s .
Der folgende Code wäre ein temporärer Fix ( fb: login_button konnte die Größe nicht ändern 45s ):
%Vor%Auch hier bin ich mir nicht sicher
Ja, das scheint ein lang-dokumentiertes Problem zu sein (gilt für andere Plugins wie Login) die Facebook nicht in der Lage war für die Like-Schaltfläche .
Eine in den Dev-Foren vorgeschlagene Lösung ist eine sehr vernünftige: setze data-show-faces="false" , tut aber nichts für mich.
Anscheinend
Wenn der Fehler ausgelöst wird, kann fb js dem iframe (.fb_iframe_widget_lift) keine Breite / Höhe zuweisen. Als Ergebnis hat der Iframe eine automatische Breite / Höhe von 300px / 1000px.
Im Idealfall wäre das ein einfacher Bug, den wir packen könnten, wie wir es geben könnten der iframe a min / max Breite / Höhe. Allerdings seit alle Like-Taste Klicks zeigen das Post-Kommentar-Modal, diese Lösung ist weniger praktikabel. Im Der Fall des Layout-Teils box_count des Modals wird angezeigt über der Schaltfläche, daher die Einschränkung der Iframe-Größe sieht extra aus janky.
Ich weiß nicht, wie man PHP benutzt (und es ist auf der Seite blockiert, die ich gerade bearbeite), aber falls es anderen helfen kann, ist hier der letzte Kommentar (gestern gepostet)
%Vor%Verwenden Sie die iframe-Version des Codes, die Sie hier erhalten können: Ссылка Sie brauchen das Javascript SDK wurde ebenfalls geladen.
Auf der übergeordneten Seite müssen Sie PHP zum Erfassen und Speichern in einer Sitzungsvariable die vollständige URL der übergeordneten Seite:
%Vor%Dann machen Sie den Code, um die Schaltfläche (n) im iframe wie folgt anzuzeigen:
Ändern Sie "your-app-id-goes-here" in Ihre eigene appID.
Dies funktioniert, weil der iframe-Code von Facebook jetzt in Ihrem enthalten ist Iframe, und hat daher keine andere Wahl als zu passen und zu bleiben wo es hingehört ...
Es gibt Namen wie Nike im Entwickler-Forum und es wird immer noch aktualisiert, so dass hoffentlich weitere Lösungen auf dem Weg sind - ich dachte nur, ich würde Links und die neuesten verfügbaren Informationen hier bereitstellen.
Tags und Links html5 google-chrome facebook facebook-like facebook-social-plugins