SITUATION

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.

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

MY CODE
header.php

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

Plugin file

<?php 
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="https://www.facebook.com/sharer/sharer.php?u=<?php echo $url?
 >">Delen</a>
 </div>

 <a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=<?php echo urlencode( get_the_title() ) ?>&amp;url=<?php echo urlencode( get_permalink() ); ?>" title="Tweet Me" >Tweet</a>
 <a href="https://www.pinterest.com/pin/create/button/" target="_self <img src="assets.pinterest.com/../pinit_fg_en_rect_gray_20.png" /></a>
 <?php
 }
 add_shortcode( 'share_buttons', 'webor_add_share_buttons' );
 ?>
?>

 <!-- Facebook button script-->
 <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_GB/sdk.js#xfbml=1&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
   </script>

<!-- Twitter button script -->
 <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.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

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

 twttr.widgets.createShareButton(
 '/',
 document.getElementById('container'),
 {
  text: 'Hello World'
 }
);
</script>

<!-- Printerest button -->
<script
type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"
></script>

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


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: