Social Media Links on homepage - within posts/post loop

Question

On my WordPress site I've got a social sharing bar that I created myself. Here's a picture of the social sharing bar: http://d.pr/i/ucSG - I have the social sharing links included within 'index.php' between:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

    <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a><script type="text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

    <div class="g-plusone" data-size="medium"></div><!-- Place this tag after the last +1 button tag. --><script type="text/javascript">(function() { var po document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();</script>

<? } endwhile; else: ?>

<?php endif; ?> 

When I go to share a link it gives me the URL off my website and not the permalink for the post. It works fine when I view the post and try this, but when I'm on the homepage it just gives me the permalink of my website. How do I get it to share the current post link that it's clicked on?

I don't understand why it's not showing the permalink as it's within the posts loop.

Answer 1

I think your code should be in header.php or single.php and not index ...these are the correct parts of the theme that get called with every post or page. That should fix part of the problem.

Also ... With Twitter Tweet buttons, for example, you can have extra meta such as the data-URL and echo your post permalink I also use data-count as most of my permalinks are shortened and you want your click stats to follow the full post URL.

This is how I do it on my site:

<div class="wpse61568">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php echo get_permalink(); ?>" data-counturl=<?php echo get_permalink(); ?> data-count="horizontal" data-via="damiensaunders" rel="me">Tweet</a>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></div> 

header.php with conditional tag

<?php if ( !is_single() ){ ?>
<div class="wpse61568_2">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php echo get_permalink(); ?>" data-counturl=<?php echo get_permalink(); ?> data-count="horizontal" data-via="damiensaunders" rel="me">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<?php } ?>