基于jQuery与Fancybox实现分享功能时按钮链接不显示 控制台无报错

所有异常都是代码硬错误导致，无逻辑玄学问题，完全匹配你提到的“控制台无报错、分享链接不显示”的现象。

• 第一处直接导致分享链接不渲染的语法错误
  对应fancybox配置里的caption字符串拼接段：

  caption = (caption.length ? caption + '<br />' : '')
   + '<a href="' + item.src + '">View image</a><br>'
   + '<a href="' + siteUrl + '">Visit page</a>';
   + '<a href="' + sharefbimage + '">share</a>';
  

  第三行结尾多打了一个分号，直接截断了连续的字符串拼接赋值流程。因为JS语法允许独立的表达式语句合法存在，控制台不会抛出任何报错，但实际的caption赋值操作在分号位置就已经执行完毕，后续带分享链接的字符串根本没参与拼接，自然无法显示。
• 第二处作用域覆盖问题
  在caption函数内部，你声明了和外层全局Facebook分享函数完全同名的局部变量sharefbimage，取值为元素的data-siteurl属性：

  var sharefbimage = $(this).data('siteurl') || '';
  

  按照JS作用域优先级，外层定义的分享函数会被这个字符串类型的局部变量完全覆盖，就算链接能正常渲染，点击后也只会跳转到普通站点地址，不会触发Facebook分享弹窗。
• 第三处函数结构错位
  自定义的sharefbimage分享函数存在括号匹配错误：原代码里FB.ui方法调用结束后，方法的闭合括号和函数的闭合括号位置写混了，导致函数结构不完整，就算能触发点击事件，也无法正常执行分享逻辑。

$(document).ready(function() {
    // 修正括号匹配的分享函数
    function sharefbimage(e) {
        // 阻止a标签默认跳转行为
        if (e) e.preventDefault();
        FB.init({ appId: '你的FB应用ID', status: true, cookie: true });
        FB.ui(
        {
            method: 'share',
            href: window.location.href,
            caption: 'Ishelf Book',
            description: '你的自定义描述',
            picture: '你的分享配图地址'
        },
        function (response) {
            if (response && response.post_id) {
                alert('success');
            } else {
                alert('error');
            }
        }
        ); // 正确闭合FB.ui方法调用的括号
    };

    // 省略原有.result点击、Masonry网格布局等不变的逻辑...

    $("[data-fancybox]").fancybox({
        caption : function( instance, item ) {
            var caption = $(this).data('caption') || '';
            var siteUrl = $(this).data('siteurl') || '';

            if ( item.type === 'image' ) {
                // 去掉多余分号，保持字符串拼接连续
                caption = (caption.length ? caption + '<br />' : '')
                 + '<a href="' + item.src + '">View image</a><br>'
                 + '<a href="' + siteUrl + '">Visit page</a><br>'
                 + '<a href="#" class="js-share-fb">share</a>';
            }

            // 给生成的分享标签绑定点击触发逻辑
            $('.js-share-fb').on('click', sharefbimage);
            return caption;
        },
        afterShow : function( instance, item ) {
            increaseImageClicks(item.src);
        }
    });

注意：修正后不需要改变原有页面的其他布局和交互逻辑，只需要对齐上述语法和作用域的错误，分享链接即可正常渲染。

内容的提问来源于stack exchange，提问作者Davi