如何在不使用URL的情况下在Facebook上分享我的新闻

Question

I'm trying to incorporate into my project a button that allows people sharing an article on facebook.

I want that in facebook share window appears the title and the image of news that users click to share.

But Im not having sucess doing this, because in this project, I show the summary of each news, and each news have a link "Read full article" and a link to "Share".

The problem is, when I click in "Read full article", my full article opens in a fancybox without any url...so this is my difficulty, how can I share my news in facebook without a url?

I'm really having difficulties to understand how each news can be share on Facebook, because of my news dont have an url.

Do you see some way in order to achieve my goal?

This is my 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>';
}

This is my script to share on 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;
})

You can see my example here: (my fancybox share window is opening all white)

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

Answer 1

Didn't test it myself, but this is how I understand it:

when hovering (and maybe also when clicking) See full article an url ending with #window_fancybox_SOMETHING_ should apear.

This is the url you need to provide to facebook.

Answer 2

Try this, I know this is bad patch but it works :)

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

Answer 3

Something i want to know, Do you use netau host or something like that ? These domains and its subdomain are secured by facebook. And when you use it within https://www.facebook.com/sharer/sharer.php?u= , It gives blank page. I write these lines to aware you if you did know.

And, There is no a big problem in what you want, If you are using a valid url and not secured from facebook. You will not get that blank page. But the problematic point in your idea is that facebook get the title, description and the image"thumbnail of news" from html of your page, So when everyone click share button get the same title, description and the thumbnails. So to handle that i suggest to make a small script behind the scene in individual page to handle that. If that makes sense tell me, And i will be happy to help.

Answer 4

go to facebook developers page and create an app and add this in the body of you page

<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>

replace YOUR_APP_ID with the appid you get from facebook

And add this where you want the share button..

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

Add a meta tag for the share image to be used by facebook

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

Answer 5

Your hosting doesn't seem to support sharing on Facebook. The shortcode link to share any link on Facebook is :

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

where, u is the url and t is the title of the page.

Now, when I try to share your article on Facebook with the following link:

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

nothing really shows up. But, if you try another link, such as:

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

it clearly shows the sharing option on Facebook.

Basically, I think that your problem will be solved if you try another host. Also, keep in mind that many Facebook doesn't support many free hosting sites.

Since you want to share individual modal windows , what you could do is try to give each modal window an identifier like #identifier-1.fancybox-overlay .fancybox-overlay-fixed . Have a look at identifier-1 . This 1 would be the id for each post. So, when anyone clicks on your link like http://ei-test.netau.net/#identifier-1 , a window would open with the modal in an active state.

Answer 6

Facebook sharer.php has been deprecated, you'll need to use their 'Share Dialog', which does require setting up an APP ID on facebook for your domain.

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

However this method does pull in meta data from the URL you've provided, you can use their javascript API to give your share's a unique title, description and url.

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