javascript - 個別のアイテムのページにある複数のソーシャル共有ボタン

Question

さまざまな画像を含むプレーンな HTML ページがあり、各画像をクリックすると、内部に共有ボタンがあるライトボックスが開きます。URL の ID を使用して、いいね! がどの画像に対するものであるかを強調する予定でしたが、facebook と twitter はこれらを取り除いているようです。

画像ごとに何百もの個別のライトボックスを用意せずに、現在表示されている画像に固有の共有を行うにはどうすればよいですか?

HTML の例:

        <div class="tile" id="tile-01">
            <a href="#tile-01" data-name="Jo" data-title="Chartered Surveyor">
                <img src="media/img01.jpg" alt="Jo" />
                <p class="name">Jo - Chartered Surveyor</p>
            </a>
        </div>

<div class="overlay">
    <div id="lightbox">
        <div class="lightbox-content">

        </div>
        <a href="javascript:;" class="close"></a>
        <div class="details">
            <h2>Claire</h2>
            <span class="job-title"></span>
            <div class="social">
                <div class="fb-like" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true"></div>
                <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
                <a href="//pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" ><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>
            </div>
        </div>
    </div>
</div>

Javascript:

    <script type="text/javascript">
    $(function(){
        var $container = $('#gallery');
        $container.imagesLoaded( function() {
            $container.masonry();
        });

        $('.tile a').click(function(){
            $('.overlay').fadeIn();
            $img = $(this).find('img').clone();
            $('.lightbox-content').html($img)
            $('#lightbox h2').text($(this).data('name'))
            $('#lightbox span.job-title').text($(this).data('title'))
            return true;
        })

        $('.overlay').click(function(){
            $(this).fadeOut();
        })
    })
</script>