0

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.

Sam Mak
  • 23
  • 1
  • 10

1 Answers1

0

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 a n account at Facebook, I couldn't test it practically. So don't blame on me.

Reporter
  • 3,897
  • 5
  • 33
  • 47
  • Thanks for helping. I have tried adding this script, but it doesnt work, doesnt load the image and its url. Added this code for like button with attribute `
    `     – Sam Mak Mar 07 '14 at 16:42
  • No, the like-button must be an `ìframe` not a `div`. – Reporter Mar 07 '14 at 16:53
  • to generate iframe Facebook requiring url to like. What url should i write? document.url is not accepted. – Sam Mak Mar 07 '14 at 17:09
  • Look at my post and try to understand it. – Reporter Mar 07 '14 at 20:30
  • I tried to figure it out, but i am not getting it work added like button with iframe `` used it on my test blog, you can check it [here](http://testingmetro.blogspot.com/2013/08/h.html) – Sam Mak Mar 10 '14 at 19:34
  • Copy and follow the instructions from the left panales only from http://jsfiddle.net/QrdF4/2/ . It seemed that my tests where successful. – Reporter Mar 11 '14 at 14:46
  • I already did that, but i am confuse about what URL should be given when generating like button in iframe(facebook requires the url of the page to like). I am writing my blog post url and I beleive as the image script is not server side ,the like button is not loading the image and because blogpost url is included within like button, the above javascript code is ignored when like button is clicked. I hope you understand my point. – Sam Mak Mar 11 '14 at 17:32
  • this is iframe like button highlighted is the url of my blogpost – Sam Mak Mar 11 '14 at 17:41
  • I don't understand you. My example generates a correct like button. The button url contains the url of current showed picture. You can check it if you insert `alert(fbURL);` – Reporter Mar 11 '14 at 21:17
  • To make things clear. please correct me if i have understood this implementation process wrongly. Your fiddle contains a javascript code that should be inserted after jquery.I am using this Library `` The fiddle contains in html section only this `
    ` tag and there is no like button code under it and according to what i understood,I have to insert a like button in iframe, for which FB requires URL to Like,so the like button code i inserted under this Div tag is in my above comment
     – Sam Mak Mar 12 '14 at 13:18
  • You can use your version of Jquery. The div -in my exaqmple- is a fake, see it as a placeholder. The additional js code attached an `onClick` event to the div and creates a facebook conform like button. Also assembles the url that FB needs with the url of the current selected picture. After that it replace the fake button by a real button. It is up to you how the fake button looks at the begin. – Reporter Mar 12 '14 at 13:46
  • If you want to connect the like button with the picture navigation, you have to create another function that contains the js code beneath the `$('#facebook_like').on('click', function()` line. Then make a call of it in the function `bw()`and `ff()`. – Reporter Mar 12 '14 at 14:01
  • I have created this like button `` and used it on my test blog. When its clicked the current image on my blog gets disappearand When i checked on FB, the image is shared with its own URL not with my blog's URL(with picnoparam paramater). Also I would like to know,i is it possible that only real like button appears without the need of having a fake button. – Sam Mak Mar 15 '14 at 12:36
  • I don't know your requirements. It exists two ways: Way one: http://jsfiddle.net/QrdF4/5/ (Note: Take a look at the html panel). Way two: http://jsfiddle.net/QrdF4/6/ . Spot the differences. – Reporter Mar 17 '14 at 17:04
  • This code http://jsfiddle.net/QrdF4/10/ works for me,I have corrected some syntax errors in javascript. But there is one issue that remained,When a image is liked, the image appears on FB with its actual URL(URLs in the image array in image script) not linking to my website. – Sam Mak Mar 18 '14 at 19:35
  • http://4.bp.blogspot.com/_UdzqQpb36Jo/R9kVS0h1BFI/AAAAAAAAD_o/SRGugAQSF0A/s1600/timming_pictures_37.jpg?fb_action_ids=1457652924466357&fb_action_types=og.likes&fb_source=other_multiline&action_object_map=%7B%221457652924466357%22%3A565711933536987%7D&action_type_map=%7B%221457652924466357%22%3A%22og.likes%22%7D&action_ref_map=%5B%5D This is the link that appears on FB with an image, i liked on my website. – Sam Mak Mar 18 '14 at 19:36
  • I'm confused. What is the current requirement? Please be specific and use simple words – Reporter Mar 18 '14 at 20:52
  • I have provided you as much details as possible, so that you can understand whats happening.Using previous [share functionality](http://stackoverflow.com/questions/20884329/how-to-add-a-share-functionality-within-facebook/21024989?noredirect=1#comment31770239_21024989) as E.g it has the option of of Link to share for which we used `document.url` and image url (absoulute url of image) for which we used `pics[a]`. It worked perfectly images shared with link to my website(url with picnopram parameter,but with this like button code image is shared which its absolute url(see above coment) – Sam Mak Mar 18 '14 at 21:23
  • if i use `document.url` in this function function createLikebtn(targetObject) { var fbURL = "http://www.facebook.com/plugins/like.php?href=" + encodeURIComponent(`document.url`) + "&send=false&layout=button_count&width=120&show_faces=false&action=like&colorscheme=light&font&height=21"; instead of `(pics[a])` then the link(url with picnopram parameter) is sharing perfectly but image is not loading. Hope u understand what i am trying to say. – Sam Mak Mar 18 '14 at 21:28
  • Try `document.URL`instead of `document.url`. Take an eye of the capelised letters. – Reporter Mar 19 '14 at 14:22
  • Tried, result is same. Image doesnt load but its URL(my domain link to this pic) is showing. This is the Url which appears on FB.The link extends after picnopram & i dont understand what it means. `http://testingmetro.blogspot.com/2013/08/h.html?picnoparam=146&fb_action_ids=1457912974440352&fb_action_types=og.likes&fb_source=feed_opengraph&action_object_map=%7B%221457912974440352%22%3A1432515483653040%7D&action_type_map=%7B%221457912974440352%22%3A%22og.likes%22%7D&action_ref_map=%5B%5D` – Sam Mak Mar 19 '14 at 16:51
  • Can you provide a link to your test site? – Reporter Mar 20 '14 at 16:46
  • link to [test site](http://testingmetro.blogspot.com/2013/08/h.html?picnoparam=210) – Sam Mak Apr 02 '14 at 14:17
  • did you find anything? – Sam Mak Apr 15 '14 at 18:31
  • I'm trying some different ways. At the moment it doesn't looks good. – Reporter Apr 16 '14 at 15:43
  • I am using this code for FB comment Box, and I am facing similar issue with it. Can't figure it out where to include pics[a] in the code `
    `     – Sam Mak Apr 17 '14 at 16:49
  • Did u figure it out? I was searching for ways to use og meta tags so that it can work with like button and comments box simultaneously. I have found that people are using og meta tags to work with client side script changing og tags dynamically with jquery. But i couldnt something that could with my image script. Do you have any idea about it? – Sam Mak Sep 13 '14 at 14:46
  • Unfortunatly I'm not experienced enough for this issue. Sorry. – Reporter Sep 15 '14 at 10:25
  • I am sorry to bother you again but this is very important, I have decided to switch to server side script for my website, as i am planning to shift my site to paid hosting.. But I have little to no knowledge in server side language, can you help me in converting this java script code to server side script. – Sam Mak Jan 11 '16 at 21:09
  • @SamMak Please create a new question, add appropiate tags to it. When I can help I will take part to find a solution. – Reporter Jan 12 '16 at 10:35
  • I was referring to your code [here](http://stackoverflow.com/questions/18235156/adding-next-random-previous-buttons-to-this-random-image-script). I now want to switch to server side script to achieve similar results, but i have no knowledge in php and mysql to write code for it – Sam Mak Jan 12 '16 at 12:18
  • Simpley I don't know which language you want to use. And second in this thread you can see a lot of comments whose drecase the readablity. Third: In the new post you can referer to this question. – Reporter Jan 12 '16 at 12:31