0

I'm in the process of adding Facebook like and share buttons to a site I'm working on. What I'm trying to achieve is to have L+S buttons for each item in the portfolio, which are displayed as modal content when a thumbnail is clicked. What is currently happening is that the links to like or share don't include the modal id, which means the whole portfolio page is linked, rather than a specific item. The html for the thumbnails looks like this:

<div class="col-md-4 col-sm-6 portfolio-item">
    <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
        <img class="img-responsive img-portfolio img-hover" src="img/homePage/700x450alfa.png" alt="Image of the name Alfa cut from 38mm Nordic Spruce">
    </a>
</div>

And that links to this:

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl"></div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">

                            <h2>Alfa</h2>
                            <p class="item-intro text-muted">38mm Nordic Spruce</p>
                            <p>Choose your own name, word or design to be cut from wood. <a href="contact_2.php?subject=Alfa+38mm+Nordic+Spruce">Get in touch</a> to discuss an order like this one</p>
                            <img class="img-responsive img-centered" src="img/may2017/alfa1.jpg" alt="Image of the name Alfa cut from 38mm Nordic Spruce">
                            <img class="img-responsive img-centered" src="img/may2017/alfa2.jpg" alt="Image of the name Alfa cut from 38mm Nordic Spruce">
                            <img class="img-responsive img-centered" src="img/may2017/alfa3.jpg" alt="Image of the name Alfa cut from 38mm Nordic Spruce">
                            <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Window</button>
                                    <!--LIKE BUTTON-->
                            <div id="fb-root"></div>
                            <script>(function(d, s, id) {
                            var js, fjs = d.getElementsByTagName(s)[0];
                            if (d.getElementById(id)) return;
                            js = d.createElement(s); js.id = id;
                            js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7";
                            fjs.parentNode.insertBefore(js, fjs);
                            }(document, 'script', 'facebook-jssdk'));</script>

                            <br> </br>

                            <div class="row text-center">
                            <div class="fb-like" data-href="https://localhost:8888/TTK2/mainportfolio2.html#portfolioModal1" data-width="200px" data-layout="button" data-action="like" data-show-faces="false" data-share="true"></div> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

As you can see, I've pasted the FB JS right into the div, which I know is poor practice, but I had hoped that this would trigger the modal ID, but it doesn't. You can also see that I've got the full address including the modal ID in the data-href field of the button div, but any link generated by clicking will not include the modal ID, and instead links to the original page, in this case, Portfolio. BTW, the buttons for the entire page work as they should. The only thing I can't do is link to a modal. Documentation I've read suggests that it might not be possible to do this, but I wanted to check with the community first. I mean, it SHOULD be possible, right? Ps. I know this code links to a local host address, but it doesn't work in a live situation either. Thanks for looking.

UPDATE - SOLVED. I've found a solution to the first part of this, which was being able to change the url of modal content so that I could add Like and Share buttons. It has been answered Here by @forcefield. Have tested on my page of 100+ hidden modal divs and it works perfectly. Thanks @forcefield!

Conkerface
  • 51
  • 1
  • 9
  • You need to test this "live", otherwise Facebook will not be able to read any of the relevant OG meta data. // I don’t think what you want is actually possible - because you do not have different URLs to share here, but rather one URL, only with different hash parts. Problem is, the hash is merely client-side construct - it is not even send to the server; so even if Facebook would consider them different URLs, it won’t be able to request different sets of OG meta data from your server. – CBroe May 24 '17 at 12:48
  • You should create individual URLs - really different, not just the same with different hash parts - have those return the relevant OG meta data, and share those URLs. If you want to redirect human visitors that follow those links from Facebook back to the "main" page, you can do that f.e. via JavaScript. – CBroe May 24 '17 at 12:49
  • @CBroe Yeah that's what I had hoped to do - give each modal window a unique url so that I could paste that into the code generator for each button, and share only that modal content. Is it possible to create new urls from modal content? I'm searching elsewhere now but it isn't looking good! – Conkerface May 24 '17 at 13:15
  • SOLVED! To append url with modal id, I used https://stackoverflow.com/questions/34154370/bootstrap-3-x-how-to-have-url-change-upon-clicking-modal-trigger this solution. Works perfectly. – Conkerface Jun 05 '17 at 20:46

0 Answers0