在帖子（Wordpress）中插入自定义FB分享按钮

Question

我试图插入大的自定义FB分享按钮。

我能够让它出现，但问题开始发生与jQuery。

我在同一篇文章上有2个分享按钮，但只有其中一个分享弹出窗口。我必须做什么来做第二次分享弹出式工作？您可以使用下面的代码IM：

<?php 
/** 
* The single post loop Default template 
**/ 

if (have_posts()) { 
the_post(); 

$td_mod_single = new td_module_single($post); 
?> 

<article id="post-<?php echo $td_mod_single->post->ID;?>" class="<?php echo join(' ', get_post_class());?>" <?php echo $td_mod_single->get_item_scope();?>> 
    <div class="td-post-header"> 

     <?php echo $td_mod_single->get_category(); ?> 

     <header class="td-post-title"> 
      <?php echo $td_mod_single->get_title();?> 


      <?php if (!empty($td_mod_single->td_post_theme_settings['td_subtitle'])) { ?> 
       <p class="td-post-sub-title"><?php echo $td_mod_single->td_post_theme_settings['td_subtitle'];?></p> 
      <?php } ?> 


      <div class="td-module-meta-info"> 
       <?php echo $td_mod_single->get_author();?> 
       <?php echo $td_mod_single->get_date(false);?> 
       <?php echo $td_mod_single->get_comments();?> 
       <?php echo $td_mod_single->get_views();?> 
      </div> 

     </header> 

    </div> 

    <?php echo $td_mod_single->get_social_sharing_top();?> 


    <div class="td-post-content"> 
    <div class="big-facebook-share" data-url="<?php echo home_url(add_query_arg(array(),$wp->request));?>" id="fb-share-button"> 
            <span class="big-share-text"><?php _e('Share on facebook','fb');?></span> 
           </div> 
           <script> 

            jQuery(function(){ 
             jQuery("#fb-share-button").on('click', function() { 
              fbShare(jQuery(this).attr("data-url")); 
             }) 
            }); 

            function fbShare(url) { 
             var width=640; 
             var height=320; 
             var leftPosition, topPosition; 
             leftPosition = (window.screen.width/2) - ((width/2) + 10); 
             topPosition = (window.screen.height/2) - ((height/2) + 50); 
             var windowFeatures = "status=no,height=" + height + ",width=" + width + ",resizable=no,left=" + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no"; 
             var u=location.href; 
             var t=document.title; 
             window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(url)+'&t='+encodeURIComponent(t),'sharer', windowFeatures); 
             return false; 
            } 
           </script> 


    <?php 
    // override the default featured image by the templates (single.php and home.php/index.php - blog loop) 
    if (!empty(td_global::$load_featured_img_from_template)) { 
     echo $td_mod_single->get_image(td_global::$load_featured_img_from_template); 
    } else { 
     echo $td_mod_single->get_image('td_696x0'); 
    } 
    ?> 

    <?php echo $td_mod_single->get_content();?> 



     <div align="center"> <?php echo do_shortcode('[fb_button]'); ?></div> 
     <div class="big-facebook-share" data-url="<?php echo home_url(add_query_arg(array(),$wp->request));?>" id="fb-share-button"> 
            <span class="big-share-text"><?php _e('dhare on facebook','fb');?></span> 
           </div> 


    <?php echo do_shortcode('[fbcomments url="https://facebook.com/Facebook/" width="700" count="off" num="3" countmsg="wonderful comments!"]'); ?> 
    </div> 


    <footer> 
     <?php echo $td_mod_single->get_post_pagination();?> 
     <?php echo $td_mod_single->get_review();?> 

     <div class="td-post-source-tags"> 
      <?php echo $td_mod_single->get_source_and_via();?> 
      <?php echo $td_mod_single->get_the_tags();?> 
     </div> 

     <?php echo $td_mod_single->get_social_sharing_bottom();?> 
     <?php echo $td_mod_single->get_next_prev_posts();?> 
     <?php echo $td_mod_single->get_author_box();?> 
     <?php echo $td_mod_single->get_item_scope_meta();?> 
    </footer> 

</article> <!-- /.post --> 

<?php echo $td_mod_single->related_posts();?> 

<?php 
} else { 
//no posts 
echo td_page_generator::no_posts(); 
} 

Answer 1

你的jQuery选择更是瞄准了id并且由于按键具有相同的id（他们应该是唯一的），只有一个正在工作。考虑给每个按钮一个独特的id或更新您的jQuery选择器，以代替使用class。

jQuery(".big-facebook-share").on("click", function() {...});