[3.2] Social Media Icons an verschiedenen Positionen

In diesem Forum können Extension-Autoren ihre Extensions vorstellen, die sich noch im Entwicklungsstatus befinden. Der Einbau in Foren im produktiven Betrieb wird nicht empfohlen.
Benutzeravatar
chris1278
Mitglied
Beiträge: 1563
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

[3.2] Social Media Icons an verschiedenen Positionen

Beitrag von chris1278 » 05.07.2019 22:41

Name der Extension: Social Media Icons an verscheidenen Positionen

Autor: Chris1278

Version der Extension: 1.0.2

Voraussetzungen:
  • phpbb 3.2.8
  • php 7.0.x-7-2.x

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

Bilder vom Admintool

Allgemeine Einstellungen:
http://prntscr.com/qan4sz

Link Einstellungen:
http://prntscr.com/qan4yz

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.2
  • 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. Allgemeinde 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
Zuletzt geändert von chris1278 am 15.12.2019 04:29, insgesamt 6-mal geändert.

Benutzeravatar
Kirk
Supporter
Supporter
Beiträge: 6471
Registriert: 24.05.2010 08:31
Kontaktdaten:

Re: [3.2] Social Media Icons im Header-Bereich

Beitrag von Kirk » 06.07.2019 11:52

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.

Benutzeravatar
chris1278
Mitglied
Beiträge: 1563
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: [3.2] Social Media Icons im Header-Bereich

Beitrag von chris1278 » 06.07.2019 12:11

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.

Benutzeravatar
Wuppi
Mitglied
Beiträge: 719
Registriert: 14.05.2002 23:04
Wohnort: Köln
Kontaktdaten:

Re: [3.2] Social Media Icons im Header-Bereich

Beitrag von Wuppi » 18.07.2019 10:10

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 ;):)

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
Mitglied
Beiträge: 2
Registriert: 24.11.2019 15:44

Re: [3.2] Social Media Icons im Header-Bereich

Beitrag von swissphoenix » 24.11.2019 15:49

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

Benutzeravatar
chris1278
Mitglied
Beiträge: 1563
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: [3.2] Social Media Icons im Header-Bereich

Beitrag von chris1278 » 24.11.2019 16:24

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.

Benutzeravatar
chris1278
Mitglied
Beiträge: 1563
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: [3.2] Social Media Icons im Header-Bereich

Beitrag von chris1278 » 30.11.2019 14:01

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.

Benutzeravatar
chris1278
Mitglied
Beiträge: 1563
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: [3.2] Social Media Icons an verschiedenen Positionen

Beitrag von chris1278 » 01.12.2019 13:45

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.

Benutzeravatar
chris1278
Mitglied
Beiträge: 1563
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: [3.2] Social Media Icons an verschiedenen Positionen

Beitrag von chris1278 » 07.12.2019 22:11

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:
swissphoenix hat geschrieben:
24.11.2019 15:49
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
Mitglied
Beiträge: 2
Registriert: 24.11.2019 15:44

Re: [3.2] Social Media Icons an verschiedenen Positionen

Beitrag von swissphoenix » 09.12.2019 13:47

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

Antworten

Zurück zu „Extensions in Entwicklung“