Social media share buttons not working as expected


I’m trying to make my own WordPress Plugin for socialmedia share buttons. I want the Facebook, Twitter and Pinterest button. I have add a shortcode and I’m able to display the function in my single.php with the shortcode. All buttons are working, but I still have some problems.


Facebook button:

  • Facebook popup, is not showing the right title. It’s showing the pagetitle, but I want to show the post_title.
  • If there is a thumbnail as featured image, it must display this also.
  • And I want beginning of the content in the pop-up before I share my post.

Pinterest button:

  • The featured image is not showing.
  • The post_title is showing spaces replaced by an +. For example my post_title is: My Home -> is displayed as: My+Home


<meta name="og:image" content="ID, 'thumbnail') ); ?>" >
<meta name="og:title" content="" >
<meta name="og:description" content="" >
<meta name="og:url" content="" >

Plugin file

function webor_add_share_buttons(){

 <div class="fb-share-button" data-href="<?php echo get_permalink();?>"
 data-layout="button" data-size="small" data-mobile-iframe="true">
 <a class="fb-xfbml-parse-ignore" target="_blank"
 href="<?php echo $url?

 <a class="twitter-share-button" href="<?php echo urlencode( get_the_title() ) ?>&amp;url=<?php echo urlencode( get_permalink() ); ?>" title="Tweet Me" >Tweet</a>
 <a href="" target="_self <img src="" /></a>
 add_shortcode( 'share_buttons', 'webor_add_share_buttons' );

 <!-- Facebook button script-->
 <div id="fb-root"></div>
 (function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); = id;
    js.src = "//";
    fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

<!-- Twitter button script -->
 var getTitle = "<?php echo $title = the_title(); echo $title;?>";
 !function(d,s,id){var js,fjs=d.getElementsByTagName(s [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);;js.src=p+'://';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

 (function() {
   var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  po.src = '';
  var s = document.getElementsByTagName('script')[0]; 
  s.parentNode.insertBefore(po, s);

  text: 'Hello World'

<!-- Printerest button -->
type="text/javascript" async defer src="//"

I know the meta fields in de header are not inside the loop. So the WordPress function are not working. But I’ve tried it already inside the loop, define a variable to it. And then call the variable in the meta content field. That isn’t working either.

I can not see what I’m doing wrong. Hope someone can help me. Thanks.

Read more here: Social media share buttons not working as expected

Leave a Reply

Your email address will not be published. Required fields are marked *