[3.2] Social Media Icons an verschiedenen Positionen

[chris1278]

Name der Extension: Social Media Icons

Autor: Chris1278

Version der Extension: 1.0.4

Voraussetzungen:

• phpbb 3.2.8 - <3.4

• php 5.5 - 7-4

Wichtig!!! Bitte unbedingt beachten!

• Diese Extension wurde komplett umgebaut. Da sich einge der Wichtigsten Dateien geänert haben vom Inhalt sowie auch vom Namen und die Migration der Tabellen Einträge in eine eigens dafür angelegte Tabelle eroflgt muss diese Extension von Grundauf neu installiert werden.
  
  Ihr solltet daher die Einträge die ihr in der Version 1.0.3 bzw. vorherigen vorgenommen habt sichern und diese nachher wieder Manuell eintragen. Es werden keine Daten der vorherigen Installation übernommen.

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:

[ externes Bild ]
[ externes Bild ]

Hier kann man natürlich auch per Einstellung im Admin Bereich die Anzeige der Icons in einer Box so wie das Forum selber machen.

In der Navbar (Als Position auswählbar)

[ externes Bild ]

Bilder vom Admintool

Allgemeine Einstellungen:

[ externes Bild ]

Link Einstellungen:

[ externes Bild ]

[ externes Bild ]

Wie ihr sehen könnt, war ich fleißig.

Um eigene Icons als Bilder zu nutzen, sind zwei dinge erforderlich:

1. Speichert euer Icon unter /ext/chris1278/social/icons ab (bevorzugt als png das funktioniert in jedemfall)
2. Im Admin Bereich unter "Dateiname des Icons" gebt ihr dann den Dateinamen inklusive Endung an (ohne Pfadangabe). Achtet auf Groß und
Kleinschreibung. Also wenn ihr euer icon so benannt habt: mein-icon.png dann gebt ihr nur mein-icon.png ein und fertig.

Download:

Downlaod bei Github: Extension "Social Media Icons an verschiedenen Positionen" downloaden

Historie

Version 1.0.4

• Kompletter Umbau der Extension

• Datenbank Einträge gehen jetzt in eine eigene Tabelle

• Viele Dateien von nicht mehr benötigten Variablen und Parameter befreit

Version 1.0.3

• Ab sofort ist es Möglich bis zu 10 Icons einzurichten.

• Verbesserung der Programmiersyntax. Code sauber geschrieben und mittels epv von phpbb.com und codesniffer geprüft und korrigiert.

• Extension auch schon vorab vorbereitet für phpbb 3.3.x (Insbesondere .yml Dateien)

Version 1.0.2

• Kompatibilität für Funktion [3.2] Einklappbare Forenkategorien! integriert. Damit lassen sich die Box Ansichten einklappen

• Fehlerbehebung bei der Anzeige der Icons im Header (responsive Ansicht hatte nicht funktioniert)

• Fontawesome Icons mit eingebunden und nutzbar gemacht

Update des Administrations-Modul:

• Aus einer Kategorie zwei Modulkategorien erstellt. 1. Allgemeine Einstellungen (dort befinden sich auch die vorangegangenen Einstellungen + 2. Link-Einstellungen

Update der Funktionen "Allgemeine Einstellungen:

• Bei den Positionen die Option "Zeige Icons im Header" hinzugefügt

Mit der zusätzlichen Position weitere Auswahl punkt:

• Die Header-Icon´s auf allen Seiten anzeigen

Bei Aktivierung der Option wird die Begrenzung für diese Anzeige Position von der Index Seite aufgehoben und die Icons sind auf jeder Seite zu sehen während man im Forum liest (Nur für Option "Zeige Icons im Header".

• Option zum wählen zwischen Fontawesome-Icon oder Standard Icons

• Seiten Extern öffnen

Auswahl, ob beim klicken auf das Icon der Link im neuen Fenster bzw. Tab geladen wird oder im Fenster wo das Forum war (erfordert keine zusätzliche Extension).


Hinzufügen der Funktionen für "Link Einstellungen:

Bei den Link Einstellungen kann für jeden Link folgendes eingestellt werden:

• Der Link wohin das Icon lädt

• Das Icon selber (Standard-Icon mus als Datei gespeichert sein)

• Ansicht der aktuell verwendeten Icon-Datei (Anzeige des Icons, sofern alles korrekt geladen wird und ihr den Dateinamen korrekt Angegeben habt).

• Eingabe des Fontawesome-Icon (Hier könnt ihr dann eintragen was ihr für ein Fontawesome Icon möchtet. Dies ist erforderlich da die Option "Innerhalb der Navbar als Menu ausschließlich Fontawesome nutz. Allerdings nur Fontawesome version 4).

• Anzeigen des Fontawesome-Icons ( Wenn das Fontawesome Icon korrekt eingetragen ist wird das Icon einmal in Klein und in Gross Dargestellt. Dann seht ihr wie es ausschaut wenns geladen wird. Das Kleine für die Ansicht "Innerhalb der Navbar als Menu" und das Grosse in den Anderen Anzeige Positionen).

• Dann noch die Option das So zu aktivieren oder nicht.

Version 1.0.1

• Hinzufügen eines Einfachen Administrations-Modul

In dem Administrations-Modul folgende Funktionen eingebunden:

• Social Media Links aktivieren/deaktivieren

• Zeige Soicial Media Icons auf allen Positionen

• Position der Social Media Icons

Folgende Anzeige-Positionen hinzugefügt:

• Über der Navbar

• Unter der Navbar

• Über der Statistikanzeige

• Unter der Statistikanzeige

• Inerhalb der Navbar als Menu

Version 0.1.0

• Umwandlung des Mods zu einer Extension

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

[chris1278]

So also ich habe jetzt doch einige fortschritte gemacht und habe sogar mein Admin Tool mittlerweile erweitert so, das es in der nächsten Version möglich sein wird die Links über das Adminpanel einzufügen. Somit entfällt das manuelle Bearbeiten der Dateien (ausgenommen Sonderwünsche).

Das wird aber noch eine Weile Dauern da ich wegen des Admin Tools noch in der Testphase stecke.

Und ich denke, auch dieses hier habe ich lösen können dank der Hilfe eines bekannten:

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

Somit wird dann zusätzlich die Option vorhanden sein diese Icons auch wieder oben in der Header bar (dort wo bei Prosilver die Suchbox sitzt) einzublenden. Diese geht sogar in der Responsiven Ansicht gut (je nachdem wie viele Icons man dort platziert hat).

Daher habe ich den download erst mal herausgenommen.

[swissphoenix]

cool, vielen dank für deine arbeit und mühe. da freu ich mich auf die neue version