Click2Tweets im Blog einbauen

Zitate zum Twittern auf dem eigenen Blog per Shortcode einbauen – ganz einfach und ganz ohne Plugin.

Aktuell launche ich das Portal www.fuZo-marketing.de. Und dort habe ich einige Schmankerl eingebaut, die ich euch nicht vorenthalten möchte. Im ersten Part zeige ich euch, wie man sogenannte Click2Tweet-Zitate ganz ohne Plugin einbauen kann.

Was bedeutet Click2Tweet

Ihr habe einen schönen Spruch, eine tolle Headline oder eine sonstige Weisheit? Perfekt – dann könnt ihr euren Lesern anbieten, diesen per Klick auf ihrem Twitter-Account zu tweeten.

Hier ein Beispiel, wie das aussehen kann:

Zitieren geht über Studieren
Die Ideenlounge
click & tweet

So einfach bekommt ihr euren persönlichen Click2Tweet Shortcode:

  1. Vorbereitung in der functions.php:
    //Click2Tweet
    function tweetlink( $atts ) {extract( shortcode_atts( array(
     'zitat' => 0,
     'autor' => 0
     ), $atts ) );return '<a href="http://twitter.com/home?status='. $zitat.' %7C ' . $autor.' %7C via @FuZoMarketing" target="_blank" class="click2tweet">'. $zitat . '<div class="zusatz">'. $autor . '</div><div class="tweetzusatz">click & tweet</div></a>';
    }
    add_shortcode( 'tweet', 'tweetlink' );

    Den roten Text ersetzt ihr mit eurem Twitternamen. Den grünen Text könnt ihr mit einem Textschnipsel eurer Wahl anpassen.

  2. Dann hübschen wir unser Zitat optisch noch ein bisschen auf. Hier die Beispiel CSS zum Copy & Paste für eure style.css:
    a.click2tweet {display:block; background-color:#494f5a; color:#fff; font-size:28px; padding:10px; padding-top:30px; text-align:center; text-decoration:none; font-weight:100; line-height:160%; margin-top:30px; margin-bottom:30px;}
    
    a.click2tweet div {font-size:14px; color:#e0d6d4; }
    
    a.click2tweet:hover div {font-size:14px; color:#ddd; }
    
    a.click2tweet div.tweetzusatz {text-align:right}
    
    a.click2tweet:hover {color:#494f5a; background-color: #e0d6d4}

    Ihr könnt die Farben eures Click2Tweet Codes nach Belieben ändern. Unter Umständen müsst ihr je nach Theme auch an den Abständen noch ein bisschen tunen. Deshalb habe ich diese auch mal rot hervorgehoben.

  3. Und schon könnt ihr überall in euren Beiträgen munter tolle Sprüche verteilen und zum tweeten anbieten:
    [tweet zitat="Zitieren geht über Studieren" autor="Die Ideenlounge"]

    Der Autor ist in diesem Fall optional und kann auch einfach leer gelassen werden.

Also, ich wünsche euch viel Spaß und viele Tweets mit diesem kleinen aber feinen Codeschnipsel.

[- – – – Trennlinie – – – -]
PS: … und wer meinem Fußgängerzonenprojekt auf Twitter folgen möchte … hier findet ihr mich:
https://twitter.com/FuZoMarketing
[- – – – Trennlinie – – – -]

Kommentare

  1. Tina Gallinaro 1. Februar 2016 um 11:00 Uhr

    Toll gemacht – vielen Dank.
    Dann werde ich mich mal etwas näher mit der Funktion auseinander setzen.
    Allerdings ist mir beim Teilen des ClickToTweet etwas aufgefallen. Der Twitter Name ist nicht richtig eingebunden. Es erscheint: „Zitieren geht über Studieren | Die Ideenlounge| via @FuZo_Marketing“ Den Twitter Namen „FuZo_Marketing“ gibt es nicht , @fuzomarketing aber schon 🙂 🙂
    LG Tina

    • coloritas 1. Februar 2016 um 13:24 Uhr

      Ahhhhhhh – danke – gleich geändert 🙂 … Wenn man schon seinen eigenen Twitternamen falsch schreibt…tststsssss

  2. Birgit 1. Februar 2016 um 12:29 Uhr

    … und wieder ein Plugin eingespart 😉
    Danke für den Tipp! Ich als … ähm … Pluginsammlerin bin immer dankbar, wenn ich wieder mal eines einsparen kann 🙂 Werde ich heute nachmittag gleich mal einbauen …

  3. Birgit 1. Februar 2016 um 12:32 Uhr

    … und statt dem „tweet-zusatz“ könnte man dann doch auch das Vögelchen von FontAwesome einbinden, wenn FontAwesome eh auf der Seite verwendet wird, oder?

    • coloritas 1. Februar 2016 um 13:25 Uhr

      Bingo! Das ist dann die DeLuxe-Version 🙂

Die Ideenlounge macht Pause, daher sind aktuell keine neuen KOmmentare möglich. Folgt mir auf Facebook, dann erfahrt ihr, wann es weiter geht.

Das könnte dich auch interessieren:



  • Folgt der Ideenlounge auf Facebook. RSS Feed
    Ja, auch diese Webseite verwendet Cookies. Hier erfahrt ihr alles zum Datenschutz