Simple social share fancybox popup

Question

I'm surprised I can't find a Joomla extension to do this. jquery & fancybox are already installed on the site so both are available for use, so I decided to roll my own. Looking for examples to speed the completion of this task.

I have social media icons already displayed and positioned, and I want to popup a jquery fancybox when one is clicked that allows users to share a specific URL (parameter) on a social media site.

I found this page (http://atlchris.com/1665/how-to-create-custom-share-buttons-for-all-the-popular-social-services/) which describes the URL to submit links to various social media sites.

The question is how to create a simple form inside the fancybox that has input fields for the title and description and a submit button to invoke the URL for each specific social media that urlencodes the input field values for title, description, and the URL to be shared (passed in as a parameter). There would be a list of submit buttons ("Click the icon to share with: fbIcon, twIcon, g+Icon...) that would submit the form (as a GET request) and display any results within the fancybox. The user then closes the fancybox with upper right corner X.

The example here: http://fancybox.net/howto is a bit thin on the details for using an iframe, which I presume is necessary to capture the results from the social media site or to allow that site to display a form to login. I suppose ajax could be used instead of an iframe too.

I envision this as a simple javascript function I could trigger with an onclick method of the social icon I already have placed. The parameter of the function is the URL to share. Which social site it is shared with is decided by the user in the fancybox popup window.

I found tons of social media extensions for Joomla but none that would work this way, and most connected to 3rd party sites (in addition to the social media site) for code, counters, statistics and other reasons.

Any ideas on how best to do this will greatly help me out to avoid reinventing the wheel. Thanks!

Answer 1

jQuery(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
    beforeShow: function () {
     var engTitle = jQuery(this.element).data("caption");
     var cResult='<div class="pop-content">';
       cResult+='<div class="pop-nptitle">'+this.title+'</div>';
       cResult+='<div class="pop-entitle">'+engTitle+'</div>';
       cResult+='<div class="social-share">';
        cResult+='<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a>';
        cResult+='<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
       cResult+='</div>';
      cResult+='</div>';
     this.title = cResult;
    },
    afterShow: function () {
        // Render tweet button
        twttr.widgets.load();
    },
    helpers: {
        title: {
            type: 'inside'
        }, //<-- add a comma to separate the following option
        buttons: {} //<-- add this for buttons
    },
    closeBtn: false, // you will use the buttons now
    arrows: false
});

<div class="col-md-4">
<a class="fancybox" title="CSK_5864" data-caption="Sunflower Farming" href="http://localhost/photoedition/wp-content/uploads/2015/11/CSK_5864.jpg" rel="gallery">
<div class="pic">
<img class="img-responsive" alt="" src="http://localhost/photoedition/wp-content/uploads/2015/11/CSK_5864.jpg">
<span class="pic-caption top-to-bottom">
<h1 class="pic-title">CSK_5864</h1>
</span>
</div>
</a>
</div>