[Frage] Shariff (heise) einbinden

  • Schwerus Schwerus
    R2-D2
    0 x
    105 Beiträge
    0 Hilfreiche Beiträge
    29. 01. 2015, 20:36

    Hallo Leute!

    Der Versuch, die sicher(er)en Buttons von Facebook, google+ & Co einzubinden, wie hier beschrieben

    [url]www.heise.de/ct/artikel/Shariff-Social-Media-Buttons-mit-Datenschutz-2467514.html[/url]
    bzw. die "Anleitung"
    [url]https://github.com/heiseonline/shariff[/url]

    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

    1. [globalVar = TSFE:id=3]
    2. ### SHARIF
    3. page.includeJS.file9 = fileadmin/template/tmplcss/shariff.min.js
    4. page.includeCSS.file9 = fileadmin/template/tmplcss/shariff.min.css
    5. page.includeCSS.file9.title = Screen
    6. page.includeCSS.file9.media = screen, projection
    7. [global]

    eingebunden und erscheinen auch korrekt im header:
    1. <link rel="stylesheet" type="text/css" href="fileadmin/template/tmplcss/shariff.min.css?1422539546" media="screen, projection" title="Screen" />
    2. <script src="/jquery-.js?1414160843" type="text/javascript"></script>
    3. <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

    1. 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

    Projekt mit der größten Brüller-Dichte: http://www.thedailyschwerus.com - natürlich inkl. eigener Templates für Smartphones

    - Der Vollständigkeit halber: "Certified TYPO3 Integrator"


  • 1
  • Norman2k Norman2k
    Jedi-General
    0 x
    1657 Beiträge
    80 Hilfreiche Beiträge
    03. 02. 2015, 09:45

    Oder man muss sich die Anleitung einfach nur genau durchlesen!

    2. Include CSS in <head>:
    build/shariff.complete.css [b]contains all dependencies[/b]
    use build/shariff.min.css, [b]if Font Awesome is already included in your site[/b]

    Wahrscheinlich ist "Font Awesome" nicht oder nicht korrekt in deine Seite integriert, damit werden dann nämlich die Icons gerendert

  • Schwerus Schwerus
    R2-D2
    0 x
    105 Beiträge
    0 Hilfreiche Beiträge
    04. 02. 2015, 12:25

    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

    Projekt mit der größten Brüller-Dichte: http://www.thedailyschwerus.com - natürlich inkl. eigener Templates für Smartphones

    - Der Vollständigkeit halber: "Certified TYPO3 Integrator"

  • 7zeichen 7zeichen
    Jar Jar Binks
    0 x
    1 Beiträge
    0 Hilfreiche Beiträge
    05. 02. 2015, 17:10

    Hallo Schwerus,

    1. <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:

    1. <!-- immediately before </body> -->
    2. <script src="/path/to/shariff.min.js"></script>
    3. </body>

    Viele Grüße

  • Chrissli Chrissli
    Jedi-General
    0 x
    1016 Beiträge
    28 Hilfreiche Beiträge
    06. 02. 2015, 08:19

    Bevor du fragst:
    [url]http://www.typo3.net/forum/thematik/zeige/thema/106732/[/url]

    God's in his heaven, all's right with the world

  • Norman2k Norman2k
    Jedi-General
    0 x
    1657 Beiträge
    80 Hilfreiche Beiträge
    06. 02. 2015, 10:27

    Zitiert von: Schwerus
    Der 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 ;)

  • Schwerus Schwerus
    R2-D2
    0 x
    105 Beiträge
    0 Hilfreiche Beiträge
    06. 02. 2015, 13:00

    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
    [b]NICHT[/b]
    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

    Projekt mit der größten Brüller-Dichte: http://www.thedailyschwerus.com - natürlich inkl. eigener Templates für Smartphones

    - Der Vollständigkeit halber: "Certified TYPO3 Integrator"

  • calien calien
    T3PO
    0 x
    9 Beiträge
    0 Hilfreiche Beiträge
    24. 02. 2015, 14:26

    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.

  • Schwerus Schwerus
    R2-D2
    0 x
    105 Beiträge
    0 Hilfreiche Beiträge
    04. 03. 2015, 14:50

    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 http://www.thedailyschwerus.com

    HF!

    ;)

    Projekt mit der größten Brüller-Dichte: http://www.thedailyschwerus.com - natürlich inkl. eigener Templates für Smartphones

    - Der Vollständigkeit halber: "Certified TYPO3 Integrator"

  • aqtode aqtode
    Jar Jar Binks
    0 x
    1 Beiträge
    0 Hilfreiche Beiträge
    05. 12. 2016, 14:27

    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:

    1. <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" />
    2. </html>

    und erhalte im Quelltext folgenden Code:

    1. <html > <div data-url="http://xxx.xxx.de" data-backend-url="http://xxx.xxx.de/seite-empfehlen/?eID=shariff" data-services="[&quot;googleplus&quot;,&quot;facebook&quot;,&quot;xing&quot;,&quot;linkedin&quot;]" 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!

  • 1