[3.2] Social Media Icons im Header-Bereich

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: 1505
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

[3.2] Social Media Icons im Header-Bereich

Beitragvon chris1278 » 05.07.2019 22:41

Name der Extension: Social Media Icons im Header-Bereich

Autor: Chris1278

Version der Extension: 1.0.0

Voraussetzungen: phpbb 3.2.7

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:

http://prntscr.com/ob6e54


Download:

Downlaod bei Github: Downloaden!


Anmerkungen:


Diese Extension besitzt kein ACP Modul. Falls Ihr weitere Icons und Verlinkungen dort zufügen möchte geht wie folgt vor.

Die Verlinkungen sind in der Event Datei overall_header_searchbox_before

Als Vorlage hier der Code:

Code: Alles auswählen

<a href="https://hier der link/" 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_ihr-icon.png"></a>


Dort einfach den link und den Namen des Icons einsetzen. Falls Ihr nicht wollt, das die Verlinkungen in einem neuen Tab/Fenster öffnet entfernt bei dem code einfach target="_blank"

Die Icons sind in den Ordner forenroot/ext/chris1278/social/styles/all/theme/images/social einzufügen.

Falls Ihr mehr Icons einfügt, kann es sein das diese mit der Searchbox überlappend. Diese müsst Ihr dann weiter nach links schieben.

Dafür öffnet Ihr die Datei:

forenroot/ext/chris1278/social/styles/prosilver/theme/social.css

Sucht dort:

Code: Alles auswählen

.social-search-header {
   border-radius: 4px;
    display: block;
    float: right;
    margin-right: 30px;
    margin-top: 30px;
}


Dort müsst ihr den Wert margin-right anpassen. Denn wert am besten um 5px schritte erhöhen bis es passt.

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

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

Beitragvon 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: 1505
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

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

Beitragvon 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: 717
Registriert: 14.05.2002 23:04
Wohnort: Köln
Kontaktdaten:

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

Beitragvon 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


Zurück zu „Extensions in Entwicklung“