Question

I’ve spent several days attempting to resolve this issue without success. The issue is that when a user clicks on a like button it does not indicate that they like anything on their wall. While the code works correctly on my test setup at localhost, it does not work in production.

My client is using an image gallery plugin for wordpress along with a lightbox plugin known as FancyBox to show larger versions of images when a user clicks on the thumbnail. He has asked me to add a facebook like button to each fancybox.

Since fanyboxes are dynamically generated, I generate a new like button iframe whenever a fancybox is rendered. The URL used by the like button iframe is unique to the picture clicked on by the user. The code adds &photo=/location/of/photo.jpg to the gallery URL. Then the entire custom URL is passed through encodeURIComponent() and handed to the iframe.

Here is the code snippet used to generate the iframe

var currentURL = document.URL,  
    currentIMG = $("#fancybox-img").attr("src").split("http://www.downsplash.com").pop();  
if (currentURL.match("&photo=")) {  
    var currentURL = currentURL.split("&photo=").shift();
};
var thisURL = encodeURIComponent(currentURL + "&photo=" + currentIMG);
<span id="fancybox-title-over">
    <div id="facebook-like" style="display:inline-block;">
        <iframe src="//www.facebook.com/plugins/like.php?href=" + thisURL + "&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=true&amp;action=like&amp;colorscheme=dark&amp;font&amp;height=21&amp;appId=314592468583405" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>  
    </div>
</span>

Here is a link to the code running in production.

The like button code seems to work without a hitch, it allows you to like and unlike photos. The only issue is that when a photo is liked, nothing appears on the users wall.

Notes:

1. Everything works correctly when using just the base URL without the
   custom &photo=/location/of/photo.jpg
2. When testing this code on localhost it DOES post to facebook.

I’m not sure why these likes are not showing up on the users facebook wall. Does anyone have any ideas?

Answer 1

As pointed out by Heera, the production code IS working but when Facebook posts to the users wall it posts the URL of the portfolio NOT including the &photo=/location/of/photo.jpg. This is happening because there is an Open Graph meta tag in the header that feeds Facebook the portfolio URL and nothing more.

<meta property="og:url" content="http://www.downsplash.com/?portfolio=portraits">

I was not able to see a post on my wall since I had already liked the portfolio URL. As it turns out, this open graph tag is automatically added to the header by the both the ‘Simple Facebook Connect’ and ‘Tweet, Like, Google+, and Share’ plugins. This also explains why my code works on my localhost test site because Facebook could not scan localhost for open graph tags when I liked a photo.

Thanks for the help!

Edit:

After I disabled the plugins and made sure my open graph tags displayed properly in html, I experienced an issue related to Facebook caching the open graph tags for a given URL. This caused the previous incorrect URL redirection to continue occurring. I resolved this by visiting Facebook’s Open Graph Debugger and entering the URL. This causes Facebook to refresh the cache of open graph tags for the page.