【问题标题】:How can I share my news in facebook without using an URL如何在不使用 URL 的情况下在 facebook 上分享我的新闻
【发布时间】:2014-08-07 16:35:45
【问题描述】:

我正在尝试在我的项目中加入一个按钮,该按钮允许人们在 facebook 上分享文章。

我希望在 facebook 分享窗口中出现用户点击分享的新闻标题和图片。

但是我没有成功,因为在这个项目中,我展示了每条新闻的摘要,每条新闻都有一个“阅读全文”链接和一个“分享”链接。

问题是,当我点击“阅读全文”时,我的全文在一个没有任何网址的花式框中打开...所以这是我的困难,我如何在没有网址的情况下在 facebook 上分享我的新闻?

我真的很难理解如何在 Facebook 上分享每条新闻,因为我的新闻没有网址。

你有什么方法可以实现我的目标吗?

这是我的 php:

//while exist news records in database

while ($result = $readNews->fetch(PDO::FETCH_ASSOC)){
    echo '<article class="news">';
        echo '<img class="img" src="'.BASE.'/uploads/news/'.$result['thumb'].'"/> ';
        echo '<h2>'.$result['title'].'<br /></h2>';
        echo '<span>'$result['date']).'</strong></span>';
        echo '<p>'.$result['content].'
            <a  id="'.$result['id_news'].'" 
            class="fancybox" href="#window_fancybox'.$result['id_news'].'">
            See full article </a>
        </p>';  

        //my share link
        echo '<a title="share" class="share" href="'.BASE.'">Share</a>';

        //When I click in "See full article"
        // it will open a fancybox with full article 
        echo '<div id="window_fancybox'.$result['id_news'].'" class="modal">';
        echo '<h2>'.$resultt['title'].'</h2>';
        echo '<span>'.$result['date'].'</span><br />';
        echo '<img class="img" src="'.BASE.'/uploads/news/'.$result['thumb'].'"/>';
        echo '<p>'.$result['content'].'</p>';
        echo '<span class="close_fancy">Close modal</span>';
        echo '</div>';
    echo '</article>';
}

这是我要在 facebook 上分享的脚本:

$('.share').click(function(){
    urlshare = $(this).attr('href');
    alert(urlshare);
    window.open('http://www.facebook.com/sharer.php?u=' +urlshare,'My website',"width=500,height=400,status=yes,toolbar=no,menubar=no,location=no");
    return false;
})

您可以在此处查看我的示例:(我的 fancybox 共享窗口全白打开)

http://ei-test.netau.net/#fancybox_window1

【问题讨论】:

  • 您不能共享单个新闻,如果这些新闻没有每个单独的 URL - URL 中简单的客户端哈希部分是不够的。

标签: php jquery html facebook social-networking


【解决方案1】:

自己没有测试过,但我是这样理解的:

当悬停时(也可能在点击时)查看全文应该会出现一个以#window_fancybox_SOMETHING_ 结尾的网址。

这是您需要提供给 facebook 的网址。

【讨论】:

  • 感谢您的回答。你说得对,Waog,当我将鼠标悬停在“查看全文”时,会出现这个网址:localhost/website/#window_fancybox74(如果是fancybox 74 的新闻)。但我没有成功在我的 jQuery 脚本中提供这个 url!
  • 这个 url 中的 localhost 部分意味着,他的网站不是托管在全球可访问的服务器上,而是仅托管在您的本地 PC 上。您不能向 facebook 提供本地 URL,因为除了您之外没有人可以看到它们。您需要学习如何托管服务器。
  • 感谢您的回答沃格。我现在才回复,因为我正在寻找一个免费的主机,只是为了测试我在 facebook 上的分享。但是不起作用,当我单击“共享”链接时,它会打开一个带有 facebook 图标的窗口,但该窗口完全是白色的,什么也没有出现。你明白为什么会发生这种情况吗?
  • 不完全是。如果您将鼠标悬停在 share 链接上,您可以发布出现的 URL 吗?
  • 感谢您的回答沃格。出现的网址是这样的:ei-test.netau.net/#fancybox_window1
【解决方案2】:

试试这个,我知道这是一个糟糕的补丁,但它可以工作:)

$(document).ready(function() {
    var popupURL = location.href.split("#");
    if(popupURL.length > 1) {
        var action = popupURL[popupURL.length-1];
        $('a.fancybox[href="#'+action+'"]').trigger("click");
    }
});

【讨论】:

  • 感谢您的回答 Dharmesh Patel。我试图使用你的代码,但我没有成功。当我点击我的“分享”链接时,什么也没有发生:S
  • 那是因为您删除了共享代码,保留脚本以在 facebook 上共享并添加我的代码,这样当用户来自 facebook 时,这不会显示白色花式框
  • 还注意到在您的代码中您忘记了 &lt;script type="text/javascript&gt; 中的引号将其替换为 &lt;script type="text/javascript"&gt;
  • 感谢您的帮助 Dharmesh Patel,但当我点击“分享”时,我的 Facebook 窗口仍然是白色的
  • 如果我在 Internet Explorer 中进行测试,而不是白色窗口,我的窗口会出现以下错误:“错误 HTTP 500 内部服务器错误”
【解决方案3】:

我想知道的事情,你使用 netau 主机或类似的东西吗?这些域及其子域由 facebook 保护。当你在https://www.facebook.com/sharer/sharer.php?u= 中使用它时,它会给出空白页。如果你知道的话,我写这些行是为了提醒你。

而且,如果您使用的是有效的 url 并且不受 facebook 的保护,那么您想要的没有什么大问题。你不会得到那个空白页。但是你的想法中的问题点是facebook从你的页面的html中获取标题、描述和图像“新闻缩略图”,所以当每个人点击分享按钮时,都会得到相同的标题、描述和缩略图。因此,为了处理这个问题,我建议在单个页面的幕后制作一个小脚本来处理它。如果这有意义,请告诉我,我很乐意提供帮助。

【讨论】:

    【解决方案4】:

    转到 facebook 开发者页面并创建一个应用程序并将其添加到您页面的正文中

    <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_US/sdk.js#xfbml=1&appId=YOUR_APP_ID&version=v2.0";
            fjs.parentNode.insertBefore(js, fjs);
        } (document, 'script', 'facebook-jssdk'));
    </script>
    

    将 YOUR_APP_ID 替换为您从 facebook 获得的 appid

    然后在你想要分享按钮的地方添加这个..

    <div class="fb-like" data-layout="standard" data-action="like" data-show-faces="false"
                    data-share="true" width="100px">
    

    为 Facebook 使用的共享图像添加元标记

    <meta property="og:image" content="http://www.example.com/images/logo.png" />
    

    【讨论】:

      【解决方案5】:

      您的主机似乎不支持在 Facebook 上分享。在 Facebook 上分享任何链接的简码链接是:

      http://www.facebook.com/sharer.php?u= &t= 
      

      其中,uurlt 是页面的 title

      现在,当我尝试通过以下链接在 Facebook 上分享您的文章时:

      https://www.facebook.com/sharer/sharer.php?u=http://ei-test.netau.net/&t=United%20FC%20win%20the%20game
      

      什么都没有出现。但是,如果您尝试其他链接,例如:

      https://www.facebook.com/sharer/sharer.php?u=http://www.infismash.com/hover-social-buttons-wordpress/&t=United%20FC%20win%20the%20game
      

      它清楚地显示了 Facebook 上的分享选项。

      基本上,如果您尝试其他主机,我认为您的问题将得到解决。另外,请记住,许多 Facebook 不支持许多免费托管网站。

      由于您想共享个人modal windows,您可以做的是尝试为每个模式窗口指定一个标识符,例如#identifier-1.fancybox-overlay .fancybox-overlay-fixed。查看identifier-1。这个1 将是每个帖子的id。因此,当任何人点击您的链接(如 http://ei-test.netau.net/#identifier-1)时,将打开一个窗口,其中模式处于活动状态。

      【讨论】:

        【解决方案6】:

        Facebook sharer.php 已被弃用,您需要使用他们的“共享对话框”,这确实需要在 facebook 上为您的域设置一个 APP ID。

        https://www.facebook.com/dialog/share?
        app_id=145634995501895
        &display=popup
        &href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
        &redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer
        

        然而,这种方法确实从您提供的 URL 中提取元数据,您可以使用他们的 javascript API 为您的分享提供一个唯一的标题、描述和 url。

        参考: https://developers.facebook.com/docs/sharing/reference/share-dialog#redirect https://developers.facebook.com/docs/javascript/quickstart/v2.1

        【讨论】:

        • 共享对话框不接受标题、描述、缩略图等附加参数,但会从共享 URL 的 OG 元数据中获取这些值。
        • 是的......就像我在回复中所说的“但是这种方法确实从您提供的 URL 中提取元数据......”
        猜你喜欢
        • 2013-08-01
        • 2019-10-26
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-10-05
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多