Hallo Leute!
Der Versuch, die sicher(er)en Buttons von Facebook, google+ & Co einzubinden, wie hier beschrieben
http://www.heise.de/ct/artikel/Shariff-Social-Media-Buttons-mit-Datenschutz-2467514.html
bzw. die "Anleitung"
https://github.com/heiseonline/shariff
beschrieben, will nicht recht klappen... scheint wieder mal ein Problem der Marke "je kürzer die Anleitung, desto weniger funxt's" zu sein.
Jedenfalls gibt es nur den Schriftzug zu sehen, von Icons keine Spur.
Die .css und .js sind über
[globalVar = TSFE:id=3]
### SHARIF
page.includeJS.file9 = fileadmin/template/tmplcss/shariff.min.js
page.includeCSS.file9 = fileadmin/template/tmplcss/shariff.min.css
page.includeCSS.file9.title = Screen
page.includeCSS.file9.media = screen, projection
[global]
eingebunden und erscheinen auch korrekt im header:
<link rel="stylesheet" type="text/css" href="fileadmin/template/tmplcss/shariff.min.css?1422539546" media="screen, projection" title="Screen" />
<script src="/jquery-.js?1414160843" type="text/javascript"></script>
<script src="fileadmin/template/tmplcss/shariff.min.js?1422539546" type="text/javascript"></script>
Jquery kommt (sicher) aus der gleichnamigen Extension, die ebenfalls läuft
Um Fehler hier auszuschließen, hatte ich auch die compressed library manuell eingebunden
und die Extension testweise deaktiviert - gleiches Ergebnis
page.includeJS.file8 = fileadmin/template/tmplcss/jquery-1.11.2.min.js
Offensichtlich beschäftigt sich niemand damit (Google-Suche erbringt fast keine Treffer), oder es ist zu einfach und funxt überall sofort, keine Ahnung - wäre für Inspiration dankbar!
Grüßle
Schwerus
Aktuell läuft das noch unveröffentliche Projekt unter T3 4.5.39
Oder man muss sich die Anleitung einfach nur genau durchlesen!
2. Include CSS in <head>:
build/shariff.complete.css contains all dependencies
use build/shariff.min.css, if Font Awesome is already included in your site
Wahrscheinlich ist "Font Awesome" nicht oder nicht korrekt in deine Seite integriert, damit werden dann nämlich die Icons gerendert
Joh - dank für die Antwort!
Der Abschnitt "Oder man muss sich die Anleitung einfach nur genau durchlesen!" war besonders hilfreich :p
Mein Fehler - ich hätte noch reinschreiben sollen, dass ich beide Versionen ausprobiert hatte...
Grüßle
P.S.: In den ersten Link hat sich übrigens ein typo3.net eingeschlichen, korrekt heißt er:
http://www.heise.de/ct/artikel/Shariff-Social-Media-Buttons-mit-Datenschutz-2467514.html
bzw. der zugehörige Permalink der c't:
http://heise.de/-2467514
Hallo Schwerus,
<script src="fileadmin/template/tmplcss/shariff.min.js?1422539546" type="text/javascript"></script>
darf nicht im <head> eingebunden werden, sondern soll unmittelbar vor dem schließenden <body> eingebunden werden. Die Shariff-Doku sagt:
<!-- immediately before </body> -->
<script src="/path/to/shariff.min.js"></script>
</body>
Viele Grüße
Schwerus schriebDer Abschnitt "Oder man muss sich die Anleitung einfach nur genau durchlesen!" war besonders hilfreich :p
Naja, bei Kommentaren wie "scheint wieder mal ein Problem der Marke "je kürzer die Anleitung, desto weniger funxt's" zu sein" oder "Offensichtlich beschäftigt sich niemand damit" kann ich mir so einen Kommentar nicht verkneifen 😉
hehe! 😉
Zu Punkt 1 stehe ich! (jahrelange Erfahrung *sigh*)
Allerdings lernt man auch wesentlich mehr, wenn man nicht alles vorgekaut bekommt.
Punkt 2 hatte ich ja begründet (googlemäßig), zum - eingeengten - Thema "Shariff findet sich tatsächlich nix/kaum etwas, ab der 10ten Stelle kommen die Ergebnisse zu Nachnamen orientalerweis'...
Ich hatte es inzwischen hingekriegt auf nem ähnlichen Wege, Knackpunkt war tatsächlich:
" <!-- immediately before </body> --> "
Auf normalen Wege, wie ich Scripte sonst einband, gehts nicht. Wie beschrieben (über page.metadata oder includeLibs)
Interessant der Ansatz von Chrissli, page.footerData ist mir vor Jahren mal untergekommen, war aber nicht im oberen Hirnbereich gespeichert.
Die Lösung heißt
a) page.includeJSFooterlibs für die sharif.min.js
b) jQuery per includeJS (OHNE FOOTER) manuell separat einbinden (mit der jQ-Extension funxts net)
Dann werden die Links erzeugt.
Das (IMHO total behirnte) Einbinden einer externen Schriftart über die shariff.css (Wingdings in Modern soz.) zur Erzeugung der Social-Media-Icons funxt
NICHT
bzw. sieht in jeden Browser anders aus:
IE8: NULL Icon
FF aktuell: Die üblichen "ich find die Zeichen nicht" Platzhalter
Nur in Chrome gehts auf Anhieb.
Lösung hier: CSS umschreiben und eigene Grafiken einbinden + font-style für die Texte, externen Font weglassen.
Ich hoffe, ich hab mich verständlich ausgedrückt, hab grade einiges um die Ohren hier...
Sobald die Seite scharfgestellt ist, poste ich sie hier, dann könnt Ihr's Euch angucken.
LG
Schwerus
Zum Thema Fonts per CSS:
Der Vorschlag von heise, die shariff.min.css einzubinden, wenn man die fontAwesome schon selbst lädt, ist eher unpraktisch.
Ich habe jetzt die shariff.complete.css eingebunden und in meiner CSS-Datei die FontAwesome vom eigenen Server eingebunden und es funktioniert.
Firefox hat ja leider Probleme, Fonts von externen Servern zu laden. IE8 wird allerdings jetzt mal gekonnt ignoriert, sollte aber an sich auch funktionieren, wenn die FOnts korrekt inkl. ie-fix eingebunden sind.
Joh - vielen Dank! Da war ich zwischenzeitlich auch drauf gestoßen, hatte es schon über die Icons per CSS gelöst, so wie oben beschrieben
Zu sehen übrigens hier www.thedailyschwerus.com
HF!
😉
Hallo zusammen,
ich versuche die Erweiterung zu installieren - leider bisher ohne Erfolg ;-( Habe die Erweiterung installiert und in den Einstellungen folgendes stehen:
basic.services: GooglePlus, Facebook, Xing, LinkedIn
basic.ttl: 3600
basic.allowedDomains: SERVER_NAME
facebook ID und secret sind auch eingetragen.
Im Root Template ist "Shariff: Plugin settings, FE styles incl. Font-Awesome but no jQuery" eingebunden.
Im Template binde ich die Buttons via Fluid view helper ein:
<html xmlns:rx="http://typo3.org/ns/Reelworx/RxShariff/ViewHelper"><rx:shariff data="{url: 'http://xxx.xxx.de'}" services="googleplus,facebook,xing,linkedin" enableBackend="true" />
</html>
und erhalte im Quelltext folgenden Code:
<html > <div data-url="http://xxx.xxx.de" data-backend-url="http://xxx.xxx.de/seite-empfehlen/?eID=shariff" data-services="["googleplus","facebook","xing","linkedin"]" data-lang="de" class="shariff"></div> </html>
Leider gibt es folgende Probleme:
1. Die Counter von Xing und LinkedIn funktionieren nicht.
2. Es wird immer nur die Startseite der Webseite geteilt und nicht die Seite die man teilen will.
Ich verwende Typo3 7.6.9, rx_shariff 9.0.1, PHP: 5.6.23
Weiß jemand Rat! Vielen dank!
