Über 9000: Unverständliche Schwierigkeiten beim Arbeiten mit Zählern für soziale Schaltflächen (+ Aufgabe)



    Eine der beliebtesten Funktionen der sozialen Schaltflächen "Teilen" ist ein Zähler für abgeschlossene Aktionen. Eine kleine Anzahl von Likes und Shares kann * über die "schlechte Qualität" des Materials sprechen; im Gegenteil, eine große Anzahl dient als eine Art sozialer Beweis und zwingt andere zum Teilen von Inhalten.

    In einer Situation mit großen Zahlen werden einzelne Leistungsindikatoren für jedes Schaltflächensymbol des sozialen Netzwerks relevant. Aber auch eine einfache Ausgabe eines solchen Zählers ist technisch und optisch nicht immer einfach zu organisieren. Einfach ausgedrückt:

    • der Zähler kann im ungünstigsten Moment abfallen;
    • Einige soziale Dienste stellen grundsätzlich keine Umbuchungsdaten zur Verfügung.
    • und andere sind nicht immer in der Lage, die korrekte Übertragung dieser Informationen sicherzustellen.


    Als Entwickler unseres eigenen Service für vorgefertigte soziale Schaltflächen in uSocial.pro wissen wir, dass mehr als die Hälfte der Benutzer ** sich für jede Schaltfläche einen eigenen Zähler gesetzt hat. Deshalb war es uns wichtig, dass die Zahlen auf den Zählern nicht plötzlich verschwinden oder lügen. Wir haben keine vorgefertigten Werkzeuge gefunden, um dieses Problem zu lösen. Wir mussten unsere eigenen entwickeln - wir werden heute darüber sprechen.

    1. Was kann mit Social Media Countern schief gehen?


    Es scheint einfacher zu sein, zu zeigen, wie viele Personen Inhalte geteilt, gemocht oder zu Ihren Favoriten hinzugefügt haben. Dazu müssen Sie nur die Liste der auf der Site installierten sozialen Schaltflächen analysieren und Anforderungen an die einzelnen Dienste senden und anschließend die Antwort auf hervorragende Weise anzeigen. Aber auch hier können eine Reihe von Problemen auftreten, für die es keine einfache vorgefertigte Lösung gibt.

    1.1 Es gibt einfach keine Zahlen


    Erstens gibt es möglicherweise überhaupt keine Zähler für Schaltflächen in einem bestimmten sozialen Netzwerk - gemäß der Entscheidung des sozialen Netzwerks. Beispielsweise gibt Twitter keine "kommentierten" Daten auf seinen Schaltflächen weiter. Infolgedessen konnte man bei verschiedenen Drucktastendiensten ein Bild beobachten, in dem für alle sozialen Tasten Zahlen vorhanden waren, für Tweets jedoch keine:



    Es sieht seltsam aus.

    1.2 "Sie fielen ab"


    Soziale Netzwerke sind stolz auf ihre hohe Verfügbarkeit, aber es ist klar, dass die Server, die für den Betrieb bestimmter Dienste verantwortlich sind, regelmäßig "ausfallen" können. Daher kann es zu einem unangenehmen Moment kommen, wenn die Werte für mehrere Schaltflächen nicht rechtzeitig geladen werden. In Bezug auf die Wahrnehmung - wieder nicht gut.

    1.3 "Meine Augen"


    Also hat jemand über 9000 Reposts in allen möglichen Feeds erhalten. Diese Informationen auf den Zählern sollten genau, verständlich und schön sein. Aber wenn die Zahlen groß sind, müssen sie reduziert werden - und diese Reduzierungen können sehr seltsam aussehen.

    Zum Beispiel ist das soziale Netzwerk G +, dessen Repost-Werte 9999 überschreiten und mit> 9999 abgekürzt werden:



    Googles größter russischer Konkurrent ist in solchen Situationen übrigens auch nicht immer ohne Sünde. Zum Beispiel kann er 496 Buchstaben auf 99+ reduzieren. Die Bedeutung ist unverständlich: Die Informationen sind falsch und wurden mit denselben drei Zeichen angezeigt.



    2. Wie wir diese Probleme gelöst haben


    In den Skripten und Entwürfen anderer konnten wir in fast keinem Fall eine „magische Pille“ finden. Ich musste alleine arbeiten. Sie beschlossen, mit der Hauptsache zu beginnen - dem Mangel an Daten über die Anzahl der Freigaben für einige beliebte soziale Netzwerke.

    2.1 Freigaben für Twitter und LJ, die zuvor nicht vorhanden waren


    Wenn eine bestimmte Ressource keine Statistiken nach Freigabe speichert oder keine Daten über eine API (wie LiveJournal) zur Verfügung stellt, speichern wir diese Informationen zu Hause.

    Zu diesem Zweck wird MySQL mit einer gemeinsamen Tabelle verwendet, in der der URL-Hash und die Anzahl der Freigaben auf Twitter und LiveJournal gespeichert sind. Unter allen Arbeitsbedingungen erhöht sich dieser Betrag einfach um eins (in Schritten).

    Darüber hinaus verfügt die Datenbank über separate Tabellen für jedes soziale Netzwerk, in denen die Korrespondenz zwischen URL-Hash und Benutzern gespeichert ist, die Inhalte gemeinsam nutzen. Um die Leistung zu optimieren und keine zusätzlichen Überprüfungen durchzuführen, haben diese Tabellen einen eindeutigen Index für zwei Spalten - einen Hash einer URL und eine Benutzer-ID. Dies ermöglicht es unter anderem, von ein und demselben Benutzer vor Betrug geschützt zu werden.

    // Пытаемся создать запись о шаре
    try {
        $shareInsert = $share->insert([
            'url' => $urlHash,
            'usocial_user' => isset($content->usocialUser) ? $content->usocialUser : ""
        ]);
    } catch (QueryException $e) {
        // Ловим все ошибки, кроме ошибки, когда индекс по url и usocial_user не уникальный, т.е. данный пользователь
        // уже кликал на данной странице по данной шаре.
        if ($e->getCode() !== '23000') {
            throw $e;
        }
    }
    // Увеличиваем общее значение счетчика
    if (isset($shareInsert) && $shareInsert) {
        $curUrlShares = SharesCount::where('url', '=', $urlMd5);
        // По данному URL шар не было, создаем запись
        if ($curUrlShares->count() === 0) {
            DB::table('shares_count')->insert([
                'url' => $urlHash,
                'url_original' => $url,
                $content->provider => 1
            ]);
        }
        // По данному URL шары были, увеличиваем значение счетчика
        else {
            $curUrlShares->increment($content->provider);
        }
    }
    


    In uSocial erstellen Benutzer selbst eine Reihe von "Gefällt mir" - und "Teilen" -Schaltflächen für ihre Websites, von denen einige möglicherweise keine Twitter- und LiveJournal-Schaltflächen enthalten. In diesem Fall laden wir Informationen nur in die notwendigen sozialen Netzwerke.

    Um die Download-Geschwindigkeit zu erhöhen, werden beim Anzeigen einer Leiste mit Schaltflächen auf der Site Informationen aus dem Cache und nicht aus der Datenbank angezeigt. Dies wirkt sich sehr positiv auf die Leistung aus.

    2.2 Was tun, wenn nichts getan werden kann?


    Aber das Teilen in Twi und LJ erwies sich im Vergleich zu Pocket als Saatgut. Die Entwickler geben Daten nur bei der Installation ihres Widgets auf der Website weiter. Gleichzeitig wird dem Rahmen (!) Aufmerksamkeit geschenkt, auch seine Schöpfer sind sich der Qualität der Arbeit nicht sicher. Hier ist ihre eigene Beschreibung:



    Wir haben begonnen, über den Zugang zur API zu verhandeln - aber die Jungs auf der anderen Seite verschwanden nach jeder Antwort für einen Monat. Was zu tun ist?

    Sie fanden heraus, dass der japanische begeisterte Entwickler unter dem Spitznamen ktty1220 eine Methode zum Empfangen von Daten von Pocket mit Yahoo Query implementiert hat - es funktioniert wirklich, aber seine Zuverlässigkeit unter einer ernsthaften Belastung ist immer noch unklar. Wir haben also immer noch nur Pocket in den Sets der "Gefällt



    mir " -Tasten: Und wir werden das Problem mit dem Teilen immer noch lösen. Die Jungs von Pocket haben sich im August nochmal gemeldet.

    2.3 Jeder hat 0 und Facebook hat 100.500 ...



    Darstellungsprobleme können durch populärere und bekanntere soziale Dienste verursacht werden. Beispielsweise kann ein Facebook-Cache-Fehler auftreten.



    Die Seite wurde 0 Mal geteilt, und dies wird von allen Zählern angezeigt, mit Ausnahme von Facebook, das den Wert von der Hauptseite zwischengespeichert hat.

    Woher kommt 20? Es stellte sich heraus, dass der Websiteadministrator eine Seite besuchte, die für Gäste mit Schaltflächen in sozialen Netzwerken geschlossen wurde. Eine Anfrage wurde an Facebook gesendet, das soziale Netzwerk erhielt jedoch keine Antwort auf die Verfügbarkeit der Seite und schrieb die Anzahl der Umleitungen von der Hauptseite der Website in den Cache (umgeleitet).

    In der Folge wird dieser Cache sehr lange nicht aktualisiert - hier hilft nur das Zurücksetzen des Caches durch den Facebook-Debugger. Ein ähnliches Problem kann bei VK auftreten. Um den Benutzern das Debuggen zu erleichtern, haben wir schließlich einen Debugger veröffentlicht für zwei soziale Netzwerke gleichzeitig.

    2.4 Kampf gegen gefallene soziale Netzwerke


    Da die Indikatoren der meisten Zähler in keiner Weise von unserem Handeln abhängen, sondern anhand von Antworten aus sozialen Netzwerken gebildet werden, laden wir alle Zähler asynchron. Über diesen Link können Sie übrigens Anforderungsformate für den Empfang von Anteilen der beliebtesten sozialen Netzwerke anzeigen.

    Wenn wir keine Antwort vom Server erhalten - was passiert, wenn die Vkontakte und My World abstürzen, wird 0 als Wert angegeben, und während der Benutzer auf eine Antwort wartet, wird der Counter Preloader angezeigt.



    2.5 Lösen des Problems der Kurvenzählung und des Designs von nativen Zählern


    Wie aus dem Beispiel mit G + hervorgeht, sehen nicht immer Standardlösungen für soziale Dienste attraktiv aus und sind für die Benutzer nur verständlich. Um das Erscheinungsbild der Zähler auf einen einheitlichen Standard zu bringen, haben wir begonnen, die Anzeige der Abkürzungen zu optimieren.

    Wenn eine Menge Leute Material teilen und die Zahl auf der Theke für über 9000 von der Skala abweicht, ist es besser, sie für die Schönheit zu reduzieren.

    So machen wir es von außen:



    Und so - technisch . Zunächst prüfen wir, ob es überhaupt einen gemeinsamen Zähler gibt. Wenn dies der Fall ist, werden die von den sozialen Netzwerken empfangenen Antworten in dem dynamisch erstellten Objekt aufgezeichnet. arrSocCounter[id][iconName]Dabei arrSocCounterhandelt es sich um das Objekt. Die ID ist die URL der von uns freigegebenen Seite und der iconNameName des sozialen Netzwerks (der Name des Symbols).

    Parameter verwendendata-urles stellt sich die notwendige Menge heraus, und indem data-itemwir herausfinden, welche sozialen Netzwerke noch da sind. Anschließend durchläuft der Zyklus die Symbole der sozialen Netzwerke und fasst die gewünschten Werte des zuvor empfangenen Objekts zusammen arrSocCounter[dataUrl][dataItem].

    Und hier kommen wir zum Schneiden großer Stückzahlen. Bevor Sie das Ergebnis zum Zähler hinzufügen, müssen Sie es in ein verständliches Systemformat übersetzen - serialisieren. Dann zählen wir die Anzahl der Elemente in der Reihe, um zu verstehen, ob es sich um eine Million, tausend oder ein Dutzend Shers handelt. Es macht keinen Sinn zu überprüfen, ob die Antwort eine Ganzzahl oder eine Dezimalzahl war (20,5 Personen können den Artikel nicht teilen), sodass wir sofort mit dem Zählen der Zeichen in der Zeichenfolge fortfahren können.

    Wenn die Zahl im Bereich von 4 bis einschließlich 6 Zeichen liegt, wird der Wert in einen Gleitkommawert umgewandelt und auf eine Dezimalstelle gerundet:parseFloat(value / 1000).toFixed(1). Im Prinzip könnten wir damit aufhören, aber dann wäre der Wert ungenau - das passt uns nicht, also konvertieren wir den Wert in einen String und schneiden die letzten beiden Zeichen ab, zum Beispiel 1001:

    var val;
    val = parseFloat(1001 / 1000).toFixed(1);
    console.log(val)
    


    Nach Abschluss dieser Schritte erhalten wir eine Gleitkommazahl von 1,0. Dann sollte es zurück in die Zeichenkette "überholt" und die letzten beiden Zeichen abgeschnitten werden, wobei der Buchstabe "K" zum Endergebnis hinzugefügt wird:

    var valOutput;
    valOutput = String(val).slice(val.lenght, -2) + 'k';
    console.log(valOutput);
    var val,valOutput;
    val = parseFloat(1001 / 1000).toFixed(1);
    valOutput = String(val).slice(val.lenght, -2) + 'k';
    console.log(valOutput);
    

    Fazit und ungelöstes Problem


    Sogar eine solche Aufgabe, die auf den ersten Blick nicht sehr schwierig ist, wie die Schaffung eines hochwertigen Dienstes für soziale Knöpfe, ist mit bestimmten Schwierigkeiten verbunden. Und es gibt ein Problem, das wir nicht schön lösen konnten.

    http = / = https

    Ein interessanter und nicht offensichtlicher Punkt - oft nehmen soziale Netzwerke und ihre APIs die Anzahl der Freigaben für Websites mit http und https unterschiedlich wahr. Das heißt, sie glauben, dass sich zwei verschiedene Websites vor ihnen befinden - und wenn der Eigentümer der Ressource früher zu https gewechselt ist, musste er sich mental darauf vorbereiten, dass die Menge an Teilen für alle seine früheren Materialien verloren gehen würde.

    Bisher haben wir eine Krückenlösung gefunden: Fügen Sie data-url = " site.com " hinzu und übergeben Sie den URL-Parameter ohne http - wenn Sie die Indikatoren wirklich speichern möchten.

    Aber vielleicht hat die Community Ideen für eine schönere Lösung.

    ***



    Das ist alles, danke für Ihre Aufmerksamkeit, und wir beantworten gerne Fragen und diskutieren das Problem von http / https-Kommentaren. Und das nächste Mal werden wir über einen weiteren Hack sprechen - über das Teilen von Schaltflächen für Instant Messenger und andere interessante Schaltflächen wie "Lesezeichen".

    * Nielsen-Studie zur Rolle der Anzahl von Likes und Shares bei der Wahrnehmung von Artikeln.

    ** Statistiken zur Installation von "Share" -Sets mit individuellen Zählern für jedes Symbol.

    Jetzt auch beliebt: