How to add Facebook Like and Comments box to image javascript

Question

I want to add Facebook like button and comment box on my Blogger blog.Its a pictures blog which displays pictures using JavaScript. Recently I have implemented share button using Facebook JavaScript sdk and its working perfectly with my image script(sharing image thumbnail and image URL). I want to know if this sharing script can be modified in some way to use it as Like button and comment box(showing only comments for image currently being viewed)

This is the Share Button script

<script>
(function() {
        SocialShare = function() {
                var self = this;
                //////////////////////////////////////////////////////////////
                //
                //        Facebook Share
                //        @link - link to share
                //        @picture - Picture to share
                //        @name - Name for the share
                //        @caption - caption for share
                //        @description - description for share
                //
                //////////////////////////////////////////////////////////////
                self.facebook_share = function(share_obj){
                        FB.init ({
                                appId: share_obj.app_id,
                                status: true,
                                cookie: true,
                                xfbml: true
                        });

                        // create facebook share object
                        facebook_obj = {
                                method: "feed",
                                link: share_obj.link,
                                picture: share_obj.picture,
                                name: share_obj.name,
                                caption: share_obj.caption,
                                description: share_obj.description
                        };

                        FB.ui(facebook_obj,self.share_success);


 };

                //////////////////////////////////////////////////////////////
                //
                //        Twitter Share
                //        @link - Link to share
                //        @description - description for share
                //
                //////////////////////////////////////////////////////////////
                self.twitter_share = function(share_obj){
                        var windowProperties = "toolbar=no,menubar=no,scrollbars=no,statusbar=no,height=" + 250 + ",width=" + 500 + ",left=" + 150 + ",top=" + 150;
                    var popwin = window.open("http://twitter.com/share?url=" + encodeURIComponent(share_obj.link) + "&text=" + encodeURIComponent(share_obj.description), 'newwin', windowProperties);
                    popwin.focus();
                };
                return self;
        };
})();       
</script>
<a href='#' id='facebook_share' name='fb_share' type='button_count'><img src="http://cool-igadgets.appspot.com/fbshare.png"></a>&nbsp;&nbsp;




 <script type="text/javascript">
                $(function(){

                        // Init social share with FB_ID
                        sharer = new SocialShare();

                        var share_obj = {
                                app_id: 490866674364389,
                                        **link: document.URL,**
                                        **picture: pics[a],**
                                        name: "Funny Pictures - WoOf Hits",
                                        caption: "",
                                        description: "Best funny pictures on the Web !"
                        }

                        // CLICKS
                        $("#facebook_share").click(function(event){
                                event.preventDefault();
                                sharer.facebook_share(share_obj)
                        });

                        $("#twitter_share").click(function(event){
                                event.preventDefault();
                                sharer.twitter_share(share_obj)
                        });

                })
        </script>
        <script>
                // Load the Facebook SDK asynchronously
                        (function(d){
                         var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
                         if (d.getElementById(id)) {return;}
                         js = d.createElement('script'); js.id = id; js.async = true;
                         js.src = "//connect.facebook.net/en_US/all.js";
                         ref.parentNode.insertBefore(js, ref);
                        }(document));
        </script>

The link to share above document.URL comes from the image script i am using on my Blog. And pics[a] is image links in the image script array.

Answer 1

As I menthioned in your other post, I think I could found a way. The way based on this side . If you scroll the page until the end, you find comments from user OptiTool. I used it to develop a possible way.

What you have to do:

First insert the following javascript code into your page:

   <script type="text/javascript">
    jQuery(document).ready(function()
    {
        $('#facebook_like').on('click', function() 
        {
            var fbURL = "http://www.facebook.com/plugins/like.php?href=";
            fbUR = fbUR + encodeURIComponent(pics[a]);
            fbUR = fbUR + "&send=false&layout=button_count&width=120&show_faces=false&action=like&colorscheme=light&font&height=21";
            var container = $(this).parent();
            var w = 120;
            var h = 27;
            fbFrame = document.createElement("IFRAME");
            fbFrame.setAttribute("src", fbURL);
            fbFrame.setAttribute("scrolling", "no");
            fbFrame.setAttribute("frameBorder", 0);
            fbFrame.setAttribute("allowTransparency", true);
            fbFrame.style.border = "none";
            fbFrame.style.overflow = "hidden";
            fbFrame.style.width = w;
            fbFrame.style.height = h;
            $(this).parent().empty().html(fbFrame);
        });
    });
    </script>

Make sure that you inserted it after you satement, where you import jquery.js .

Second:

Insert your own like button into your page, whereever you want. Then add the attribute id="facebook_like" to him.

Important! Because I haven't an account at Facebook, I couldn't test it practically. So don't blame on me.