Adding Facebook Like/Share Buttons to News Articles

Follow

Comments

20 comments

  • Avatar
    Leo K

    thanks!

  • Avatar
    rothschildd

    Hi Scott,

    First, thanks for showing us how to do this. One question, do we need to worry about the open graph requirements from Facebook? I don't see that in the JS code example. Also, does the like button reference the individual article or the page that it's on?

     

    Thanks,

    Dan

  • Avatar
    Scott McCulloch

    I'll write an entry about open graph to show you how to use that. It is basically meta data about the article itself which news articles also supports. 

    For the like button, it will like the current url which is the article. 

  • Avatar
    Greg Gerber

    I must have done something wrong. I played around with the HTML to see where the button looked best. When I liked a story, all the like buttons next to all the articles on the page turned to grey. And, the actual Facebook post "liked" the entire page on which the stories were listed instead of liking a single story.  

    Could it have something to do with where I placed the footer html.  I just tacked it onto the end of the default code so it looks like this:

    <!-- Listing.Foorter -->
    [HASMULTIPLEPAGES]
    [PAGER]
    [/HASMULTIPLEPAGES]
    <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/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

     

    Any ideas?

  • Avatar
    Prezitation

    OK so next question, when you view the news item, I have added it to View.Item.html instead. Can you get it to show the Page instead of just a link. The page title which I am assuming is created by the headline of the story in question. Sorry I'm useless at the FB stuff.

  • Avatar
    Prezitation

    I think I need to make a Facebook app and add og:meta to the skin. Doable!! I shall report findings :)

  • Avatar
    erwin

    Another trick for adding facebook comment is similar.

     

    Add this script on View.PageHeader.html :

    <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/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>


    And this script into View.Item.html :

    <div class="fb-comments" data-href="[ARTICLELINK]" data-width="590" data-num-posts="10"></div>

  • Avatar
    luisll

    Scott!

    When I implemented your original line <div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div> once I like one article, all the articles in the page appear as liked. 

    so I tried to implemented with Erwin's script into View.Item.html :

    <div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true" data-href="[ARTICLELINK]" show_faces="false"></div>
    </div>

    Which works much better. When I like an article it shows well, but at my wall I don't see it. how can I post the article link to Facebook.

    I'm not so fond of Facebook, so forgive if I'm asking stupid questions

     

  • Avatar
    Scott McCulloch

    If you like an article and it shows with the count increased, it should show on your facebook page. 

    Did you click on your name in facebook and view your latest activity?

  • Avatar
    luisll

    Hi Scott! 

    yes I did. and it doesn't show. I know that it sounds strange, but I don't see it.

     

  • Avatar
    erwin

    under  listing.item.html

    add this attribute data-href="[ARTICLELINK]" it's same like facebook comment

  • Avatar
    luisll

    Hi Erwin, 

    you post was extremely usefull, that is what I did. should I had used class="fb-comments" too?

     

  • Avatar
    erwin

    No you don't need to, class is use for css style.

    just follow what Scott did, only add data-href attribute :

    <div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-href="[ARTICLELINK]" data-show-faces="false"></div>

  • Avatar
    luisll

    Thanks for your suppot Erwin,

    Still no results. I'll really appreciate if you can have a look, Theage is in Hebrew but a Facebook like, is a Facebook like...

    The page is http://m-ziv.infocode.co.il/%D7%9E%D7%90%D7%9E%D7%A8%D7%99%D7%9D.aspx, just give a try and inform me

  • Avatar
    erwin

    Well, web looks fine, the hidden href for each like button is correct, which show different link.

    If it doesn't show on your facebook page, guess you'll need to configure it from your facebook profile.

  • Avatar
    luisll

    That's encouraging!

    Thanks again Erwin

  • Avatar
    luisll

    Erwin, 

    I feel foolish, I went all over my profile and also tried on a different computer and FB account still doesn't show there.

     

  • Avatar
    erwin

    I'm sorry, I cannot help you with that, please read more about facebook like button https://developers.facebook.com/docs/reference/plugins/like/

  • Avatar
    Bass

    How can i add a follow/ share button for twitter? Hope you can help.

  • Avatar
    onesrc

    Scott & Erwin

    Thanks this is working great.  But the image that is showing with thepost on Facebook is some pixelated looking star.  Is there a way to determine what image accompanies post on Facebook?

     

    Hutch

Please sign in to leave a comment.

Powered by Zendesk