Social Bookmarks einbinden – Twitter, Facebook, Xing, Google Plus One – ohne Plugin – WordPress

Social Bookmarks

Links zu sozialen Netzwerken können in WordPress auch ohne Plugins eingerichtet werden.

Zunächst diese Bilder speichern (rechte Maustaste) und in den Ordner „uploads“ hochladen.

Twitter Facebook Xing

HTML

In der single.php diesen HTML-Code unter dem Artikel einfügen (innerhalb des divs „post“, aber außerhalb des Loops):

<ul class="clearfix sbm">
<li><a href="http://twitter.com/home?status=<?php the_permalink(); ?>" title="Twittern!"><img src="/wordpress/webdesign/twitter.png" alt="Twitter" width="16" height="16" />Twitter</a></li>
<li><a href="http://www.facebook.com/share.php?u=<?php echo rawurlencode(get_permalink()) ?>&amp;t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" title="Auf Facebook posten"><img src="/wordpress/webdesign/facebook.png" alt="Facebook" width="16" height="16" />Facebook</a></li>
<li><a href="http://www.xing.com/app/user?op=share;url=<?php echo urlencode(get_permalink($post->ID)); ?>;title=<?php echo urlencode(get_the_title()); ?>;provider=<?php echo urlencode(get_bloginfo(’name‘)); ?>" title="XING-Kontakten zeigen"><img src="/wordpress/webdesign/xing.png" alt="Xing" width="16" height="16" />Xing</a></li>
<li><g:plusone></g:plusone></li>
</ul>

CSS

Die style.css um folgende Zeilen ergänzen:

#content div.post ul.sbm{margin:15px 0}
#content div.post ul.sbm li{background-image:none;display:inline;float:left;line-height:1em;margin:0 15px 0 0;padding:0;width:auto}
#content div.post ul.sbm li a, #content div.post ul.sbm li a:hover{background:#f7f7f7;border:1px solid #ccc;color:#3B5998;display:block;float:left;padding:2px 5px;text-decoration:none;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px}
#content div.post ul.sbm li a:hover{background:#fff;color:#333}
#content div.post ul.sbm li a img, #content div.post ul.sbm li a:hover img{float:left;margin:0 5px 0 0; width:16px}

Google Plus One Button einbinden

Dieses Tag in den Head-Bereich oder – meine Empfehlung – direkt vor dem schließenden body-Tag (</body>) einfügen:

<?php if(is_single()) echo '<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: "de"} </script>'; ?>

Weitere Infos zum Google Plus One Button: http://www.google.com/webmasters/+1/button/

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (5 votes, average: 4,40 out of 5)
Loading...

Weitere Artikel aus dieser Kategorie


5 Kommentare zu diesem Artikel bisher »

Kommentare zu »Social Bookmarks einbinden – Twitter, Facebook, Xing, Google Plus One – ohne Plugin – WordPress«

  1. Hallo,

    verstehe ehrlich gesagt nicht ganz den Vorteil die Twitter- und Facebook-Buttons auf diesem Weg selbst zu „basteln“ anstatt einfach das jeweiligen Widget von Twitter bzw. Facebook zu nutzen.

    Beste Grüße
    Andreas

  2. Weil insbesondere das Facebook-Plugin z.Z. in der Datenschutz-Kritik steht. Siehe z.B. http://rechtzweinull.de/index.php?/archives/173-Facebook-Datenschutz-Erste-Abmahnungen-wegen-Einbindung-des-Facebook-Like-Buttons.html
    Außerdem verzichte ich möglichst auf Plugins, wenn ich Funktionen nicht auch selbst/einfacher einrichten kann :-)

  3. 1+ nach W3C-Norm einbinden:


    var addthis_config = {„data_track_clickback“:true};

    <!—->
     

  4. CI…

    Header-Bilder für die Facebook-Chronik – Webdesign – Oldenburg – Bremen – Internetagentur – Homepage – WordPress-CMS…

Kommentieren

Erlaubtes XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>