Social-Media-Zähler. Social-Media-Buttons

Hallo liebe Leser der Blogseite. Sie können für diese Aufgabe natürlich ein Plugin verwenden, aber es ist nicht so schwer, es selbst zu machen, und es werden weniger werden, zumal ich bereits viele davon habe, die für sie arbeiten (siehe den Artikel unter dem angegebenen Link). Ich habe die Social-Media-Icons entnommen, über die ich bereits ausführlich geschrieben habe (ich hoffe, dass Dimoks dem nicht widerspricht).

Und auch für E-Mail hielt ich es für angemessen.

Erstellen Sie ein Sprite aus Schaltflächen und fügen Sie den HTML-Code in die Site ein

Letztendlich erforderliche Gruppen und Sie haben Seiten in sozialen Netzwerken erstellt, was bedeutet, dass Sie alle notwendigen Links erhalten haben, können Sie durch das Hinzufügen von Schaltflächen auf der Website verwirrt sein. Du kannst natürlich gemäß meinem Beitrag etwa für jedes soziale Netzwerk ein passendes Icon auswählen und ggf. dessen Größe auf das erforderliche in und verkleinern.

Aber es ist nicht die beste Art... Warum? Nun, denn für das Hochladen jedes Bildes des sozialen Netzwerks wird eine separate Anfrage an Ihren Server gestellt. Wenn Sie ein Dutzend Symbole haben, bedeutet dies zehn Anfragen, die auf jeden Fall eine zusätzliche Belastung des Servers verursachen und. Solche Abfälle passen nicht zu uns, zumal sie schon lange her sind.

Ich beschloss, das Rad nicht neu zu erfinden (ein Sprite zu erstellen), sondern das vom Share42-Konstruktor erstellte zu verwenden (ein Link zu einer Beschreibung, wie man damit arbeitet, befindet sich oben). Darin können Sie die sozialen Netzwerke auswählen, deren Symbole Sie benötigen, und Sie erhalten zusammen mit dem Code ein CSS-Sprite, d. körperlich allein Grafikdatei, die alle benötigten Social-Media-Symbole und Abonnements enthält RSS-Feed(und E-Mail, falls erforderlich).

Ich habe vier Hauptnetzwerke und ein paar Symbole zum Abonnieren von Nachrichten mit einer Symbolgröße von 24 x 24 ausgewählt, also sieht mein Sprite so aus (obwohl ich noch dort angekommen bin, aber es spielt keine Rolle):

Jetzt haben wir alle Zutaten – Links zu Gruppen oder Social-Media-Seiten und Symbole, um sie auf der Website anzuzeigen. Es bleibt nur, dies alles richtig vorzubereiten, d.h. Layout. Mein Blog wird von WordPress unterstützt, daher füge ich den Code mit Schaltflächen in einen der ein. In meinem Fall heißt es sidebar.php. HTML Quelltext Es stellt sich als äußerst einfach heraus:

Nun, und das interessanteste. Mit Hilfe dessen legen wir fest, welcher Bereich unseres Sprites an dieser bestimmten Stelle als Hintergrund angezeigt wird (in unserem Fall wird dieser Hintergrund unter dem Hyperlink platziert). Es dauert sehr lange, zu erklären, wie dies geschieht, also lesen Sie den Artikel über den Link und alles wird klar (es gibt anschauliche Beispiele). Wenn Sie faul sind, experimentieren Sie einfach mit den Zahlen, die, wie Sie vielleicht bemerkt haben, nicht umsonst Vielfache von 24 sind.

Ja, laden Sie die Sprite-Datei per FTP auf Ihre Site hoch und geben Sie den Pfad dazu im Hintergrund an (). Das ist alles. Wenn es nicht klappt, lesen Sie die Materialien auf den obigen Links sorgfältig durch, na ja, wenn überhaupt nichts passiert, dann beschreiben Sie Ihre Situation in den Kommentaren (ausführlich - um den Code einzufügen, vergessen Sie ihn in PHP-Tags mit Quadrat einzuschließen Klammern).

Viel Erfolg! Bis bald auf den Seiten der Blog-Site

Sie können weitere Videos ansehen, indem Sie auf gehen

");">

Sie könnten interessiert sein

Blocklayout - Erstellen Sie zweispaltige, dreispaltige und flüssige Site-Layouts

Beißt es nicht? Und wir haben schon viel Geld für den Köder der Besucher ausgegeben. Und die Knöpfe soziale Netzwerke für die Website installiert? Klar! Alle Symptome der Krankheit im Gesicht - die Asozialität der Website. Wir werden behandeln.

Warum braucht eine Website Social-Media-Buttons?

Verfügbarkeit auf den Seiten der Website soziale Schaltflächen ist nicht nur ein Must-Have-Attribut oder ein modisches Accessoire. Zuallererst helfen Social-Buttons dem Ressourcenbesitzer, Geld bei der Website-Werbung zu sparen. In diesem Fall erfolgt die Promotion mit Hilfe von Besuchern. Und der Besitzer kann seine Website nur mit hochwertigen Inhalten füllen und auf den Zustrom neuer Benutzer warten:

Aber diese Schaltflächen sind nicht nur für Website-Besitzer. Ihre Platzierung ist auch für die sozialen Netzwerke selbst wichtig. Jeder dieser Buttons ist ein Link zu einem sozialen Portal. Und dank diesem Linkaustausch, hohes Niveau Nutzeraktivitäten innerhalb der sozialen Netzwerke selbst. 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 der Social-Media-Schaltfläche von 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 der Social-Button angeklickt wird. Hier ist der zweite Teil des Codes, der für die Anzeige des Schaltflächenbildes verantwortlich ist:

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

Das Aussehen der Schaltfläche kann leicht angepasst werden. Gehen Sie dazu in einen speziellen Abschnitt technischer Support auf einer Social-Networking-Site. Hier können Sie den Stil des Buttons einstellen, nach dem sein Code generiert wird.

Einfache Platzierungsoptionen

Es gibt spezielle Dienste, mit denen Sie auf Ihrer Website Schaltflächen für alle gängigen sozialen Netzwerke gleichzeitig platzieren können. Dies ist viel einfacher, als die Skripte für jeden von ihnen separat einzufügen. Betrachten wir den beliebtesten dieser Dienste:

• AddThis - dieser Dienst hat eine englischsprachige Benutzeroberfläche. Gleichzeitig ermöglicht es Ihnen jedoch, jedem sozialen Netzwerk der Welt eine Schaltfläche hinzuzufügen:

Sie können die Position der Social-Button-Leiste in mehreren Vorlagen auswählen. In der kostenlosen Version des Kontos ist eine ausziehbare Seitenleiste verfügbar. Es gibt auch Freie Version Plugin für WordPress. Nach der Registrierung auf der Service-Website wird der Zugriff auf die Statistiken der Klicks durch Social-Buttons ermöglicht.

• Share42 ist eine klare und einfache Benutzeroberfläche mit der Möglichkeit, das Erscheinungsbild des Bedienfelds für soziale Schaltflächen "fein abzustimmen". In diesem Fall wird der Einrichtungsprozess begleitet von Schritt für Schritt Anweisungen mit einer Beschreibung der durchzuführenden Maßnahmen. Daher ist der Service auch für unerfahrene Webmaster geeignet:

Ein weiteres Plus Der Service ist eine Social-Button-Leiste zur Skriptgenerierung mit Unterstützung für mehrere gängige CMS.

Social-Buttons und WordPress

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

Die positiven Aspekte dieser Erweiterung sind vollständig Russischsprachige Benutzeroberfläche, einfache Anpassung und "Anpassung" für die beliebten sozialen Netzwerke der Runet:

Schritte zum Installieren des Social-Buttons-Plugins für WordPress.

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

3) Suchen Sie in den Suchergebnissen den Namen der gewünschten Erweiterung. Klicken Sie dann auf den Link "Installieren":

4) Nachdem Sie das Archiv heruntergeladen und installiert haben, aktivieren Sie das Plugin, indem Sie auf den entsprechenden Link klicken:

5) Nach der Aktivierung a Neuer Abschnitt Share-Buttons:

Plugin-Einstellungen bestehen aus mehreren Elementen:

Ein paar weitere bewährte Plugins für WordPress:

• Feste Social-Buttons - Mit diesem Plugin können Sie Ihrer Site eine schwebende Social-Media-Leiste hinzufügen, die oben, unten oder an der Seite "klebend" sein kann;
• Html Social Share-Buttons - Dieses Plugin enthält Social-Buttons, die ausschließlich mit erstellt wurden CSS verwenden und html.

Social-Buttons und Joomla

Für diese Engine wurden auch viele Plugins für die Arbeit mit Social Buttons erstellt. Betrachten wir den Prozess der Installation der Erweiterung anhand von SocButtons als Beispiel. Funktionen dieses Plugins:

• Unterstützung für alle gängigen Versionen der Engine;
• Einfach einzurichten;
• Die Darstellungsmerkmale werden für jede Schaltfläche separat eingestellt;
• Geringes Gewicht des Installationspakets.

Verfahren:

1) Wir gehen zum administrativen Teil der Website auf Joomla und wählen das Symbol „ Extension Manager».
2) Hier definieren wir die Quelle zum Laden der Erweiterung:

3) Gehen Sie nach der Installation der Erweiterung zu " Plugin Manager"Und einfach aktivieren installierte Erweiterung... Dazu müssen Sie auf das grüne Symbol oben auf der Seite klicken:

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

Ein paar weitere bewährte Erweiterungen für Joomla:

• Social Bookmarking - dieses Plugin existiert in mehreren Versionen gleichzeitig. Jeder ermöglicht es Ihnen, das soziale Panel in einer bestimmten Position zu positionieren ( horizontal, vertikal oder überhaupt schwebend);
• JL Like - Dieses Plugin führt kein zusätzliches Laden externer Skripte durch, es ermöglicht Ihnen, Statistiken über Stimmen aus sozialen Netzwerken zu führen.

Skript oder Plugin?

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

Aufgrund von Unstimmigkeiten zwischen den Versionen der Engine und des Plugins können Probleme beim Betrieb der Site auftreten. Meistens sind sie mit einer falschen Anzeige von Designelementen verbunden. In unserem Fall handelt es sich um Social-Media-Buttons. Dann kommt das Verständnis, dass es manchmal besser ist, ein bloßes Skript anstelle eines spezialisierten Plugins zu verwenden.

IM neue Version php-Engine ändert sich die Struktur von Methoden und Funktionen nur sehr selten. Daher "überträgt" das Skript den Vorgang eines solchen Updates problemlos.

Der Code für die sozialen Schaltflächen kann von einem der spezialisierten Dienste bezogen werden. Eine Übersicht darüber finden Sie oben. Nehmen wir als Beispiel den Share42-Dienst. Es unterstützt die Erstellung von Social Buttons für beliebte Engines. Verfahren.

Wilkommen auf meinem Blog. Heute möchte ich Ihnen Schritt für Schritt zeigen, wie Sie in html und CSS-Tasten soziale Netzwerke. Beginnen wir komplett bei Null und erhalten das gewünschte Ergebnis. Nach vorne!

Markup- und Basisstile

Ich habe einfach einen Hash in die URLs der Links eingefügt. Natürlich muss jeder Link, wenn er in der Realität verwendet wird, eine Arbeitsadresse haben, zu der der Übergang stattfindet.

Lassen Sie uns zunächst die folgenden Stile hinzufügen:

Share (Breite: 280px; Rand: 0 Auto; Padding: 10px; Hintergrund: # D3CDEE;) .share i (Rand-rechts: 15px; Farbe: Schwarz; Text-Transformation: Großbuchstaben;)

Den Container für Links (Abmessungen, Padding, Hintergrund) und das Label haben wir leicht gestylt.

Symbole dekorieren

Social (Anzeige: Inline-Block; Breite: 40px; Höhe: 40px; Hintergrund: # bdc3c7; vertikale Ausrichtung: Mitte; Rand rechts: 10px;)

Mit der Eigenschaft display: inline-block haben wir unsere Links als Blockelemente erscheinen lassen, aber gleichzeitig die Fähigkeit beibehalten, in einer Reihe zu stehen. Als nächstes geben wir rechts die Größe und den Einzug an, damit die Blöcke nicht aneinander grenzen.

Okay, warum brauchen wir vertikale Ausrichtung: Mitte? Diese Eigenschaft richtet den Text im Container so aus, dass er vertikal exakt zentriert ist. Wir werden unseren Zellen auch einen Hintergrund geben, damit wir sie bereits in dieser Phase visuell sehen können. Das Ergebnis ist ein Leerzeichen. Es ist Zeit, endlich die Symbole hinzuzufügen.

Letzte Stufe

Es bleibt uns überlassen, in jedem der vorbereiteten Blöcke unser eigenes Symbol zu platzieren, das dieses oder jenes Social identifiziert. Netz. Um dies zu tun, schlage ich vor, die richtige Methode zu verwenden - verbinde ein Sprite-Bild und verwende die Hintergrundpositionierung, um alles an seinen Platz zu bringen.

Kurz gesagt, wir brauchen ein Bild wie dieses. Ich habe ungefähr 120 bis 40.

Fügen Sie den CSS-Stilen die folgenden Regeln hinzu:

Social-vk (Hintergrund: URL (icon.png);) .social-fb (Hintergrund: URL (icon.png) -40px 0;) .social-tw (Hintergrund: URL (icon.png) -78px 0;)

Als Ergebnis erhalten wir einen vollständig dekorierten Block mit Symbolen.

Verstehst du, wie wir darauf gekommen sind? Wenn nicht, dann erkläre ich es. Jeder Linkblock hat eine Größe von 40 mal 40. Wenn wir das Hintergrundbild dafür auf 120 mal 40 setzen, dann kann der Block es einfach nicht vollständig enthalten und enthält daher so viel wie möglich.

Standardmäßig werden in diesem Fall die ersten 40 Pixel der Breite und Höhe des Hintergrundbildes genommen, aber mit der Höhe ist alles in Ordnung - das Bild passt in der Höhe vollständig in die Blöcke. Dementsprechend bleibt nur die Position des Hintergrunds für die Facebook- und Twitter-Symbole zu registrieren.

Im Hintergrund schreiben wir so: background: url (icon.png) -40px 0, wir weisen ausdrücklich darauf hin, dass für den social-fb-Block das Hintergrundbild genau ab der angegebenen Position angezeigt werden soll - vierzig Pixel breit nach links und in der Höhe ohne Versatz, da nicht benötigt. Es ist so einfach, wirklich.

Was kannst du noch tun?

Vielleicht möchten Sie dem Block der sozialen Netzwerke noch etwas zusätzliches Design hinzufügen. Es gibt mehrere Ideen. Zunächst können Sie allen Symbolen Rundungen hinzufügen.

Sozial (Grenzradius: 5px;)

Zweitens können Sie ihnen einen Rahmen hinzufügen.

Rand: 3px einfarbiges Lila;

Lila ist in diesem Fall konstruktionsbedingt für uns geeignet, wie mir scheint. Sie können auch die Ecken des Link-Containers selbst abrunden.

Auch hier gibt es viele Gestaltungsmöglichkeiten. Und natürlich können Sie die Farben ganz einfach ändern. In diesem Artikel biete ich Ihnen eine solche Gestaltungsmöglichkeit an, aber jetzt können Sie sie ganz einfach auf Ihre eigene Weise gestalten: Gelb, Grün, Rot und alle anderen Symbole.

Ergebnis

Wie Sie sehen, können Sie der Site auch ganz einfach Social Buttons hinzufügen, und HTML und CSS werden uns dabei helfen. Zumindest optisch können wir unsere Icons so gestalten, wie es für die Gestaltung der jeweiligen Site erforderlich ist.

Damit ist die heutige Artikel-Lektion abgeschlossen. Lass uns das nächste Mal etwas anderes in CSS erstellen

Hallo liebe Freunde. Der heutige Artikel widmet sich der Erstellung eines Blocks von sozialen Schaltflächen ohne Dienste und Plugins. Und dieser Block enthält auch Schaltflächen, mit denen Website-Besucher die Seite ausdrucken und den Artikellink an senden können Email und machen Sie eine Hypothek auf Ihren Artikel. Solche Schaltflächen sind heute auf fast jeder Website zu finden. Erst jetzt werden sie über Dienste oder Plugins implementiert. Und ich zeige dir, wie du es selbst machst.

Die Dienste, die ich auf Kundenseiten und in meinem Blog genutzt habe - und. Diese Dienste erleichtern die Umsetzung der Aufgabe.

Was ist der Vorteil von benutzerdefinierten sozialen Schaltflächen gegenüber Diensten und Plugins?

1. Natürlich ist die Ladegeschwindigkeit der Website ein unbestreitbarer Faktor. So erhöht beispielsweise der PLUSO-Dienst, den ich in einem Blog verwende, im besten Fall die Last um 633 Millisekunden.

Und in diesem Block werden nur die notwendigen Bilder von Social Buttons verwendet, kombiniert in. Alle Stile sind auf ein Minimum reduziert. Plus ein einfaches HTML-Framework.

1. Die von mir vorgeschlagene Methode enthält keine externen Links. Nein, es gibt Links, aber sie werden alle wie interne Links sein. Sie können sie immer haben, wenn Sie möchten. Und dann sind sie gar nicht sichtbar.

1. Höchst einfache Installation... Es genügt, den HTML-Code des Blocks in den Quellcode der Site-Seite einzufügen, das Sprite zu laden, hinzuzufügen CSS-Stile und die Installation ist abgeschlossen. Sie müssen nur den Pfad zur Datei mit Schaltflächenbildern korrigieren.
2. Dieser Artikel ist eher kein Plus oder Minus in Richtung eines eigenen Blocks von Social Buttons. Der Trick besteht darin, dass ein eigener Block keinen Zähler für Schaltflächenklicks hat. Und das kann als Minus gezählt werden. Auf der anderen Seite ist es jedoch möglich, jeden Button zu setzen und Sie wissen genau, wie oft Ihre Besucher auf die Buttons geklickt und Ihre Artikel in sozialen Netzwerken geteilt haben.
3. Die von den Diensten auf Ihrer Website gesammelten Statistiken werden nicht mehr an Dritte weitergegeben.

Einfügen eines Blocks von Social Buttons in den Quellcode

Wir betrachten die klassische Version, wenn sich die Schaltflächen hinter dem Artikel befinden.

Dies kann entweder durch Öffnen der Datei, die für die Anzeige von Artikeln zuständig ist (single.php) erfolgen und dem Quellcode einen Block von Social Buttons hinzufügen. Alternativ kann dies über die Funktionsdatei des Themes (functions.php) erfolgen.

Ich zeige Ihnen beide Optionen, und Sie wählen diejenige, die zu Ihnen passt.

Einfügen eines Blocks in den single.php-Quellcode

Achtung: Bevor Sie beginnen, erstellen Sie eine Sicherungskopie der Datei single.php!

Öffnen des WordPress-Admin-Panels - "Aussehen" — "Editor" — "Ein Eintrag (single.php)".

Suchen Sie im Quellcode nach der Stelle, an der die Artikelausgabe endet und die Kommentare oder die seitenweise Navigation beginnen. An dieser Stelle müssen Sie den HTML-Code des Blocks für soziale Schaltflächen einfügen.

Schauen Sie sich den Screenshot genau an, lassen Sie sich von den Codes leiten, die für die Ausgabe des Artikels verantwortlich sindund Kommentare... Und fügen Sie den Code unten ein.

Natürlich wird es einige Unterschiede in Ihren Vorlagen geben, aber ich bin sicher, Sie werden es herausfinden, daran ist nichts Schwieriges. Und außerdem haben Sie ein Backup, vor dem Sie keine Angst haben müssen.

Und hier ist der HTML-Code des Social-Button-Blocks selbst:

Erläuterungen zum Code: es ist ein Block DIV mit class.share, der Links zu sozialen Netzwerken enthält. Der Link öffnet sich in einem separaten Popup-Fenster, dafür ist diese Funktion onClick = window.open zuständig. Die Ersetzung eines Links zu einem Artikel erfolgt mit diesem Code... Jeder Link hat eine eigene Klasse, über die das Schaltflächenbild zugewiesen wird.

Damit ist die Einfügung durch den Quellcode abgeschlossen. Und dann müssen Sie die CSS-Stile verbinden.

Einfügen eines Blocks in den single.php-Quellcode über Theme-Funktionen

Achtung: Vor Beginn der Arbeiten eine Sicherungskopie der Datei functions.php erstellen!

Um diese Option zu verwenden, müssen Sie die Datei functions.php öffnen und diesen Code ganz am Ende hinzufügen:

/ * Social-Buttons einfügen * / add_action ("comments_template", "soc_button"); Funktion soc_button () (?> Und seien Sie nach dem Einfügen des Codes vorsichtig, Sie sollten keine Leerzeichen oder andere Zeichen enthalten. Oder einfach nur PHP-Code schließen?>. Andernfalls funktioniert die Website nicht mehr.

Erläuterungen zum Code: der Ort, an dem die Social-Media-Buttons angezeigt werden, wird über den API-Schlüssel comments_template definiert. Dieser Schlüssel wird verwendet, um den Platz vor den Kommentaren zu bestimmen. Der Code für die sozialen Schaltflächen selbst ist in umgekehrten PHP-Tags zum Öffnen und Schließen eingeschlossen. Im Code habe ich sie rot markiert. Das ist der ganze Trick beim Einfügen HTML Quelltext in PHP über Theme-Funktionen.

Diese und diese Methode ist vorbei, wir fahren mit dem Hochladen von Bildern auf die Website fort.

Schaltflächenbilder auf den Server hochladen

Als Beispiel habe ich einige Sprites mit Bildern von Social Buttons vorbereitet. Sie können sie herunterladen.

Das Sprite, das ich als Beispiel verwende, ist nur 3,97 KB groß und enthält nur die Schaltflächen, die Sie benötigen. Und da es sich um ein Sprite handelt, gibt es nur eine Anfrage an die Datenbank und nicht für jede Schaltfläche separat.

Laden Sie Bilder herunter oder bereiten Sie Ihre eigenen vor und laden Sie sie auf Ihre Website hoch. Ich denke damit sollte es keine Probleme geben. Außerdem wird der Link zu diesem Sprite benötigt, um die Schaltflächen durch CSS-Stile zu dekorieren.

Einschließlich CSS-Stile

Natürlich kann man diesen Schritt ganz zuerst machen, aber ich ziehe es vor, die ganzen komplexen technischen Arbeiten zuerst zu erledigen und erst danach mit den netten Kleinigkeiten mit CSS-Stilen zu beginnen.

Öffnen Sie also die Datei style.css, die für das Design Ihrer Site verantwortlich ist. Und fügen Sie diese Stile ein:

Share a (Anzeige: Inline-Block; Vertical-Align: Inherit; margin: 5px 0 0 2px; padding: 0px; font-size: 0px; width: 40px; height: 40px; background: url ("http: // test ..png ") no-repeat scroll 0px 0px transparent;) .share a.vkontakte (Hintergrund: url (" http: //test..png ") no-repeat scroll -168px 0px transparent;) .share a.google (Hintergrund: url ("http: //test..png") no-repeat scroll -252px 0px transparent;) .share a.livejournal (Hintergrund: url ("http: //test..png") no-repeat scroll -336px 0px transparent;) .share a.twitter (Hintergrund: URL ("http: //test..png") no-repeat scroll -42px 0px transparent;) .share a.mail (Hintergrund: URL ("http : //test..png ") no-repeat scroll -294px 0px transparent;) .share a.odnoklassniki (Hintergrund: url (" http: //test..png ") no-repeat scroll -126px 0px transparent;) .share a.pinterest (Hintergrund: URL ("http: //test..png") no-repeat scroll -210px 0px transparent;) .share a.liveinternet (Hintergrund: URL ("http: //test..png ") Scrollen ohne Wiederholung -378px 0px transparent; ) .share a.evernote (Hintergrund: url ("http: //test..png") no-repeat scroll -420px 0px transparent;) .share a.bookmark (Hintergrund: url ("http: // test .. png ") no-repeat scroll -462px 0px transparent;) .share a.email (Hintergrund: url (" http: //test..png ") no-repeat scroll -504px 0px transparent;) .share a.print ( hintergrund: url ("http: //test..png") no-repeat scroll -546px 0px transparent;) .share a.digg (hintergrund: url ("http: //test..png") no-repeat scroll -588px 0px transparent;) .share a.spring (Hintergrund: URL ("http: //test..png") no-repeat scroll -630px 0px transparent;)

Erläuterungen zum Code: die.share-Klasse definiert das allgemeine Erscheinungsbild des Blocks, die Größe jedes Buttons, die Auffüllung und setzt einen einzelnen Hintergrund. Und dann hat jeder Link seine eigene Klasse und jedem solchen Link wird durch die background-Eigenschaft das Aussehen der Schaltfläche zugewiesen. Die Schaltflächen werden als CSS-Sprite ausgeführt, und jede Schaltfläche hat eine Breite und Höhe von 40 Pixeln, mit einem Abstand von 2 Pixeln dazwischen, wodurch Sie das Bild für jede Schaltfläche genau definieren können. Das heißt, die erste Schaltfläche wird als 0 angezeigt, die zweite als 42 usw. Im Code werden diese Werte orange angezeigt. Der Link zum Sprite wird ebenfalls orange hervorgehoben, Sie ändern ihn in den Pfad zu Ihrem Sprite.

Damit ist der gesamte Prozess der Erstellung Ihres eigenen Blocks von Social Buttons abgeschlossen. Sie können sicher mit der Prüfung fortfahren.

Und ich habe auch ein Video-Tutorial, in dem der ganze Vorgang anschaulich gezeigt wird, die Stange zeigt die Bedienung der Tasten selbst. Sehen Sie sich Ihre Websites und Blogs an und betten Sie sie ein.

Jetzt ist es soweit. Er hat die Aufgabe gemeistert. Ich wünsche allen viel Glück und wir sehen uns in neuen Artikeln und Video-Tutorials.

IM In letzter Zeit Es ist in Mode gekommen, Social-Media-Buttons auf Websites und Blogs zu installieren, und das ist nicht überraschend. Zum einen können Sie mit den Schaltflächen "Likes" und "Herzen" erhöhen, was sich positiv auf die Werbung für Artikel in sozialen Netzwerken auswirkt. Zweitens gibt es verschiedene Arten von Schaltflächen, mit denen Sie Links zu einzelnen Seiten der Website in sozialen Netzwerken teilen können - dies zieht zusätzliche Besucher von Vkontakte, Facebook, Odnoklassniki, Twitter usw. Drittens, die Artikel getippt große Menge"Likes" und "Herzen" genießen bei den Lesern der Site großes Vertrauen.

Daher ist es sehr wichtig zu wissen, wie Sie Social-Media-Buttons auf Ihrer Website installieren, um die Entwicklung Ihrer Website zu unterstützen. Die beliebtesten sozialen Netzwerke werden überprüft

• In Kontakt mit
• Facebook
• Klassenkameraden
• Google „+1“
• Twitter
• Meine Welt

Hier behandeln wir die Installation der Standardschaltflächen, die von den sozialen Netzwerken selbst angeboten werden. In diesem Fall muss jeder Button separat von den anderen installiert werden, das dauert etwas, sieht aber auch sehr gut aus.

1.1. In Kontakt mit

1.1.1 Schaltfläche Speichern

Der Button ist flexibel genug, die Beschriftung kann beliebig geändert werden (standardmäßig „Speichern“).

Zuerst müssen Sie auf die Seite mit gehen, dort erhalten Sie auch den Skriptcode, den Sie auf Ihrer Site installieren müssen, damit der Button angezeigt wird.

Hier können Sie einen von 5 auswählen Stile: Schaltfläche, Schaltfläche ohne Zähler, Link, Link ohne Symbol, Symbol.

Feld " Text"Erlaubt Ihnen, das Standard-" save "Label in Ihr eigenes zu ändern.

Als URL-Adresse können Sie die Adresse der Seite mit dem Button oder die Adresse einer anderen Seite (freier Wahl) auswählen. Im ersten Fall teilt die Schaltfläche einen Link zu der Seite, auf der sich die Schaltfläche selbst befindet. Im zweiten Fall teilt die Schaltfläche den von Ihnen angegebenen Link, unabhängig davon, wo er sich befindet.

Code einbetten besteht aus zwei Teilen : der erste sollte sich irgendwo zwischen den Tags befinden und, die zweite befindet sich an der Stelle, an der die Schaltfläche angezeigt werden soll. Lesen Sie in Absatz ., wie Sie die Schaltfläche auf der Website installieren .

1.1.2 Like-Button

Die zweite Version der Schaltfläche ist das Widget " Gefällt mir". Es wird einfacher sein, es auf der Website zu installieren, weil Am Ende erhalten Sie nur einen Code, der an der richtigen Stelle auf der Website platziert werden muss

Um die Schaltfläche zu konfigurieren, gehen Sie zu dieser Link... Hier müssen Sie auch eine Reihe von Parametern eingeben.

Name der Website- Es ist besser, hier den kurzen und echten Namen Ihrer Site anzugeben.

Webseitenadressse- Adresse eingeben Startseite deine Seite.

Domain der Hauptseite- Geben Sie den Hauptspiegel der Site an (er ist als Parameter des Operators "Host" zu finden). Wenn dies schwierig ist, verlassen Sie die vorgeschlagene VKONTAKTE.

Schaltflächenoptionen- dies sind verschiedene Stile des Buttons, sie beeinflussen ihn Aussehen.

Tastenhöhe- geometrische Abmessungen "gefällt mir".

Schaltflächenname- Es stehen zwei Optionen zur Verfügung (gefällt mir, es ist interessant).

Code einbetten- der Code, der benötigt wird, um die Schaltfläche des sozialen Netzwerks Vkontakte anzuzeigen.

1.2 Facebook

Konfiguriert die Schaltfläche auf dieser Seite. Schwierigkeiten können auftreten, da Kommentare zum Formular werden in geschrieben Englische Sprache aber unten kannst du lesen Kurzbeschreibung jedes Feld.

URLzuMögen- URL-Adresse der Seite für die Schaltfläche (wenn das Feld nicht ausgefüllt ist, wird die Adresse der Seite verwendet, auf der sich die Schaltfläche befindet).

SendenTaste- das Vorhandensein eines Häkchens umfasst neue Chance- einen Link an Facebook senden (es erscheint ein zusätzlicher Button - "senden"). Wenn aktiviert, werden zwei Schaltflächen gleichzeitig angezeigt.

Layoutstil- Der Stil des Buttons beeinflusst sein Aussehen (er gilt als Standard Taste_Anzahl).

Breite- die Breite der Schaltfläche in Pixeln.

Zeige Gesichter- Wenn aktiviert, werden Avatare von Personen angezeigt, die bereits auf diese Schaltfläche geklickt haben.

Schriftart- Art der Schaltflächenschriftart.

Farbschema- der Hintergrund des Bereichs neben der Schaltfläche (weiß und schwarz).

Verb anzeigen- Schaltflächenname (wie es, ich empfehle es).

ErhaltenCode- die Schaltfläche, die den Skriptcode generiert.

1.3 Klassenkameraden und meine Welt

Diese sozialen Netzwerke haben im russischsprachigen Internet große Popularität erlangt, dort leben viele Menschen, daher sollten Sie die Installation der Schaltfläche "Klasse" aus dem Dienst "Odnoklassniki" und "Gefällt mir" aus "Meine Welt" nicht vernachlässigen " Webseite.

Um die Schaltflächen zu konfigurieren, müssen Sie zu gehen. Sie können Schaltflächen separat hinzufügen und jede auf ihre eigene Weise anpassen, oder Sie können beide Schaltflächen gleichzeitig bearbeiten.

Höhe Größe- die geometrische Größe der Schaltflächen.

Aussicht- das Aussehen des Schaltflächenrahmens.

- Auswahl an Knöpfen (wie, Klasse)

Zähler- Ein- und Ausschalten des Zählers durch Drücken der Tasten (rechts oben - die Position des Zählers).

Text auf Schaltflächen- Auswahl eines der drei verfügbaren Namen für die Schaltflächen.

Code einbetten- Skriptcode, der auf der Site installiert werden muss.

1.4 Google „+1“

Ein neues soziales Netzwerk, das in kurzer Zeit ein riesiges Publikum gewonnen hat. Eine Seite ohne den "+1"-Button ist schwer vorstellbar, denn Es ermöglicht Ihnen nicht nur, Links zum sozialen Netzwerk hinzuzufügen und die Anzahl der "Pluszeichen" zu erhöhen, sondern kann auch die Ergebnisse der Website in den TOP beeinflussen Suchmaschine Google.

Alle Details dazu, sowie die Installation und Konfiguration des Buttons befinden sich.

1.5 Twitter

Der beliebteste Kurznachrichtendienst kann nicht ignoriert werden. Installieren Sie sich eine Schaltfläche aus diesem sozialen Netzwerk und sehen Sie, wie schnell die Leute Links zu Ihrer Website auf Twitter teilen. Sie können den Knopf auf diesem besonders anfertigen.

Zuerst müssen Sie die gewünschte Schaltfläche auswählen (uns interessiert die erste Option - die Schaltfläche "Link senden").

Danach erscheint auf der Seite ein Formular mit mehreren Feldern, die Sie ausfüllen müssen.

Link senden- Auswahl der Seite, auf der sich die Schaltfläche befindet, oder eine andere.

Text- Auswahl des Textes, der neben der Schaltfläche erscheint (NICHT AUF DER TASTE selbst).

Zähler anzeigen- Aktivieren oder deaktivieren Sie das Zählen der Anzahl der Tastendrücke.

Mit der Hilfe- die Wahl, wie eine Linknachricht zu Twitter hinzugefügt werden soll (betrifft praktisch nichts).

Kennzeichen- die Wahl eines Labels, das auf Twitter veröffentlicht wird (hat praktisch keine Auswirkungen).

Großer Knopf- Erhöhen der geometrischen Größe der Schaltfläche.

Weigern Sie sich, Twitter anzupassen- Ablehnung von Twitter-Stilen (es ist besser, das Feld unmarkiert zu lassen).

Sprache- Auswahl der Tastensprache.

Auf der rechten Seite wird ein Code generiert, der der Site hinzugefügt werden muss.

1.6 Ya.ru

Dazu müssen Sie mehrere Felder ausfüllen, die den erforderlichen Skriptcode bilden.

Die Größe- kleine oder große Knopfgröße.

Stil- Wahl zwischen einer Schaltfläche oder einem Symbol.

Zählerverfügbarkeit- Aktivieren oder deaktivieren Sie den Zähler für das Drücken der Taste.

Schaltflächendarstellung- ein Beispiel dafür, wie die Schaltfläche aussehen wird.

Überschrift- Auswahl eines Titels für die Seite (beliebig oder der Titel der aktuellen Seite).

Code einbetten- der erforderliche Code, der der Site hinzugefügt wird.

2. Bereit-Schaltflächen für die Site

Wenn Sie jedoch nicht den Code jeder Schaltfläche zu Ihrer Website hinzufügen möchten, können Sie Standardskripte verwenden, die sofort eine Gruppe von Schaltflächen für soziale Medien bilden. In diesem Fall reicht es aus, Ihrer Website nur einen Code eines solchen Skripts hinzuzufügen, und Sie haben sofort die Schaltflächen der beliebtesten sozialen Netzwerke installiert.

Um den Block zu konfigurieren und die erforderlichen sozialen Netzwerke auszuwählen, folgen Sie diesem Link. Der folgende Screenshot zeigt, dass Sie die Schaltflächen der gewünschten sozialen Netzwerke aus den vorgeschlagenen auswählen und das Erscheinungsbild des Blocks leicht bearbeiten können.

Leistungspaket- Auswahl von Social-Media-Buttons für die Site (die mit einem Häkchen versehenen werden auf der Site angezeigt).

Der Code- das erforderliche Skript, das der Site hinzugefügt werden soll.

2.2 PLUSO-Tasten

In letzter Zeit hat der Social-Media-Button-Konstruktor PLUSO große Popularität erlangt. Über diesen Link gelangen Sie auf die Seite.

Der Konstruktor ist flexibel genug, hat viele Einstellungen, sodass Sie Social-Media-Buttons so erstellen können, dass sie perfekt in das Site-Design passen.

Zuerst müssen Sie den Stil der Schaltflächen und Zähler aus mehreren Angeboten auswählen (horizontal, vertikal, farbig, farblos usw.).

Dann müssen Sie eine Reihe von Parametern konfigurieren, indem Sie auswählen

• Blockposition (vertikal, horizontal);
• Tastenfarbe (hell, dunkel);
• Blockgröße (groß, klein);
• Zähler (Anwesenheit oder Abwesenheit);
• Hintergrund (farblos oder farbig);

Der Code wird gemäß den von Ihnen angegebenen Parametern generiert und muss anschließend in die Site eingefügt werden.

SHase42

Ein weiterer Dienst, mit dem Sie Schaltflächen für Ihre Website erstellen können, ist Share42.com/ru.

Mit diesem Generator können Sie die Größe von Schaltflächen anpassen, die gewünschten sozialen Netzwerke aus der Vielzahl der verfügbaren definieren und auch das Erscheinungsbild von Symbolen bearbeiten.

Wählen Sie die Größe der Schaltflächen und die gewünschten sozialen Netzwerke aus und fahren Sie dann mit der Konfiguration zusätzlicher Optionen fort.

Typ des Symbolfelds- Anzeige eines Blocks von Schaltflächen (die Option "vertikal schwebend" ist sehr interessant).

Begrenzen Sie die sichtbare Anzahl von Symbolen- Auswahl der Anzahl der angezeigten Schaltflächen (andere werden hinter dem Link versteckt).

Site-Codierung- die Wahl der Kodierung Ihrer Website.

Share42.com-Site-Symbol hinzufügen- Vielleicht sollten Sie das Kontrollkästchen deaktivieren.

Zähler anzeigen- Aktivieren Sie den Zähler für Schaltflächenklicks (nur wenn jQuery ausgeführt wird).

Die Installation dieses Skripts ist recht kompliziert, wird aber Schritt für Schritt auf der Share42-Website selbst beschrieben.

3. So installieren Sie Schaltflächen auf der Website

Wenn der Code, der auf der Website veröffentlicht werden muss, aus zwei Teilen besteht (wie bei der Vkontakte-Schaltfläche), wird jeder der Teile separat installiert. Wenn der Code nicht in zwei Teile geteilt ist, kann dieser Schritt übersprungen werden.

Der erste Teil des Codes muss zwischen den Tags eingefügt werden und... Gehen Sie dazu zu Ihrem WordPress-Admin-Panel und gehen Sie zum Vorlageneditor.

Im Vorlageneditor müssen Sie die Datei finden "Titel" (Header.php), wenn dies nicht der Fall ist, dann - "Hauptvorlage" (index.php)... Jetzt musst du das Tag finden oder... Wenn es in den angegebenen Dateien keine solchen Tags gibt (alle Themes sind unterschiedlich, dies kann durchaus sein), müssen Sie alle Dateien zum Bearbeiten öffnen und in jedem nach einem Tag suchen ... Zur Suche können Sie die Tastenkombination "Strg + F" verwenden.

Sobald Sie die gewünschten Tags gefunden haben, können Sie den ersten Teil des Codes posten kurz vor dem schließenden TagKopf> um nicht versehentlich die Codes anderer Skripte zu berühren.

Der zweite Teil des Codes wird dort platziert, wo Sie die für die Site ausgewählten Social-Media-Buttons sehen möchten. Wenn der Code nur aus einem Teil besteht, reicht es aus, nur diese Operation auszuführen.

Am häufigsten werden Schaltflächen vor oder am Ende eines Artikels hinzugefügt. Die einfachere ist natürlich die zweite Möglichkeit. Wir werden es in Betracht ziehen.

Sie müssen herausfinden, wo der Artikel endet (der Hauptteil der Seite). Dazu müssen Sie die Datei bearbeiten "Ein Eintrag" (Single.php).

Jetzt müssen Sie den Operator finden, der für die Anzeige des Hauptinhalts des Artikels verantwortlich ist. In meinem Fall ist dies "the_content", direkt nach dem Button-Code.

Ebenso können Sie den Code am Anfang des Artikels platzieren, Sie müssen nur eine Stelle zwischen dem Titel und dem Text des Artikels finden.