[gelöst] Facebook- und Google+-Buttons auf HP einbauen --- Heise-Lösung

Deekay · 07 Februar 2012, 14:43:40

Hallo zusammen,

ich würde gerne auf der Homepage die obligatorischen "Like"- und "+1"-Buttons einbauen. Aus datenschutzrechtlichen Gründen käme da nur die Lösung von Heise.de in Frage, nämlich das jQuery-Plugin "socialShare". Zu finden ist es z.B. unter jedem Heise-Artikel: http://www.heise.de/newsticker/meldung/Bruessel-will-schaerfer-gegen-Copyrightverstoesse-im-Web-vorgehen-1429378.html

Das Skript habe ich bereits heruntergeladen und angepaßt; die fertigen Codeschnipsel sehen so aus:

Code Auswählen


<head>
  <script type="text/javascript" src="jquery.js"></script> 
  <script type="text/javascript" src="jquery.socialshareprivacy.js"></script>
  <script type="text/javascript">
    jQuery(document).ready(function($){
      if($('#socialshareprivacy').length > 0){
        $('#socialshareprivacy').socialSharePrivacy(); 
      }
    });
  </script>
</head>
<body>
    <div id="socialshareprivacy"></div>
</body>
</html>

Jetzt meine Frage: Wo baue ich den Code am sinnvollsten ein? Ich hatte zu Testzwecken in den Footer das komplette Skript als Iframe eingebunden, der dann aber riesig wurde...
Am besten fände ich es, wenn ich die Buttons unter jeden Artikel setzen könnte. Aber in die Artikel kann ich die <head>-Skriptteile ja nicht einbetten. Eventuell ins mainfile?Hat jemand eine Idee?

Danke und Gruß

Daniel

cihan · 07 Februar 2012, 15:45:40

Hallo,
der Code kommt einfach in den Header von deinem Theme... z.B.


dein Code


Und <div id="socialshareprivacy"></div> kannst du z.B. als HTML-Block einfügen.

Um die Buttons unter den Artikel anzuzeigen habe ich das einfach in /modules/News/comments.php (Zeile 58) eingefügt. Ob das eine sinnvolle Lösung ist, weiß ich nicht, aber es scheint zu funktionieren.

gruß

Deekay · 07 Februar 2012, 19:01:17

Hallo,

vielen Dank für die Antwort. Ich habe den Code nun eingebaut und bin auch in der Lage, die Buttons an jeder beliebigen Stelle (News, Footer etc.) einzublenden, allerdings gibt es noch einen Schönheitsfehler: die Beschreibungs-Popups sind immer da (s. Anhang)
Das ist natürlich unschön - habe ich evtl. etwas übersehen?

Danke und Gruß

Daniel

cihan · 07 Februar 2012, 19:43:06

OK,
das Problem hatte ich auch und habe dafür auch keine Lösung gefunden. Jedenfalls wird das "display: none" überschrieben und habe lange rumprobiert, zu finden, woran das liegt, leider ohne eine Lösung.

Ich habe dann folgendes gemacht:

.social_share_privacy_area li.help_info .info,
.social_share_privacy_area li .help_info.icon .info {
display: none !important;
position: absolute;
bottom: 40px;
left: 0;
width: 290px;
padding: 10px 15px;
margin: 0;
font-size: 12px;
line-height: 16px;
font-weight: bold;
border: 1px solid #ccc;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 3px 4px #999;
-webkit-box-shadow: 0 3px 4px #999;
box-shadow: 0 3px 4px #999;
background-color: #fdfbec;
color: #000;
z-index: 0;
}

So verschwinden die Popups, aber dafür funktioniert dann der Mouseover nicht... Ich habe mir dann so eine Notlösung gebastelt, was natürlich keine wirklich zufriedenstellende Lösung ist. Vielleicht wissen die Leute von heise.de, wie das Problem zu lösen ist.

Gruß

Deekay · 08 Februar 2012, 10:09:25

Ich habe es jetzt ähnlich gemacht: ich habe in der jquery.socialprivacy.js die vier Felder "<span class="info">" komplett gelöscht, und zwar in den Zeilen 173, 206, 234 und 254, dann sind die Mouseover-Boxen auch weg.

Vielen Dank für die Hilfe!

[gelöst] Facebook- und Google+-Buttons auf HP einbauen --- Heise-Lösung

Deekay

cihan

Deekay

cihan

Deekay