ich habe nun nach langem tüfteln eine erste lauffähige Version des Articlesystem-Moduls hinbekommen, die zwei Features mitbringt:
1. Socialmedia-Integration
2. Bildergalerie mit Lightbox-Effekt
Zur Einbindung in euer bestehendes System ist folgendes zu beachten: Es handelt sich hierbei lediglich um Codeanpassungen innerhalb des Ausgabemoduls! Insofern soll dies nur als Anregung betrachtet werden, diese Funktionen von einem erfahrenen Programmierer oder Modulschreiber mal zu übernehmen. Funktionieren tut die Sache einwandfrei!
Was habe ich integriert und wie gelingt ein dynamischer URL-Abruf in jedem einzelnen Article?
Für die Integration von Facebook "Share" und "Like" Button muss folgender Code in den <body> des betreffenden Layouts, am besten direkt an den Anfang des <body>, damit der Codescnippsel nicht verloren geht:
QUELLTEXT
<!-- Facebook Rooting -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Ende Facebook Rooting -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Ende Facebook Rooting -->
Um nun auch die Buttons in jedem Artikel anzuzeigen, habe ich im Modul ins Ausgabemodul folgende Codeschnippsel integriert:
Den "Twittern"-Button: Er muss nur noch im bereich data-via="deinTWITTERNAME" um deinen Twitteraccountname verändert werden!
QUELLTEXT
<a href="https://twitter.com/share" class="twitter-share-button" data-via="deinTWITTERNAME" data-lang="de">Twittern</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
Und den "Gefäll mir" + "Teilen"-Button. ACHTUNG: Dabei dient der angehängte Java-Code der Generierung der jeweils gültigen URL des betreffenden Artikels. Ohne diesen Java-Anhang, wird nur die Haupt-URL der Seite genutzt! Er muss nur noch im bereich data-href="deinDOMAIN" um deine Hauptdomain verändert werden!
QUELLTEXT
<div class="fb-like" data-href="http://deineDOMAIN.de" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
<script type="text/javascript">
var sUrl = window.location.href;
document.getElementById('fb2').setAttribute('href', sUrl.replace("http://www.", "http://"));
</script>
<script type="text/javascript">
var sUrl = window.location.href;
document.getElementById('fb2').setAttribute('href', sUrl.replace("http://www.", "http://"));
</script>
Der Rest der Veränderungen sollte sich selbst erklären... .
Sobald man mehr als 4 Bilder für den Artikel vorsieht, wird eine Bildergalerie angehängt und die Schriftzeile "Weitere Bilder" vorangestellt. Man kann in meinem generierten Beispiel bis zu 59 Bilder zum Artikel einstellen... . Das sollte reichen.
Viel Spaß damit!
ACHTUNG: Das Plugin des Articlesytems 1.7.4 ganz normal installieren und im Anschluss die .cmsmod im Bereich Module ersetzen!
