Click2Tweets im Blog einbauen

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

click2tweet

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.



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

Kommentare

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

    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

      Ahhhhhhh – danke – gleich ge√§ndert :-) … Wenn man schon seinen eigenen Twitternamen falsch schreibt…tststsssss

  2. Birgit 1. Februar 2016 um 12:29

    … 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

    … 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

      Bingo! Das ist dann die DeLuxe-Version :-)

Das könnte dich auch interessieren:






  • About

    aboutHallo, ich heiße Mirjam Schrepler und setze als freiberufliche Grafikerin mit einem wunderbaren Netzwerk Internetseiten und ganzheitliche Marketingprojekte um.

    Auf der Ideenlounge blogge ich √ľber die vielen kleinen Dinge, mit denen ihr euren Blog optisch aufh√ľbschen k√∂nnt.

    Ich liebe Wordpress und schlanken Quellcode - und es ist erstaunlich, wie einfach und schnell man viele Plugins durch ein kleines bisschen Quellcode ersetzen kann.

    Tragt euch einfach in den Ideenlounge Style-Club-Newsletter ein, und ihr erhaltet die besten Tipps regelmäßig per Mail.

  • Tolle Insider-Tipps zum Stylen deines Wordpress Content!

    Trage dich einfach in unseren Mailverteiler ein und erhalte das Plugin WGIN-Styles mit dem nächsten Newsletter for free


  • Die 1 Cent pro Klick Formel
  • News von Facebook

  • Basics (3)
    Wie binde ich ein eigenes CSS ein und wie funktioniert das mit dem Childtheme.
  • Code-Schnipsel zum Copy&Paste (14)
    N√ľtzliche CSS-, PHP-, und Javascript-Code-Snippets zum direkten Einbau in euer WP-Theme.
  • Freebies (4)
    Kostenlose Downloads - Icons, Grafiken, Hintergr√ľnde, Plugins und vieles mehr.
  • Lesenswertes (1)
    Immer wieder sto√üe ich auf interessante Blogs, Webseiten oder B√ľcher - analog und digital - hier meine Favoriten.
  • Blogvorstellungen (1)
    Blogs, deren Design mich einfach umhaut....
  • Ressourcen (1)
    N√ľtzliche Online-Tools, Bildarchive und Code-Generatoren die euch als Blogger den Bloggeralltag erleichtern.
  • Reste-Ecke (7)
    Alles, was nicht wo wirklich in einer der anderen Kategorien passt.
  • Specials (1)
  • Blogverzeichnis - Bloggerei.de
  • FuZo-News per Mail abonnieren Folgt der Ideenlounge auf Facebook. RSS Feed