1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to make these social sharing buttons to work?

Discussion in 'HTML & JavaScript' started by SpecialOne, Dec 4, 2014.

Tags:
  1. SpecialOne

    SpecialOne Registered Member

    Joined:
    Jan 12, 2011
    Messages:
    65
    Likes Received:
    21
    I got this free lander from LeadPages, but can not make these social buttons to work. I think I should change something at url parameter. Could someone help?


    Code:
    jQuery(function($){
    
        $(".share-button").click(function(event){
            event.preventDefault();
            var service = $(this).data('service');
            switch(service) {
                case 'facebook':
                    url = ( LeadPageData['facebookurl']['value'] ? LeadPageData['facebookurl']['value'] : document.URL);
                    window_size = "width=585,height=368";
                    go = 'http://www.facebook.com/sharer/sharer.php?u=' + url;
                    break;
                case 'twitter':
                    url = ( LeadPageData['twitterurl']['value'] ? LeadPageData['twitterurl']['value'] : document.URL);
                    window_size = "width=585,height=261";
                    go = 'http://www.twitter.com/intent/tweet?url=' + url;
                    break;
                case 'google':
                    url = ( LeadPageData['googleurl']['value'] ? LeadPageData['googleurl']['value'] : document.URL);
                    window_size = "width=517,height=511";
                    go = 'http://plus.google.com/share?url=' + url;
                    break;
                default:
                    return false;
            }
            window.open(go, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,' + window_size);
        });
    
    });
    Code:
    <a href="http://domain-name.com" id="section-content-sharing-facebook" data-service="facebook" class="share-button"><img src="img/facebook.gif"></a>
    <a href="http://domain-name.com" id="section-content-sharing-twitter" data-service="twitter" class="share-button"><img src="img/twitter.gif"></a>
    <a href="http://domain-name.com" id="section-content-sharing-google" data-service="google" class="share-button"><img src="img/google.gif"></a>
    
    
     
  2. ZeroHats

    ZeroHats Newbie

    Joined:
    Jul 20, 2013
    Messages:
    26
    Likes Received:
    4
    Does anything happen when you click them?
     
  3. lightning37

    lightning37 Newbie

    Joined:
    Dec 12, 2014
    Messages:
    21
    Likes Received:
    4
    Just to get the basics out of the way, is jQuery linked on the page you are trying to run that on?
     
  4. SpecialOne

    SpecialOne Registered Member

    Joined:
    Jan 12, 2011
    Messages:
    65
    Likes Received:
    21
    No, it does not happen nothing.
     
  5. SpecialOne

    SpecialOne Registered Member

    Joined:
    Jan 12, 2011
    Messages:
    65
    Likes Received:
    21
    Yes, jQuery is on the page too.
     
  6. lightning37

    lightning37 Newbie

    Joined:
    Dec 12, 2014
    Messages:
    21
    Likes Received:
    4
    Sorry for not PMing you back, but I don't have enough posts to PM yet. It looks like the functions.js file is checking to see if the page is hosted on LeadPages, but the check isn't completing. I simplified this by just passing the current URL to the share buttons.

    I can't post the corrected code here because I'm too new. So, I made a CodePen for it - hxxp://codepen.io/techsock/pen/bNeGXW

    Just replace the contents of functions.js with the JS on that CodePen

    If you want to share a specific URL instead of the current page's URL, replace line 4 with this:
    Code:
    url = 'place your URL here';
    
    You'll want to make sure you add the correct meta tags to the page for each of the social networks. I would suggest hxxp://moz.co m/blog/meta-data-templates-123 as a good place to start.

    **You'll need to fix URLs in this post to use them**