Zur Navigation

jQuery Plugin "Sharre" für indiv. Facebook-Buttons in Wordpress

1 Finn

Hallo Jörg,

ich bin wieder mal dabei, diese Website umzubauen. Sie ist auf Wordpress-Basis, d.h. es gibt zwar massig Plugins dafür, die man ganz einfach per Klick einbinden kann, aber mit JQuery-Plugins ist das so eine Sache.

Ziel ist ein Facebook-Button, der nicht so aussieht wie der klassische von FB, also zum Design der Seite passt.

Das JQuery-Plugin, welches "ganz einfach" einzubinden ist und dies über CSS möglich machen würde, heißt Sharre,

Auf normalen HTML-Seiten wäre die Einbindung nicht so ein Problem, aber bei Wordpress tu ich mich etwas schwer. Es gibt zwar diverse Tutorials (wie das hier, aber so ganz erschließt es sich mir noch nicht.

Vielleicht hast du eine Idee, ich weiß, es ist (zumindest für mich) ein ziemlich komplexes Thema. O.g. Tutorial verstehe ich so, dass ich

<?php wp_enqueue_script("jquery"); ?> 


in die header.php des Wordpress-Themes einbinden muß und dann

<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/yourScript.js"></script>

nach der
<?php wp_head(); ?> 
- Funktion aufrufe.

Problem ist dabei, dass der Aufruf über "$" in Wordpress angeblich nicht funktioniert und man dies durch einen Umweg "maskieren" muß, andere sagen wieder, er funktioniere doch (z.B. hier).

Hauptfragen für mich momentan:

1. Welches von den Pluginfiles (jquery.sharrre-1.3.4.js bzw. jquery.sharrre-1.3.4.min.js ), die ich in den Wordpress-Root-JS-Folder hochgeladen habe, muß ich ansprechen? Das wäre für mich der oben fettgedruckte Codeteil ?>/js/yourScript.js"

2. und wie passt das mit der "Simple integration" zusammen, die der Programmierer des Plugins mir liefert, hier unter "Demos". Jeweils ein HTML-Teil, ein Javascript und ein CSS.

Der HTML-Teil käme ja z.B. in die Footer.php des Themes, dort, wo ich den Button hinhaben möchte.
Den Javascript-Teil verstehe ich nicht (v.a. wie er mit der generellen JQuery-Einbindung in WP zusammenpasst)
CSS ist klar.

Sorry für den Roman, aber vielleicht siehst ja du oder sonst ein Javascript-Genie hier einen Silberstreif am Horizont...

Danke & Gruss
Finn

25.01.2013 11:20

2 Jörg

1. Welches von den Pluginfiles (jquery.sharrre-1.3.4.js bzw. jquery.sharrre-1.3.4.min.js ), die ich in den Wordpress-Root-JS-Folder hochgeladen habe, muß ich ansprechen? Das wäre für mich der oben fettgedruckte Codeteil ?>/js/yourScript.js"

Die .min.js ist die komprimierte Datei, die weniger Ladezeit erzeugt.

2. und wie passt das mit der "Simple integration" zusammen, die der Programmierer des Plugins mir liefert, hier unter "Demos". Jeweils ein HTML-Teil, ein Javascript und ein CSS.

Den JavaScript-Teil fügst du in eine Datei ein, z.B. 'mein-script.js', die du im selben Verzeichnis wie die jquery.sharrre-1.3.4.min.js platzierst:

jQuery(document).ready(function( $ ) { 

  $('#demo1').sharrre({
    share: {
      googlePlus: true,
      facebook: true,
      twitter: true
    },  
    buttons: {
      googlePlus: {size: 'tall'},
      facebook: {layout: 'box_count'},
      twitter: {count: 'vertical', via: '_JulienH'}
    },  
    hover: function(api, options){
      $(api.element).find('.buttons').show();
    },  
    hide: function(api, options){
      $(api.element).find('.buttons').hide();
    },  
    enableTracking: true
  }); 

});

Wichtig ist, dass im HTML-Code zuerst die beiden jquery Dateien eingebunden werden und erst dann die 'mein-script.js'

<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.sharrre-1.3.4.min.js"></script>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/mein-script.js"></script>

25.01.2013 12:15 | geändert: 25.01.2013 12:17

3 Finn

Danke!

Muß ich die "mein-script.js'"-Datei auch erstellen, wenn ich das Ganze in eine php einbinde und nicht in eine html? Bei Wordpress gibt es ja in der Form keine HTML-Dateien.

Muß ich dann quasi folgende Schritte durchlaufen:

1. Ich mache eine "mein-script.js"-Datei, worin der von Dir o.g. Code enthalten ist, der kommt in den Ordner der jquery.sharrre-1.3.4.min.js -Datei


2. In die header.php binde ich das Jquery-Plugin ein also
<?php wp_enqueue_script("jquery"); ?>  
und danach
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/yourScript.js"></script>

wobei /js/yourScript.js die "mein-script.js"-Datei ist? Oder bezieht sich /js/yourScript.js auf jquery.sharrre-1.3.4.min.js ?


3. den in der Plugin-Demo angesprochenen HTML-Teil packe ich in die php, wo der Button erscheinen soll, also z.B. in dier footer.php?

<div id="demo1" data-url="http://sharrre.com" data-text="Make your sharing widget with Sharrre (jQuery Plugin)" data-title="share"></div>

4. passe die CSS an

Nur damit ich mal die groben Schritte zusammenbekomme. Ich könnte ja auch den Standard-Button nehmen, aber das geht sich nicht mit meinen Designvorstellungen zusammen (stur halt ;))

Danke, Finn

25.01.2013 13:04

4 Jörg

Zitat von Finn
Muß ich die "mein-script.js'"-Datei auch erstellen, wenn ich das Ganze in eine php einbinde und nicht in eine html? Bei Wordpress gibt es ja in der Form keine HTML-Dateien.

In den PHP-Dateien des Templates steht auch HTML-Code, bzw. wird HTM-Code ausgegeben.

Muß ich dann quasi folgende Schritte durchlaufen:

1. Ich mache eine "mein-script.js"-Datei, worin der von Dir o.g. Code enthalten ist, der kommt in den Ordner der jquery.sharrre-1.3.4.min.js -Datei


2. In die header.php binde ich das Jquery-Plugin ein also
<?php wp_enqueue_script("jquery"); ?>  
und danach
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/yourScript.js"></script>

wobei /js/yourScript.js die "mein-script.js"-Datei ist? Oder bezieht sich /js/yourScript.js auf jquery.sharrre-1.3.4.min.js ?

Auf beide. In der Reihenfolge, die ich in meinem letzten Beitrag angegeben habe.

3. den in der Plugin-Demo angesprochenen HTML-Teil packe ich in die php, wo der Button erscheinen soll, also z.B. in dier footer.php?

<div id="demo1" data-url="http://sharrre.com" data-text="Make your sharing widget with Sharrre (jQuery Plugin)" data-title="share"></div>

Ja. Ich würde das auch einfach ausprobieren. Mit der Quelltextansicht des Browsers kannst Du dann ja überprüfen, ob du es richtig eingefügt hast

Damit der Browser die Änderungen in CSS und JavaScript alle lädst, solltest du dabei stets mit Strg + F5 aktualiseren

25.01.2013 16:11 | geändert: 25.01.2013 16:13

1 Forenmitglied fand diesen Beitrag gut

5 Finn

Klasse, ich danke dir! Ich werde am WE mal basteln, mal sehen, ob ich es hinbekomme! Super Forum hier!

Gruß und schönes WE
Finn

25.01.2013 16:30

6 Finn

Hallo Jörg,

habe das jetzt endlich mal probiert, klappt aber leider noch nicht.

Folgendes habe ich gemacht:

1. Datei "sharrre-my-script.js" erstellt und in den js-Ordner zusammen mit den jquery.sharrre-1.3.4.js bzw. jquery.sharrre-1.3.4.min.js - Dateien hochgeladen, also js/sharrre/sharrre-my-script.js

Im Unterordner "sharrre" allerdings - es gibt dort auch noch einen Ordner jquery, vielleicht müssen die Dateien ja da rein?

Inhalt sharrre-my-script.js:
jQuery(document).ready(function( $ ) {

  $('#share').sharrre({
    share: {
      googlePlus: true,
      facebook: true,
      twitter: true
    },
    buttons: {
      googlePlus: {size: 'tall'},
      facebook: {layout: 'box_count'},
      twitter: {count: 'vertical', via: '_JulienH'}
    },
    hover: function(api, options){
      $(api.element).find('.buttons').show();
    },
    hide: function(api, options){
      $(api.element).find('.buttons').hide();
    },
    enableTracking: true
  });

});

2. In die header.php folgendes eingefügt:

<?php wp_enqueue_script("jquery"); ?>

<?php wp_head() ?>

<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.sharrre-1.3.4.min.js"></script>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.sharrre-1.3.4.js></script>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/sharrre-my-script.js"></script>

</head>

3. In die footer.php nach dem footer.div eingefügt:

<div id="footer">

<div id="sharrre" data-url="http://sharrre.com" data-text="Make your sharing widget with Sharrre (jQuery Plugin)" data-title="share"></div>

		&copy; <?php print(date(Y)); ?> Copyright <a href="<?php echo get_option('home') ?>/" title="<?php bloginfo('name') ?>" rel="home"><?php bloginfo('name'); ?></a>  etc.pp.

4. Den CSS-Code in die style.css eingefügt:

/* =social plugin sharrre */
.sharrre .box{
  float:left;
}
.sharrre .count {
  color:#444444;
  display:block;
  font-size:17px;
  line-height:34px;
  height:34px;
  padding:4px 0;
  position:relative;
  text-align:center;
  text-decoration:none;
  width:50px;
  background-color:#eee;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px; 
}
.sharrre .share {
  color:#FFFFFF;
  display:block;
  font-size:11px;
  height:16px;
  line-height:16px;
  margin-top:3px;
  padding:0;
  text-align:center;
  text-decoration:none;
  width:50px;
  background-color:#9CCE39;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px; 
}
.sharrre .buttons {
  display:none;
  position:absolute;
  margin-left:50px;
  z-index:10;
  background-color:#fff;
}
.sharrre .button {
  float:left;
  max-width:50px;
  margin-left:10px;
}

Man sieht aber gar nichts auf der Seite im Footer.

a) Eventuell stimmt der Upload-Ordner nicht? Oder:
b) es gibt bei dem Plugin noch eine sharrre.php und eine index.html, die ich mit in den js-Ordner geladen habe. Aber ich kann nicht sehen, so diese Dateien überhaupt angesprochen werden?
c) wie komme ich überhaupt an die Konfigurationsoptionen dieses Plugins, um die Buttons so erstellen zu können, wie ich will? Bei Wordpress-Plugins werden diese bei Aktivierung automatisch in die Backend-Oberfläche eingebunden und es erscheinen auch dementsprechend Konfigurationsoptionen im Menü. Aber so?

Momentan seh ich echt den Wald vor lauter Bäumen nicht mehr... :/

Gruß, Finn

31.01.2013 16:19 | geändert: 31.01.2013 16:20

7 Jörg

<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.sharrre-1.3.4.min.js"></script>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.sharrre-1.3.4.js></script>

Wieso zweimal? Es reicht, wenn du die jquery.sharrre-1.3.4.min.js einbindest.

a) Eventuell stimmt der Upload-Ordner nicht? Oder:

1. Datei "sharrre-my-script.js" erstellt und in den js-Ordner zusammen mit den jquery.sharrre-1.3.4.js bzw. jquery.sharrre-1.3.4.min.js - Dateien hochgeladen, also js/sharrre/sharrre-my-script.js

Im Unterordner "sharrre" allerdings - es gibt dort auch noch einen Ordner jquery, vielleicht müssen die Dateien ja da rein?

Das ist letztendlich egal - es muss halt mit den URLs übereinstimmen, die du in den src Attributen verwendest:

<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.sharrre-1.3.4.min.js"></script>

Wenn du das Theme "blablub" ausgewählt hast, sollte wp-content/themes/blablub/js/jquery.sharrre-1.3.4.min.js der korrekte Pfad sein. Ob das so stimmt, kannst du auch in der Quelltextansicht des Browsers sehen, wie ich es schon in meinem letzten Beitrag empfohlen habe :)

b) es gibt bei dem Plugin noch eine sharrre.php und eine index.html, die ich mit in den js-Ordner geladen habe. Aber ich kann nicht sehen, so diese Dateien überhaupt angesprochen werden?

Die index.html ist eine Demo-Datei. Die sharrre.php würde ich in das selbe Verzeichnis hochladen, wie die jquery.sharrre-1.3.4.min.js.

c) wie komme ich überhaupt an die Konfigurationsoptionen dieses Plugins, um die Buttons so erstellen zu können, wie ich will? Bei Wordpress-Plugins werden diese bei Aktivierung automatisch in die Backend-Oberfläche eingebunden und es erscheinen auch dementsprechend Konfigurationsoptionen im Menü. Aber so?

Die Konfiguration erfolgt im json Format innerhalb eines script Elementes. Ein Beispiel ist in der index.html enthalten. Die einzelnen Optionen sind auf dieser Seite erklärt:

http://sharrre.com/#documentation

31.01.2013 18:02

8 Finn

Hi, danke nochmal - ich kriegs jetzt nicht gelöst. Hab auch beruflich gerade zu viel um die Ohren, um mich richtig reinzuknien.

Habe das Problemchen jetzt mit einem eigenen Icon und ner einfachen Verlinkung gelöst. Dann geb ich halt nach (erstmal ;))

Gruß, Finn

05.02.2013 10:07

... 6 Monate später ...

9 Andy (Gast)

Wahnsinn! Danke. Das hat mir extrem weitergeholfen!

05.08.2013 00:17

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]