Trigger Social Share Popup from Select Dropdown

Question

I am using the jquery-based script SocialShare.js to add social sharing to a page. In the code below, you will see two ways to trigger it:

With simple buttons. When you click the button, the social sharing popup is opened. This works!
I have create a dropdown for the same social sharing options. My objective is that when someone selects one of the options the same social sharing popup is opened. This doesn't work.

I've provided my code below:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://learnkraft.com/SocialShare.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $('.share').ShareLink({
                    title: 'SocialShare jQuery plugin',
                    text: 'SocialShare jQuery plugin for create share buttons and counters',
                    image: 'http://cdn.myanimelist.net/images/characters/3/27890.jpg',
                    url: 'https://github.com/AyumuKasuga/SocialShare'
                });
                $(".social_sharing").change(function() {
                  console.log('On change triggered');
                   $(this).ShareLink({
                       title: 'SocialShare jQuery plugin',
                       text: 'SocialShare jQuery plugin for create share buttons and counters',
                       image: 'http://cdn.myanimelist.net/images/characters/3/27890.jpg',
                       url: 'https://github.com/AyumuKasuga/SocialShare'
                   });
                });
            });
        </script>
    </head>
    <body>
    <div class="row">
        <button class='btn btn-primary share s_twitter'>Twitter</button>
        <button class='btn btn-primary share s_facebook'>Facebook</button>
        <button class='btn btn-primary share s_pinterest'>Pinterest</button>
        <button class='btn btn-primary share s_gmail'>Share via email</button>
    </div>
    <div class="row">
      <select name="social_share" class="social_sharing">
        <option value='1' >Share This story</option>
                <option value='1' class="share s_twitter" >Twitter</option>
                <option value='2' class="share s_facebook" >Facebook</option>
                <option value='3' class="share s_pinterest" >Pinterest</option>
            </select>
    </div>
    </body>
</html>

score 1 · Answer 1 · answered Dec 14 '16 at 08:51

I never used this plugin, but in the dropdown you are not getting the value because you used this. In order to get the value, you can't use this sintax:

<div class="row">
  <select name="social_share" class="social_sharing" id="dropdownShare">
    <option value='1' selected="selected" disabled>Share This story</option>
            <option value='1' class="share s_twitter" >Twitter</option>
            <option value='2' class="share s_facebook" >Facebook</option>
            <option value='3' class="share s_pinterest" >Pinterest</option>
        </select>
</div>

and

$(".social_sharing").change(function() {
              console.log('On change triggered');

              //Use this to get the option value
              var e = document.getElementById("dropdownShare");
              var selected = e.options[e.selectedIndex].value;

               $(selected).ShareLink({
                   title: 'SocialShare jQuery plugin',
                   text: 'SocialShare jQuery plugin for create share buttons and counters',
                   image: 'http://cdn.myanimelist.net/images/characters/3/27890.jpg',
                   url: 'https://github.com/AyumuKasuga/SocialShare'
               });
            });

Hope it was wat you were looking for.

You're right about wrongly using 'this'. I resolved that by using $('select[name="social_share"] :selected').ShareLink() . However, the trigger was not getting recognized also because in the plugin code I noticed that it is specifically looking for the click event to open the popup. So, i changed the selector as above and bypassed the click event in the plugin and it is working great now. — asanas, Dec 14 '16 at 08:56

score 0 · Answer 2 · answered Dec 14 '16 at 08:59

0

The problem was resolved by doing two things:

Changing $(this).ShareLink(...) to $('select[name="social_share"] :selected').ShareLink()
Tweaking the plugin to bypass the click event it was specifically looking for.

answered Dec 14 '16 at 08:59

asanas

3,782
11
43
72

Trigger Social Share Popup from Select Dropdown

2 Answers2