Autor: Chris1278
Version der Extension: 1.0.1
Voraussetzungen: phpbb 3.2.8
Beschreibung der Extension:
Diese Extension basiert auf Vorlage von diesem hier: How to add social icons.
Da dieses Script bzw. vorlag aber für phpbb 3.0 ist, kann man dies nicht 1 zu 1 auf die aktuelle phpbb-Version anwenden. Daher habe ich das zu einer Extension gebastelt.
Screenshot:
Bild im Forum mit anzeige aller Positionen:
http://prntscr.com/q4hurc
In der Navbar (Als Position auswählbar)
http://prntscr.com/q4ip56
Bild vom Admintool
http://prntscr.com/q4ioyv
Download:
Downlaod bei Github: Downloaden!
Anmerkungen:
Ich habe das Tool hier überarbeitet und umbenannt. Die Icons in der Header-Bar also oben dort wo beim Prosilver die Search-Box sitzt anzuzeigen ist leider nicht mit der Responsiven Ansicht zu machen. Das bekomme ich nicht hin (noch nicht leider. Vielleicht mag es eine Lösung dafür geben aber dafür reicht mein Wissen noch nicht aus.)
Daher habe ich mir überlegt ein Tool für die Admin Oberfläche mit einzubinden und die Icons einfach in eine Box an verschiedenen Stellen anzeigen zu lassen. So wie oben auf den Bildern zu sehen. Alternativ noch eine Möglichkeit die Icons innerhalb der Navbar in einem Dropdown-Menu (ähnlich des Schellzugriffsmenu von Prosilver) zu gestalten.
Allerdings kann man im Admin Bereich nur folgende dinge für diese Extension einstellen:
- Aktivieren/Deaktivieren
- Alle Positionen gleichzeitig anzeigen lassen
- Berechtigungssystem über phpbb einstellbar wer Social Media Links sehen darf und wer nicht (Benutzer und Gruppenrechte einstellbar)
- Position auswählen mittels einer Dropdown-Box!
Ihr fragt euch sicherlich was die zweite Option soll. Die ist einfach erklärt.
Wenn man dies auswählt werden alle Boxen (Events) zur selben Zeit angezeigt. Dann kann man im Forum sehen, wo man die am besten haben möchte und wählt diese dann aus im Positions-Menü.
Wenn die Funktion aktiviert ist sehen nur diejenigen alle Anzeigepositionen gleichzeitig die auch min. 1 Admin recht besitzen. Diese dient lediglich zur Veranschaulichung wo die einzelnen Boxen sitzen und man sich einen Überblick verschaffen kann. Diese Funktion ist aber Standardmäßig nicht aktiv und sollte auch nicht Dauer aktiv sein.
Aber einfügen und bearbeiten der Links muss immer noch manuell in den Dateien gemacht werden.
Dazu später nochmal hier eine ausführliche Anleitung. Sobald ich mein Wissen erweitert habe, das ich in der Lage bin, mein Admintool um die Funktion zu erweitern links übers Admintool einzufügen werde ich dies auch mit einbinden. Das dauert aber noch was.
Konfiguration:
Momentan ist leider nur möglich manuell über die Hardkodierung die Social media links inklusive icons einzufügen.
Außerdem ist das für die eine Position der Anzeige in der Navbar als Menu eine Besonderheit da dort keine icons an sich, sondern sogenannte fontawesom icons (version v4) verwendet werden.
Um die anzeige des Social Media Link´s Menu innerhalb der Navbar einzurichten, gehe wie folgt vor:
öffne:
ext/chris1278/social/styles/prosilver/template/event/overall_header_breadcrumbs_after.html
Dort finde Folgendes:
Code: Alles auswählen
<!-- Ab hier bitte die Verlinkungen einfügen / Please inset the links beginnen from here -->
Code: Alles auswählen
<!-- Hier ende der Linkeintragungen / Here is the end for entry links -->
Das Format des einzufügenden Codes ist dort wie folgt:
Code: Alles auswählen
<li><a href="https://www.facebook.com/" target="_blank" role="menuitem"><i class="icon fa-facebook-official fa-fw icon-gray" aria-hidden="true"></i><span>{L_S_FACEBOOK}</span></a></li>
Die URL wohin das gehen soll, welche sich relativ am Anfang befindet, in diesem fall https://www.facebook.com/
Und zur Ausgabe des namens nutzen wir eine sprach variabel wie hier: {L_S_FACEBOOK} ihr soltet das format dann auch für weitere dienste so beibehalten. z.b: {L_S_XXX} wobei hier XXX für den Namen steht.
Sprachvariabeln erkläre ich nachher auch noch wo die wie einzutragen sind.
Für die restlichen Positionen verwendet ihr folgende Datei zum bearbeiten.
öffne:
ext/chris1278/social/styles/prosilver/template/social.html
Dort füght ihr das im folgenden Format ein:
Code: Alles auswählen
<a href="https://www.facebook.com/" target="_blank"><img style="border-radius:4px 4px 4px 4px;" alt="Facebook" width="33px" height="33px" src="{ROOT_PATH}/ext/chris1278/social/styles/all/theme/images/social/social_facebook.png"></a>
Hier lediglich wieder den Link einfügen und hier wichtik den Dateinamen des icons (hier social_facebook.png) anpassen.
Die Icons die ihr benutzen wollt müssen 33px*33px gross sein und sich im ordner
ext/chris1278/social/styles/all/theme/images/social/
befinden. Am sinnvollsten wäre es hier auch das png format bei zu behalten. Nun kommen wir zu den Sprach variabel.
In der Extension befindet sich der Ordner language und darin die Ordner en/de_x_sie/du also englisch und zweimal Deutsch.
In diesen Ordnern befinden sich jeweils 2 Dateien. Wir brauchen davon aber nur eine je Sprachordner zu bearbeiten.
Und zwar benötigen wir dafür die Datei namens:
social.php
dort findet ihr ganz unten diesen text:
und nach dem Text könnt ihr eure Variabeln die ihr noch angelegt habt einfügen://Ab hier kannst du weitere Sprachvariabeln einfügen für deine Icons in der Ansicht "Innerhalb der Navbar als Menü". Nutze bitte genau so das nachfolgende Format:
//
// 'S_XXX' => 'ZZZ',
//
// Wobei xxx und zzz hier als platzhalter dienen. Wenn du jetzt z.B. antelle der platzhalter instagramm nemen möchtest dann machst du folgendes:
//
// 'S_INSTAGRAM' <-- hier bitte drauf achten das alle Buchstaben Gross geschrieben sind. Dann kannst du in der html datei als Sprachvariabeln
//
// nähmlich folgendes nutzen: {S_INSTAGRAM} In dem Fall würde dort das erscheinen was in dem Beispiel als ZZZ steht.
//
// z.B. 'S_INSTAGRAM' => 'Hier das erscheint als text dort wo du die Variabel {S_INSTAGRAM} in der html Datei einsetzt. Hier must du dann drauf achten das die Rechtschreibung stimmt.'
//
// Ende der Info
Code: Alles auswählen
'S_TWITTER' => 'Twitter',
Und zwar sind die Schriftzeichen innerhalb der sonderzeichen ( ' ' <- OBERSTRICHE) einzutragen. Das selbe gillt für den namen .
Ich werde mich bemühen das Admintool zu erweitern das alsbald über die Admin Oberfläche die Links einzutragen sind.