TypoScript Share

Wer beginnt in seinen Blog die vorgefertigten API's der zahlreichen Sharing- / Bookmarkdienste einzupflegen, wird schnell feststellen, das von Facebook, Twitter, Google und Co. jede Menge an Code geliefert wird, obwohl man nur einen Share-Link haben möchte. U.u. wird damit die eigene Seite unnötig aufgebläht und verlangsamt. Um diesen Umstand zu vermeiden, gibt es dieses kleine Social Share TypoScript Snippet, welches einen Sharing-Link generiert, auf den der Besucher klicken kann, um einen Artikel zu teilen.

# google
lib.shareLinks_google = TEXT
lib.shareLinks_google {
  wrap = <li>|</li>
  innerWrap = <span class="sprite sprite-share_google"></span><span class="sr-only">|</span>
  value = Share on Google Plus
  typolink {
    title = Share on Google Plus
    ATagParams = class="share_google"
    parameter.cObject = COA
    parameter.cObject {
      10 = TEXT
      10.dataWrap = https://plus.google.com/share?url={$lib.baseURL}|
      10.typolink.parameter.data = TSFE:id
      10.typolink.returnLast = url
      10.typolink.addQueryString = 1
      10.typolink.addQueryString.exclude = id
    }
  }
}

# twitter
lib.shareLinks_twitter = TEXT
lib.shareLinks_twitter {
  wrap = <li>|</li>
  innerWrap = <span class="sprite sprite-share_twitter"></span><span class="sr-only">|</span>
  value = Share on Twitter
  typolink {
    title = Share on Twitter
    ATagParams = class="share_twitter"
    parameter.cObject = COA
    parameter.cObject {
      10 = TEXT
      10.dataWrap = https://twitter.com/share|?
      20 = TEXT
      20.data = page:title
      20.wrap = text=|
      20.rawUrlEncode = 1
    }
  }
}

# main social share lib
lib.shareLinks = COA
lib.shareLinks {
  wrap = <ul class="shareLinks">|</ul>
  10 < lib.shareLinks_google
  20 < lib.shareLinks_twitter
}

Die beiden TypoScript Sharelinks für Twitter und Google, können beliebig erweitert werden, um z.B. eine Facebook-Button oder andere Bookmarkdienste abzubilden. In den "Extra Infos" gibt es dazu nützliche Informationen und Tools.

CSS Sprite sheets mit Stitches An HTML5 sprite sheet generator. Iconset "Miu square shadow social" und andere kostenlose Icons bei Iconfinder. Crunchify Blog: List of Social Sharing URLs for Handy Reference – Social Media Sharing Buttons Without JavaScript. Typoscript Snippet: Share page on Facebook, Twitter or mail in typoscript.