[3.2] Social Media Icons an verschiedenen Positionen

[chris1278]

Name der Extension: Social Media Icons an verscheidenen Positionen

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 -->

Danach kannst du die links dort einfügen nach dieser Zeile. Aber nur bis zu dieser Zeile:

Code: Alles auswählen

<!-- Hier ende der Linkeintragungen / Here is the end for entry links -->

Alles was oberhalb der ersten genannten Zeile bzw. unterhalb der zweiten genannten Zeile steht, muss erhalten bleiben.

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>

Hierbei mus dann folgendes angepasst werden:

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>

Da hier keine Sprachvariabel verwendet wird sondern nur icons angezeigt werden braucht ihr das hier nict zu beachten.

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:

//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

und nach dem Text könnt ihr eure Variabeln die ihr noch angelegt habt einfügen:

Code: Alles auswählen

'S_TWITTER'									=> 'Twitter',

Und ihr solltet Das Format so beibehalten das die Variabel Alle Buchstaben Groß sind. Hier benötigt Ihr aber nicht die form {L_S_XXX} Hier kommt links nur das rein was nach dem L_ Kommt Also wenn ihr die Variabel so genannt habt z.B. {L_S_PHPFORUM}, dann würde zur anlegung der variabel selber in der Datei nur S_PHPFORUM zu verwenden sein.

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.

[Kirk]

Hi
Du hast in der composer.json bei "display-name" das gleiche wie bei "description" eingetragen und die search-box wird in der reponsiven Ansicht nicht ausgeblendet.

[chris1278]

So Kirk ich habe das korrigiert. Name und Beschreibung sind nun ich mehr Identisch und die Searchbox wird bei weniger als 350px ausgeblendet.

Allerdings ist mir noch aufgefallen das die Icons in der Responsiven Ansicht zu weit nach unten rutschen. Dies muss ich die nächsten tage noch ausbessern.

Wie gesagt die Vorlage war auch für phpbb 3.0 daher ist normal das am Anfang noch Fehler drin sind. Auf jeden Fall danke für den Hinweis.

[Wuppi]

Ich sehe hier eine bekanntes Sicherheitsproblem ... hat jetzt nicht nur etwas mit den Buttons zu tun:

Wer _blank als target nutzt (egal wo), sollte auch rel="noopener" im <a>-Tag nutzen.

Demonstriert wird die Sicherheitslücke hier: https://mathiasbynens.github.io/rel-noopener/ ... auf den Demo-Link klicken und dann in den Tab zurück springen - oben seht ihr das die Seite nun manipuliert wurde.

Optional wird noch noreferrer empfohlen. Wobei das bei Zielen problematisch ist die den refererrer idealerweise benötigen - Werbepartner z.b.

Beides hat NICHTS mit nofollow zu tun. Nofollow würde ich bei Links in Richtung Facebook und Co aber trotzdem nutzen. Ich schenke denen durch meinen Link popularität und bekomme nichts zurück nö

Ein a-Tag sähe also so aus:

Code: Alles auswählen

<a href="https://irgendwas.tld/" target="_blank" rel="noopener noreferrer">blabla</a>

! Leerschritt, keine Kommatrennung

[swissphoenix]

Hi habe jetzt mal die ext installiert und am pc funktioniert es wunderbar mit FF, chrome und edge nur am iphone mit safari browser habe ich ein problem das sich die icons über das loginfenster legen. kann man das irgendwie einfach anpassen?

https://test.diabetesclub.ch

[chris1278]

Nun ja nicht direkt. Da hab ich mich bis jetzt noch nicht drum gekümmert. Da muss ich mal testen ob man das in der Responsiven Ansicht evtl. durch ein anderes Event einfügen kann also an einer passenderen stelle. Ich werde das beizeiten mal testen und hier berichten.

[chris1278]

OK da ich meinen letzten Beitrag nicht nachbearbeiten kann halt leider als neuer Beitrag.

So ich werde mir die Extension diese Woche nochmal anschauen. Und auch schauen ob 3.2.8 kompatibel machen kann.

Da ich mittlerweile anfange auch Datenbank Einträge zu migrieren (ich lerne, auch wenn es länger dauert).

So bin ich mittlerweile in der Lage ein Admin -tool für diese Extension zu bauen, wo man Positionen angeben kann.

Da ich mir überlegt habe die Geschichte mit den Social-Media Icons in eine Separate anzeige Box zu legen die man über oder unter dem Forum platzieren kann. Das ließe sich wahrscheinlich auch besser für die Responsive Ansicht konfigurieren.

Ferner werde ich natürlich auch versuchen die jetzige Ansicht in Responsiver Sache zu verbessern, sofern das möglich ist. Da dort oben in der Ecke aber auch die Search-Box sitzt, wird das sicherlich Problematisch werden.

Werde dann berichten wie es weitergeht.

[chris1278]

So habe die Extension jetzt umgeändert und mit einem Admintool versehen. Leider noch nur eingeschränkt.

Alles Weitere steht oben.

Falls fragen sind, dürft Ihr diese hier gerne stellen.

Habt bitte Nachsicht mit mir, ich bin erst vor kurzem dazu gekommen mich mit SQL und Datenbank Migration vertraut zu machen. Daher kann ich im Moment leider noch kein umfangreiches Admintool erstellen. Ich arbeite aber dran das ich dies alsbald ändere.

Leider war es mir nicht möglich die Icons dort Oben zu belassen da ich das nicht in die responsive Ansicht vernünftig einbinden konnte daher habe ich mich entschieden das auf diese Art zu lösen.


Egal welche Position ihr Wählt das funktioniert alles auch im Responsiver Ansicht.