Wo kann der Code zum Teilen von Social-Media-Buttons installiert werden? Eigene Social-Buttons. Jede Social-Media-Schaltfläche einzeln hinzufügen

Beißt nicht? Und sie haben bereits viel Geld für die Verpflegung der Besucher ausgegeben. Und die Knöpfe soziale Netzwerke für die Seite installiert? Es ist klar! Alle Symptome der Krankheit sind offensichtlich – die Seite ist asozial. Wir werden behandeln.

Warum braucht eine Website Social-Media-Buttons?

Das Vorhandensein von Social Buttons auf Webseiten ist nicht nur ein obligatorisches Attribut oder ein modisches Accessoire. Erstens helfen Social Buttons dem Ressourceneigentümer, Geld bei der Website-Werbung zu sparen. In diesem Fall erfolgt die Werbung mit Hilfe von Besuchern. Und der Eigentümer kann seine Website nur mit hochwertigen Inhalten füllen und auf den Zustrom neuer Benutzer warten:

Diese Schaltflächen werden jedoch nicht nur von Websitebesitzern benötigt. Ihre Platzierung ist auch für die sozialen Netzwerke selbst wichtig. Bei jedem dieser Buttons handelt es sich um einen Link, der zu einem sozialen Portal führt. Und dank dieses Linkaustauschs bleibt eine hohe Nutzeraktivität innerhalb der sozialen Netzwerke selbst erhalten. Aus diesem Grund stellen beliebte soziale Netzwerke den Websites vorgefertigte Codes für ihre Schaltflächen zur Verfügung.

Was ist ein normaler Social-Button?

Nehmen wir zum Beispiel das Skript für den sozialen Button VKontakte. Ihr Code:

Dieser Teil des Codes muss im sogenannten „Header“ der Site-Seite platziert werden. Dieser Code gibt die Adresse des Skripts an, das ausgeführt werden soll, wenn auf den Social-Button geklickt wird. Hier ist der zweite Teil des Codes, der für die Anzeige des Schaltflächenbildes verantwortlich ist:

Der zweite Codeabschnitt muss in dem Teil der Seite platziert werden, in dem die Schaltfläche angezeigt wird:

Das Aussehen der Schaltfläche kann einfach angepasst werden. Dazu müssen Sie zu einem speziellen Abschnitt gehen technische Unterstützung auf einer Social-Networking-Site. Hier können Sie den Stil der Schaltfläche festlegen, nach dem ihr Code generiert wird.

Einfache Unterkunftsmöglichkeiten

Es gibt spezielle Dienste, mit denen Sie Schaltflächen für alle gängigen sozialen Netzwerke gleichzeitig auf Ihrer Website platzieren können. Dies ist viel einfacher, als für jedes einzelne Skript einzeln einzufügen. Schauen wir uns die beliebtesten dieser Dienste an:

Die Position der Social-Buttons-Leiste kann in mehreren Vorlagen ausgewählt werden. Die kostenlose Version des Kontos verfügt über eine ausziehbare Seitenleiste. Es gibt auch Freie Version Plugin für WordPress. Nach der Registrierung auf der Website des Dienstes erhalten Sie Zugriff auf Statistiken zu Klicks auf Social-Buttons.

• Share42 – klare und einfache Benutzeroberfläche mit der Möglichkeit zur Feinabstimmung Aussehen Social-Button-Panels. In diesem Fall wird der Einrichtungsvorgang begleitet Schritt für Schritt Anweisungen mit einer Beschreibung der durchzuführenden Maßnahmen. Daher ist der Dienst auch für unerfahrene Webmaster geeignet:

Ein weiteres Plus dieses Dienstes ist die Generierung eines Social-Button-Panel-Skripts mit Unterstützung für mehrere gängige CMS.

Social Buttons und WordPress

Für gängige CMS wurden viele Plugins für die Gruppeninstallation von Social Buttons erstellt. Schauen wir uns ein Beispiel für die Installation des Social Share Buttons für WordPress-Plugins an.

Die positiven Aspekte dieser Erweiterung sind die vollständig russischsprachige Benutzeroberfläche, die einfache Einrichtung und die „Zugeschnittenheit“ für beliebte soziale Netzwerke des Runet:

Vorgehensweise zur Installation des Social-Buttons-Plugins für WordPress.

1) Gehen Sie zum Verwaltungsbereich der Website. Wählen Sie links den Reiter „Plugins“, „Neu hinzufügen“.
2) Geben Sie auf der Seite „Plugins installieren“ den Namen der Erweiterung in das Suchfeld ein und klicken Sie auf die Schaltfläche „Plugins suchen“:

3) In den Suchergebnissen finden wir den Namen der gewünschten Erweiterung. Klicken Sie dann auf den Link „Installieren“:

4) Nach dem Herunterladen des Archivs und der Installation aktivieren Sie das Plugin, indem Sie auf den entsprechenden Link klicken:

5) Nach der Aktivierung wird die linke Werkzeugkonsole angezeigt Neuer Abschnitt„Teilen-Buttons“:

Die Plugin-Einstellungen bestehen aus mehreren Punkten:

Noch ein paar bewährte Plugins für WordPress:

• Feste Social-Buttons – mit diesem Plugin können Sie ein schwebendes Social-Panel zu Ihrer Website hinzufügen, das oben, unten oder an der Seite „festgeklebt“ werden kann;
• HTML-Social-Share-Buttons – Dieses Plugin enthält Social-Buttons, die ausschließlich mit erstellt wurden mit CSS und HTML.

Social Buttons und Joomla

Für diese Engine wurden auch viele Plugins erstellt, um mit Social Buttons zu arbeiten. Schauen wir uns den Installationsprozess der Erweiterung am Beispiel von SocButtons an. Funktionen dieses Plugins:

• Unterstützt alle gängigen Engine-Versionen;
• Einfach einzurichten;
• Die Aussehenseigenschaften werden für jede Schaltfläche separat festgelegt.
• Leichtes Installationspaket.

Verfahren:

1) Gehen Sie zum administrativen Teil der Joomla-Site und wählen Sie das Symbol „Erweiterungsmanager“.
2) Hier bestimmen wir die Quelle für den Download der Erweiterung:

3) Gehen Sie nach der Installation der Erweiterung zum „Plugin-Manager“ und aktivieren Sie sie einfach installierte Erweiterung. Klicken Sie dazu oben auf der Seite auf das grüne Symbol:

4) Klicken Sie zum Konfigurieren auf den Erweiterungsnamen in der Liste. In diesem Plugin werden die Anzeigeeinstellungen für jeden Social-Button separat festgelegt:

Noch ein paar bewährte Erweiterungen für Joomla:

• Social Bookmarking – dieses Plugin gibt es in mehreren Versionen. Mit jedem können Sie das Social Panel in einer bestimmten Position platzieren (horizontal, vertikal oder sogar schwebend);
• JL Like – dieses Plugin lädt keine zusätzlichen externen Skripte und ermöglicht es Ihnen, Statistiken über Stimmen aus sozialen Netzwerken zu führen.

Skript oder Plugin?

Die Installation des Plugins ist die einfachste und schnellste Option. Meistens funktioniert die gesamte Site nach der Installation ordnungsgemäß. Aber alles kann sofort zusammenbrechen, nachdem die Engine-Version auf eine neuere aktualisiert wurde.

Aufgrund von Nichtübereinstimmungen zwischen der Engine- und der Plugin-Version kann es zu Problemen beim Betrieb der Website kommen. Meistens sind sie mit der falschen Darstellung von Designelementen verbunden. In unserem Fall handelt es sich um Schaltflächen sozialer Netzwerke. Dann kommt die Erkenntnis, dass es manchmal besser ist, ein nacktes Skript anstelle eines speziellen Plugins zu verwenden.

IN neue Version In einer PHP-Engine ändert sich die Struktur von Methoden und Funktionen nur sehr selten. Daher „überträgt“ das Skript den Vorgang eines solchen Updates problemlos.

Den Code für Social Buttons erhalten Sie bei einem der spezialisierten Dienste. Ihr Überblick ist oben dargestellt. Nehmen wir zum Beispiel den Dienst Share42. Es unterstützt die Erstellung sozialer Schaltflächen für beliebte Suchmaschinen. Verfahren.

Wenn Sie befürchten, im Internet beobachtet zu werden, schalten Sie Ihren Computer aus.

Jeder Webmaster denkt früher oder später darüber nach, Social Buttons auf seiner Website zu installieren. Schließlich können sich manche Menschen ein Leben ohne soziale Netzwerke nicht mehr vorstellen. Warum sollten Sie ihnen die Möglichkeit entziehen, Ihre Artikel zu teilen? Aber mit der Zeit verlieren viele Social-Button-Dienste den Verstand und machen mit ihren Codes, was sie wollen, und stopfen alles hinein, was nicht benötigt wird. Aufgrund dieser paranoiden Idee finden Sie in diesem Artikel Codes für die saubersten Schaltflächen zum Teilen in sozialen Netzwerken für Ihre Website.

Es ist kein Geheimnis, dass fast alle Social-Button-Dienste bei Bedarf Informationen über Ihre Benutzer preisgeben. Oh Gott! Kann nicht sein! Ich habe gerade davon erfahren! - Glückwunsch! Sie müssen dich irgendwie für ihre Arbeit und ihre Bemühungen nutzen. Sie taten gute Leistungen, mit großer Funktionalität, Komfort und „Qualität“. Sie müssen lediglich auswählen, was Sie benötigen, und den Code dort platzieren, wo Sie ihn benötigen. Und alle. Und welchen Vorteil haben sie, solche Manöver kostenlos im Internet durchzuführen? Rechts. NEIN. Daher ist jedes dieser Büros von Zeit zu Zeit damit beschäftigt, Daten in irgendeinem DMP abzulegen.

Ich werde nicht jeden dieser Dienste beschreiben; sie verfügen alle über eine gute Funktionalität und einige einzigartige Merkmale, aber ich habe keine Lust, sie einzeln vorzustellen. Nachfolgend habe ich eine kurze Liste zusammengestellt.

Liste der beliebtesten Social-Button-Dienste für die Website

• share.pluso.ru
• uptolike.ru
• tech.yandex.ru/share
• share42.com
• sharethis.com
• pip.qip.ru
• www.addtoany.com
• www.po.st
• www.addthis.com
• sharebuttons.com

Wenn Sie nicht genug Zeit haben oder zu faul sind, mehr als ein paar Bewegungen der Hände und Fingerglieder auszuführen, können Sie diese Dienste bedenkenlos in Anspruch nehmen. Sie eignen sich sowohl für Websites als auch für Besucher. Aber niemand garantiert 100 % Sicherheit der Benutzerdaten, 100 % Funktionsfähigkeit seines DNS und Laden Ihrer Websites. Diese. Wenn auf den Social-Button-Servern ein Fehler auftritt, werden Ihre Websites langsamer als gewöhnlich geladen. Ja, das passiert selten, aber es kommt vor. Natürlich können Sie das asynchrone Laden dieser Skripte installieren und ihre Arbeit optimieren, aber das sind mehr als nur ein paar Schritte, über die ich für die Faulen geschrieben habe.

Natürlich gibt es im Internet Social-Media-Codes, die auf Ihrer Website platziert werden und nirgendwo Informationen preisgeben, aber viele von ihnen enthalten externe Links zu denselben sozialen Netzwerken. Webmaster mögen das nicht Externe Links und deshalb habe ich für die paranoidesten Webmaster vorgefertigte Codes basierend auf dem Goodshare.ru-Skript gesammelt, wofür ich ihnen wirklich danke.

Ein Beispiel für die Installation dieses Codes ist nichts für diejenigen, die die Grundlagen von HTML oder CSS nicht kennen, aber wenn Sie die Hände und ein wenig Zeit haben, werden Sie Erfolg haben, wenn Sie die Anweisungen genau befolgen. Und so gingen wir:

Sie sehen so aus:

Sechs soziale Netzwerke sind nach dem Standard konfiguriert: Facebook, VKontakte, Odnoklassniki, Moi Mir, Google Plus, Twitter. In den Skripteinstellungen gibt es mehr als 30 davon, aber alle können auf Wunsch auch separat installiert werden. Die von den Autoren genannten Vorteile dieser Schaltflächen, denen ich voll und ganz zustimme:

Tolle Anzeige auf jedem Gerät (Ja, sie passen sich an jede Bildschirmgröße an)

Sauberer Code – schnelle und sichere Seite (es werden nur das Skript, CSS und die Schriftart geladen, die sich nur auf Ihrem Server befinden)

Alle gemeinsamen Technologien mobiler Messenger in einem Skript (alle Arten von Telegrammen)

SEO-freundlich – keine Links

Enthält keine Bilder

Was macht das Skript selbst und warum wurde dieses Skript überhaupt benötigt? Das Skript dieser Schaltflächen enthält alle APIs von allen soziale Netzwerke, und das Skript macht jeden Ort auf der Website zu einem aktiven Freigabeblock.

Sie können es beispielsweise auf leeren DIV-Blöcken oder Span oder Bildern oder leeren Links platzieren und fast jedes Element der Site kann in diese Schaltflächen umgewandelt werden. In meinem Beispiel habe ich ein Skript für leere Divs verwendet.

Zu den Bildern: Sie sind nicht hier. Die Symbole, die Sie sehen, stammen aus der Schriftart, sie sind nur ein Symbol und nichts weiter.

Sie können das Archiv der Schaltflächen unter herunterladen.

Die Installation dieser Tasten ist sehr einfach. Es gibt nur vier Dateien im Archiv: Schriftart, CSS, JS und TXT.

1). Sie müssen die Schriftart in einen beliebigen Ordner auf Ihrem Server hochladen; Sie können sie am selben Ort wie Ihr JS oder CSS ablegen.

2). Laden Sie dann den JS auf Ihren Server hoch und zeigen Sie ihn mithilfe von Code an einer beliebigen Stelle auf Ihrer Website an. Ich empfehle jedoch ganz unten auf der Seite:

Dieses Skript besteht aus zwei Teilen: Der erste ist Jquery, der zweite ist der Schaltflächencode selbst. Wenn Sie Jquery auf Ihrer Site bereits aktiviert haben, können Sie den ersten Teil des Codes entfernen und dadurch die Dateigröße reduzieren.

WICHTIG: (für diejenigen, die einen Teil des JQuery-Codes entfernt haben) Das Schaltflächenskript muss nach dem JQuery-Skript geladen werden.

3). Nach der Installation von JS und Schriftart sollten Sie CSS zu Ihrer Site hinzufügen. Kopieren Sie einfach den gesamten Inhalt der soc.css-Datei in eines Ihrer CSS-Plugins auf der Website.

WICHTIG: Ändern Sie in Zeile 82 der Datei soc.css die URL in den Speicherort Ihrer Schriftart!

4). Kopieren Sie anschließend den HTML-Code aus der HTML.TXT-Datei auf Ihre Website, auf der Sie diese wunderbaren Schaltflächen sehen möchten.

Die Struktur des Skripts bietet die Möglichkeit, Zähler für das Teilen in sozialen Netzwerken zu installieren. Weitere Informationen finden Sie jedoch in der entsprechenden Dokumentation auf der Website.

Und Sie können die Funktionsweise des Skripts direkt unter diesen Zeilen überprüfen, da es sich um das Skript handelt, das auf meinem Blog installiert ist.

Vielen Dank für Ihre Aufmerksamkeit. Wenn Sie Fragen zur Installation haben, schreiben Sie Kommentare.

Ich war bei dir, fauler Staurus.

Einer davon ist geringe Flexibilität und begrenzte Auswahl. Standardeinstellungen. Nehmen wir zum Beispiel den Block, in letzter Zeit wird aus irgendeinem Grund die integrierte Metrica zusammen mit den Social-Buttons geladen... Auch hier ist das Ändern der Größe oder Farbe der Buttons ziemlich problematisch.

Mit der Zeit werden beliebte Lösungen immer beliebter zusätzliche Funktionen, die nicht nur die Größe der geladenen Skripte erhöhen, sondern auch Schadcode enthalten können.

Nach Gebrauch Verschiedene Optionen Ich bin zu dem Schluss gekommen, dass meine eigene Lösung viel besser ist und werde Ihnen heute davon erzählen. Aber zuerst empfehle ich Ihnen, die Anweisungen zur Installation der Schriftart zu lesen – sie wird im Beispiel verwendet.

Online-Demo und Quellen dieses Beispiel Sie finden es am Ende des Artikels, und nun fahren wir der Reihe nach mit der Implementierung fort. Stellen Sie zunächst sicher, dass die Site jQuery verwendet. Andernfalls aktivieren Sie es. In WordPress geschieht dies am besten über die Datei „functions.php“:

Funktion my_jquery () ( wp_enqueue_script("jquery" ); ) add_action("wp_enqueue_scripts" , "my_jquery" );

Dann schließen Sie Font Awesome an – wir verwenden Vektor-Social-Media-Symbole anstelle von Bildern. Jetzt müssen Sie die HTML-Basis der Schaltflächen in den Vorlagencode einfügen:

Gefallen? Teile mit deinen Freunden!