Archief - Share buttons manueel toevoegen

Atrox · 2 okt 2011

Hallo

voor mijn blog zou ik graag share buttons toevoegen. Ik wou dit doen met een plugin (ShareThis), maar blijkbaar geeft die problemen met mijn theme. Daarom dus dat ik dat nu manueel wil doen.

Mijn single.php komt standaard met de volgende code:

<?php if ($wpzoom_singlepost_share == 'Show') { ?>
<div id="socialicons">

<ul>

<li><a href="http://twitter.com/share?url=<?php echo urlencode(the_permalink());?>&text=<?php echo urlencode(the_title());?>"><img src="<?php bloginfo('template_directory');?>/images/twitter.png" alt="Tweet This!" /><?php _e('Tweet This', 'wpzoom');?></a></li>

<li><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title();?>" rel="external,nofollow" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="Share on Facebook" /><?php _e('Share on Facebook', 'wpzoom');?></a></li>

<li><a href="http://digg.com/submit?phase=2&url=<?php the_permalink();?>&title=<?php the_title();?>"><img src="<?php bloginfo('template_directory');?>/images/digg.png" alt="Digg it!" /><?php _e('Digg This', 'wpzoom');?></a></li>

<li><a href="http://del.icio.us/post?v=4&noui&jump=close&url=<?php the_permalink();?>&title=<?php the_title();?>"><img src="<?php bloginfo('template_directory');?>/images/delicious.png" alt="Add to Delicious!" /><?php _e('Bookmark', 'wpzoom');?></a></li>

<li><a href="http://www.stumbleupon.com/submit?url=<?php the_permalink();?>"><img src="<?php bloginfo('template_directory'); ?>/images/stumble.png" alt="Stumble it" /><?php _e('Stumble', 'wpzoom');?></a></li>

<li><?php if (strlen($wpzoom_misc_feedburner) > 1) { echo"<a href=\"$wpzoom_misc_feedburner\">"; } else { ?><a href="<?php bloginfo('rss2_url');?>"> <?php } ?><img src="<?php bloginfo('template_directory'); ?>/images/feed.png" alt="Subscribe by RSS" /><?php _e('RSS Feed', 'wpzoom');?></a></li>

</ul>

</div>

Ik zou graag die <li> willen behouden maar de tekst vervangen door de icoontjes van Google+/Facebook/Twitter. Moet ik gewoon de officiële code toevoegen tussen de <li></li> telkens? En waar moet ik dan mijn Js plaatsen, in de header?

Atrox · 2 okt 2011

Niemand?

Voor de Google+ staat er bijvoorbeeld dit op de Google website:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<g: plusone></g: plusone>

Dus die eerste komt ergens in de header (waar best?) en de laatste gewoon tussen de <li></li> tekens?

-BVR- · 3 okt 2011

Zal het deze avond uitgebreid uitleggen, als er tegen dan nog geen nieuwe comment is

tonymontana · 3 okt 2011

Ik zou zeggen gewoon eens proberen en is het niet goed haal je het er weer af. In principe is alles mogelijk want mijn script staat net achter <g: plusone></g: plusone> en dus niet in m'n header.

Atrox · 3 okt 2011

BramVroy zei:
Zal het deze avond uitgebreid uitleggen, als er tegen dan nog geen nieuwe comment is

Thanks. Heb net uw blogartikel eens doorlezen (en getweet

) en een paar interessante dingen gelezen. Ik ben wel niet van plan om zo'n kader te bouwen, maar eerder voort te werken op de huidige lay-out en die aan te passen. Ik zal straks eens een printscreen maken van hoe het er nu uitziet.

tonymontana zei:
Ik zou zeggen gewoon eens proberen en is het niet goed haal je het er weer af. In principe is alles mogelijk want mijn script staat net achter <g: plusone></g: plusone> en dus niet in m'n header.

Mja, die kunt ge inderdaad ook op een andere plaats zetten, maar meestal raadt men toch aan om zo'n dingen in de header te zetten. Of dit zo belangrijk is voor deze buttons weet ik niet (GA code is bv belangrijker dan dit voor in de header)

Wat ik wel vreemd vond was dat ik de code voor bijv Delicious verwijderde (gebruik ik en mijn doelgroep amper), savede en dan bleek het nog op de site te staan onder het artikel ...

-BVR- · 3 okt 2011

Mijn kennis is ongelooflijk beperkt, dus correct me if wrong:

HTML structuur

HTML:

<div id="socialmedia" class="hide">
  <!-- Facebook -->
  <div id="fb">
	<div id="fb-root"></div>
	<script>(function(d, s, id) {
  	  var js, fjs = d.getElementsByTagName(s)[0];
  	  if (d.getElementById(id)) {return;}
  	  js = d.createElement(s); js.id = id;
  	  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));
    </script>
	<fb:like href="<?php the_permalink();?>" send="false" layout="button_count" width="90" show_faces="false" font="lucida grande"></fb:like>
  </div>
      
  <!-- Twitter -->
  <div id="twit">
    <a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="nl">Tweet</a>
	<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
  </div>
      
  <!-- Google -->
  <div id="google">
    <g:plusone href="<?php the_permalink();?>"></g:plusone>
  </div>
</div>
<!-- End social media -->

Zoals je ziet is er bij twitter nergens een vermelding naar de 'url to tweet'. Dit is omdat twitter automatisch de pagina tweet waar de knop zich op bevindt. Als je dit toch handmatig wilt aanpassen, verander je

HTML:

<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="nl">Tweet</a>

naar

HTML:

<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="nl" data-url="<?php the_permalink();?>">Tweet</a>

Merk op dat ik altijd <?php the_permalink();?> gebruik, omdat ik vaag weet dat dit de huidige url echoot (als het in de loop zit), maar ik ben van de laatste ontwikkelingen van Wordpress helemaal niet op de hoogte, dus dit kan fout zijn.

En vergeet vooral niet dit: vanboven in je html (template) aan te passen (voor vroegere versies van IE):

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">

wordt

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml">

En het script voor de +1-knop niet vergeten (liefst onderaan, voor de sluitende bodytag)

Code:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'nl'}
</script>

Als je nog css wilt, try this:

Code:

#fb, #twit, #google {
    float: left;
    margin-right: 1em;
}

Atrox · 4 okt 2011

Maar dat is voor zo'n kolom, niet?

-BVR- · 4 okt 2011

Atrox zei:
Maar dat is voor zo'n kolom, niet?

Neen, ik heb de code aangepast; het is niet dezelfde als van de tutorial. Ander type widget (horizontaal) en door de laatste regels css komen ze horizontaal van elkaar te staan. Probeer het eens uit.

Atrox · 5 okt 2011

Google+ is gelukt, maar de rest wil niet. Ik vermoed dat dat aan mijn theme ligt want als ik de oude code verwijder (bv voor Digg It) dan blijft dat nog steeds zichtbaar op mijn pagina.

-BVR- · 5 okt 2011

Ik weet niet hoe dat met WP zit, maar bij Drupal wordt uw site automatisch gecachet (door de server) en dan wordt die cache dus geladen. Misschien moet ge die cache eens cleanen (en uw browsergeschiedenis + cookies ook niet vergeten!)

Atrox · 5 okt 2011

Ik gebruik de plugin WP Super Cache, daar staat het volgende:

Delete Cached Pages

Cached pages are stored on your server as html and PHP files. If you need to delete them use the button below.

Moet ik dit doen?

-BVR- · 5 okt 2011

Ja. Neem voor de veiligheid een back-up van je website.

Atrox · 5 okt 2011

OK, de share buttons zijn geïmplementeerd en werken. Het enige probleem is de lay-out. Voorlopig ziet het er zo uit: Image - TinyPic - Free Image Hosting, Photo Sharing & Video Hosting

Kan ik dat oplossen met die CSS code? Ik wil alles mooi naast mekaar, evenredig verspreid over de lengte.

*edit* En hoe zorgt ge ervoor dat ge die specifieke pagina liket en niet de hele site? Facebook is daar niet heel duidelijk over op hun pagina ...

-BVR- · 5 okt 2011

Ja, dat kunt ge oplossen met die css code. Ik raad u aan om die niet te verspreiden over de pagina, maar ze gewoon naast elkaar zetten. Dat doe je met mn css code.

En dan moet ge eens op een WP forum vragen hoe ge aan de huidige pagina van uw site komt. Daar is een php snippet voor waarschijnlijk. Misschien weten andere mensen dat hier.

Atrox · 5 okt 2011

En die css code komt gewoon onder die share button codes?
En moet ik dan die <li> etc nog behouden?

-BVR- · 5 okt 2011

Atrox zei:
En die css code komt gewoon onder die share button codes?
En moet ik dan die <li> etc nog behouden?

Neen, ge moet dan niks van die code behouden. En, neen ... Sorry, maar het is beter als ge toch wel de BASICS van webdesign leert.

Css = styling. Dit geeft kleur, structuur en uiterlijk aan alles. CSS code wordt normaal in een .css bestand geplaatst dat in de html template geladen wordt. De css plaatst je dus NIET als gewone html, maar in een apart .css bestand (ge hebt er sowieso al meerdere). Daar plaatst ge die code dan.

Archief - Share buttons manueel toevoegen

Atrox

Legacy Member

Atrox

Legacy Member

-BVR-

Legacy Member

tonymontana

Legacy Member

Atrox

Legacy Member

-BVR-

Legacy Member

Atrox

Legacy Member

-BVR-

Legacy Member

Atrox

Legacy Member

-BVR-

Legacy Member

Atrox

Legacy Member

-BVR-

Legacy Member

Atrox

Legacy Member

-BVR-

Legacy Member

Atrox

Legacy Member

-BVR-

Legacy Member