XF2.1 Werbung als Seitenbanner - wie geht das?

Nathea · 2. Sep. 2019

In unserem Forum haben wir unter XF 1.5.3 unter anderem ein Banner rechts neben der Forenansicht, das auch auf allen Forenseiten wiederzufinden ist:

Ich suche mir derzeit einen Wolf, um das unter XF 2 ähnlich hinzubekommen, habe. Mit einem einfachen "position: absolute" bekomme ich zwar ein Banner an die Seite, auf Änderungen der Browser-Breite hin gibt es unerwünschte Ergebnisse. Etwas anderes will mir partout nicht einfallen ...
Für die Werbe-Platzierungen haben wir auch schon den Ads Manager Lite erworben, der auch wirklich ein super Tool zu sein scheint. Allerdings ist auch dort diese Art von Banner nicht enthalten.

Leider kann ich den Apfeltalker, der uns seinerzeit die Werbung eingebunden hat, nicht mehr dazu befragen.

Daher würde ich mich freuen, wenn einer von Euch eine Idee dazu hat.

McAtze · 2. Sep. 2019

Ich kann mir das morgen mal in Ruhe ansehen..

Tealk · 2. Sep. 2019

Habe ich schon mal für jemanden gebastelt, aber das geht nur eben speziell für jedes Design. Kannst mir ja mal schreiben dann kann ich mir das ansehen.

McAtze · 2. Sep. 2019

Probiere das hier mal aus.

1. Template erstellen => app_naMediaAd.less

CSS:

.p-naMediaAd
{
    a { color: inherit;    }
}

.p-naMediaAd-inner
{
    max-width: @xf-pageWidthMax;
    padding: 0 @xf-pageEdgeSpacer;
    margin: 0 auto;

    padding-top: 4px;
    padding-bottom: 4px;
}

#searchBar .p-naMediaAd {
    right: 175px;
}

.naMediaAd_TOPCONTAINER {
    position: relative;
    height: 140px;
    top: 50px;
}

.naMediaAd_LOGO {
    dispaly: block;
    position: absolute;
    top: 30px;
    left: 180px;

}

.naMediaAd_SUPERBANNER {
    position: absolute;
    left: 292px; 
}

.naMediaAd_WALLPAPER .naMediaAd_SUPERBANNER {
    left: 307px; 
}

.naMediaAd_WIDE_SKYSCRAPER {
    position: absolute;
    left: 1035px; 
}

.naMediaAd_MEDIUM_RECTANGLE {
    padding-top: 8px;
}

.naMediaAd_ARTICLES {
    text-align: center;
    padding-top: 8px;
}

.naMediaAd_AD_ABOVE_CONTENT {
    padding-bottom: 10px;
}

.messageContent .funbox {
    float: right;
    padding-left: 10px;
    pading-bottom: 10px;
}



@media screen and (max-width: 1195px) {
    .pageWidth {
        padding-right: 0;
    }
    #searchBar .pageWidth {
        right: 0;
    }
}

@media screen and (max-width: 1195px) and (min-width: 800px) {
    .naMediaAd_SUPERBANNER {
        text-align: center;
    }
    .naMediaAd_WIDE_SKYSCRAPER {
        display: none;
    }
}

@media (max-width:800px) {
    .naMediaAd_TOPCONTAINER {
        display: none;
    }
    .naMediaAd_MEDIUM_RECTANGLE {
        display: none;
    }
    .naMediaAd_ARTICLES {
        display: none;
    }
}

@media (min-width:800px) {
    .naMediaAd_AD_ABOVE_CONTENT {
        display: none;
    }
}

@media (max-width:480px) {
    .naMediaAd_AD_ABOVE_CONTENT {
        display: none;
    }
}

2. Template erstellen => naMediaAd_TOPCONTAINER

Code:

<xf:css src="app_naMediaAd.less" />

<div class="p-naMediaAd">
    <div class="p-naMediaAd-inner">
        <div class="naMediaAd_TOPCONTAINER">
            <div class="naMediaAd naMediaAd_SUPERBANNER nx-container nx-container-top" data-nx-container="top" id="nx-container-top-qj1">
                <script type="text/javascript">
                    naMediaAd.includeAd("SUPERBANNER");
                </script>
                <div id="superbanner_1" class="gujAd superbanner GujAdHiddenWallpaperSlot"></div><div id="superbanner_1" class="gujAd superbanner"></div><div id="mediamind_wallpaper" style="position:absolute; top:0; left:728px;"></div><div id="superbanner_1" class="gujAd superbanner"></div><div id="superbanner_1" class="gujAd superbanner"></div><div id="superbanner_1" class="gujAd superbanner"></div><div id="superbanner_1" class="gujAd superbanner"></div></div>
            <div class="naMediaAd naMediaAd_WIDE_SKYSCRAPER nx-container nx-container-right" data-nx-container="right" id="nx-container-right-qj1">
                <script type="text/javascript">
                    naMediaAd.includeAd("WIDE_SKYSCRAPER");
                </script>
                <div id="skyscraper_1" class="gujAd skyscraper GujAdHidden"></div><div id="sitebar_anchor" style="position:absolute;"></div><div id="skyscraper_1" class="gujAd skyscraper"></div><div id="skyscraper_1" class="gujAd skyscraper"></div><div id="skyscraper_1" class="gujAd skyscraper"></div><div id="skyscraper_1" class="gujAd skyscraper"></div><div id="skyscraper_1" class="gujAd skyscraper"></div></div>
            <div class="naMediaAd_LOGO">
                <a href="http://www.planetoftech.de/" target="_blank"><img src="https://www.apfeltalk.de/community/styles/apfeltalk/tech_logos/pot_logo_RGB_all_30px_black_tr.png" alt="Planet of Tech"></a>
            </div>
        </div>
    </div>
</div>

Danach noch 2 Template Modifikationen anlegen wie auf den Bilder, damit dürfte das Grundgerüst stehen.

Tealk · 2. Sep. 2019

Was für ne API lädst du denn da nach?

McAtze · 2. Sep. 2019

Die Werbebanner werden von (früher Netzathleten) Werbeformate | MAIRDUMONT NETLETIX gestellt. Daher die JS Einbindung.

Tealk · 2. Sep. 2019

Ah ok, dachte mir schon was ich in deinem Code übersehe^^

mph · 2. Sep. 2019

Dafür kann man in XF 2.1 ein Widget mit einer Position in der Seitenleiste anlegen. Darin kann man entweder HTML- oder Javascript-Code verwenden oder XF Template-Syntax.

Tealk · 2. Sep. 2019

mph schrieb:
Dafür kann man in XF 2.1 ein Widget mit einer Position in der Seitenleiste anlegen.

Aber nicht wenn man es einfach rechts schwebend anbringen will.

otto · 3. Sep. 2019

Ist das Zauberwort nicht einfach Skyscraper ? Hab auf die Art 3 Buttons rechtsseitig schwebend untergebracht, die auch keine Probleme mit der Breite machen.
Hobby-Gartenteich

Tealk · 3. Sep. 2019

Ja ein div der an einer festen Position ist so das er sich mit bewegt.

Nathea · 3. Sep. 2019

@McAtze Also erst einmal: Respekt! Das sieht schon recht ordentlich aus. Allerdings habe ich das Snippet im 2. Foto im Page_Container nicht finden (und damit auch nicht ersetzen) können. Dennoch klappt die Platzierung der Werbung bereits so, wie wir es kennen

und uns fürs neue Layout auch wünschen.

Kleiner Makel: Unser Forenlogo (hier das Testlogo) ist verrutscht und doppelt so groß wie nötig. Die richtige Größe habe ich als Bildchen mal daneben gesetzt.

Wäre es prinzipiell auch möglich, diese Werbeplatzierungen in den AdsManager einzubinden? Die Auswert- und Einstellmöglichkeiten dort sind für einen Laien wie mich unschlagbar und ich muss auch eine "Weiche" einbinden (doer ganz leicht), die für User mit Haken an einer bestimmten Stelle im Userprofil die Werbung ausblendet.

@otto Skyscraper ist schon richtig, aber wenn ich Deine Seite nur ein wenig skaliere, sind die drei Buttons rasch komplett verschwunden.

McAtze · 3. Sep. 2019

@Nathea baut ihr bei XF2.1.3 auch wieder auf das UI.X von ThemeHouse auf? Ich kann mir das gerne mal lokal nachbauen und testen.

Nathea schrieb:
Wäre es prinzipiell auch möglich, diese Werbeplatzierungen in den AdsManager einzubinden?

Du kannst, zumindest in der großen AdsManager Version, Positionen nachbauen. Theoretisch könntest du somit auch die der Skyscraper nachrüsten.

Nathea · 3. Sep. 2019

Ja, wir benutzen wieder das UI.X von Themehouse, mit (natürlich) unseren eigenen Anpassungen. Würde es nutzen, wenn ich unser Template-Set exportiere und Dir zukommen lasse?

Das mit dem "eigene Positionen setzen" hatte ich mal ausprobiert, bin aber nicht recht schlau draus geworden. Ich habe ein Code-Schnipsel erhalten, das ich hätte in den PageContainer einbauen sollen. Da mir aber schleierhaft ist, welche Position dort das hätte sein können, habe ich diese Möglichkeit beiseite geschoben.

Vielleicht sollte ich diese Idee noch mal aufgreifen

McAtze · 3. Sep. 2019

Ich habe dir dazu mal eine PN geschickt. Den Code-Schnipsel kannst du dann so einbinden wie ich oben erklärt habe mit den Template Modifikationen.

otto · 3. Sep. 2019

Nathea schrieb:
aber wenn ich Deine Seite nur ein wenig skaliere, sind die drei Buttons rasch komplett verschwunden.

Was auch so sein soll, da sie sonst über dem Inhalt lägen oder dieser zu weit zusammen geschoben würde. Inhalte gehen bei mir vor Werbebanner.

Aber das ließe sich sehr leicht ändern, das der Skyscraper stets sichtbar bleibt. Das ist ja nun echt kein Problem.

Hier mal wie ichs gemacht hab, hab das zwar als Addon, aber da lernt ma ja nix.
Extra.CSS

CSS:

#skyscraper {
        position:absolute;
        top: 190px;
        left: 50%;
        margin-left: +700px;
        width: 80px;
        height: 66px;
        position: fixed;
}

Wie schon gesagt, leichtest anpassbar im Verhalten.

Einklinken in den PageContainer: also Suche/Ersetze mittels TMS (Suche "" und ersetze mit dem hier:

PHP:

            <!-- main content area -->

        <div id="skyscraper">
            <xen:include template="otto_Skyscraper_content" />
        </div>

Hier wird also schlicht das Template "otto_Skyscraper_content" in ein DIV includiert muss man nicht machen, aber kann man halt. Man könnte hier innerhalb des DIV Containers auch einfach nachfolgenden HTML Code direkt per TMS einsetzen lassen...

Und hier noch beispielhaft mal das eben erwähnte Template: otto_Skyscraper_content

HTML:

<img src="social_map-min.png" width="80" height="102" usemap="#Social" />
<map name="Social">
<area target="_blank" alt="Youtube" title="Hobby-Gartenteich Youtube Kanal" href="https://www.youtube.com/channel/UCd_e8L-mf-mfd7xanxOHQjw" coords="1,1,79,25" shape="rect" />
<area target="_blank" alt="Facebook" title="Hobby-Gartenteich Facebook Seite" href="https://www.facebook.com/HobbyGartenteich" coords="1,35,79,70" shape="rect" />
<area target="_blank" alt="Twitter" title="Hobby-Gartenteich Twitter Kanal" href="https://twitter.com/teichforum" coords="1,80,79,101" shape="rect" />
</map>

Auch sehr einfach - eine Image Map wird genutzt um die als png geladenen Buttons zu nutzen. Auch das geht noch einfacher als auch besser, aber so geht das jetzt sein sehr langer Zeit.

Nathea · 4. Sep. 2019

@McAtze
Das Einbinden nach Deiner Erklärung hat super geklappt!

Nun bastele ich nur noch an dem Platzieren im AdsManager. Die für die "Sonderplatzierung" vom AdsManager erzeugte Syntax habe ich wie beschrieben eingebunden, erhalte nun aber anstelle der Banner folgende Fehlermeldung:

Das Template helper_js.global, das Du auch weiter oben in Deinem Tipp beschrieben hast und das ich anpassen sollte, hatte ich in meinen Templates allerdings nicht finden können. Nun scheint es für meine Pläne essentiell zu sein

Und ein optisches Problem würde ich auch noch gern lösen: Unser Forenlogo sollte, wenn irgendwie möglich, neben der Werbung stehen, nicht darunter. Gibt es dazu vielleicht auch Ideen?

Dankeschön allen Helfern, Ihr seid echt super :inlove:

Nathea · 6. Sep. 2019

Alles geklärt, habe die helper_js_global auch gefunden, korrigiert und nun läuft die Werbung, wie sie soll. Manchmal hilft etwas Abstand und nochmaliges Drübergucken, um Schreibfehler zu entdecken

XF2.1 Werbung als Seitenbanner - wie geht das?

Nathea

Mitglied

McAtze

Administrator

Tealk

Bekanntes Mitglied

McAtze

Administrator

Anhänge

Tealk

Bekanntes Mitglied

McAtze

Administrator

Tealk

Bekanntes Mitglied

mph

Bekanntes Mitglied

Tealk

Bekanntes Mitglied

otto

Die 5k-Labertasche

Tealk

Bekanntes Mitglied

Nathea

Mitglied

McAtze

Administrator

Nathea

Mitglied

McAtze

Administrator

otto

Die 5k-Labertasche

Nathea

Mitglied

Nathea

Mitglied

Wir schützen deine Privatsphäre