Search code examples
facebook-social-pluginsfacebook-iframefacebook-likebox

FB Likebox iframe with stream=true, Video Link issue ( Doesn't open on left click)


This is related to Facebook Likebox social plugin with the stream set to true, when embeded on a webpage. (Tested on Google Chrome 41.0.2272.89 m).

The iframe which is showing the Facebook feed loads the posts correctly. But It seems to be something wrong with the loaded contents.

If a video is posted on the Facebook page the Thumbnail and play button are showed in the iframe correctly. However when video clicked it avoids the related facebook video page from opening on simple left click in a new window ( users have to right click and open in new window! ).

This is because the rel attribute set to "theater" with the ajaxify and ... suppose to open a pop up and obviously it doesn't work (Different domain origin policy). However I need to just simply link the videos to my facebook page's video post (in a new window) so that if the visitors click on the video thumbnail it opens in the new window.. but cant !! and there is no way to change the rel link attribute to "nofollow" because of the domain origin policy.

EXAMPLE:<div class="fb-like-box" data-href="https://www.facebook.com/FacebookDevelopers" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div>

the iframe loads the below for non video posts:

<a href="http://upstart.splashthat.com/" target="_blank" **rel**="*nofollow*" onmouseover="LinkshimAsyncLink.swap(this, &quot;http:\/\/upstart.splashthat.com\/&quot;);" onclick="LinkshimAsyncLink.referrer_log(this, &quot;http:\/\/upstart.splashthat.com\/&quot;, &quot;\/si\/ajax\/l\/render_linkshim_log\/?u=http\u00253A\u00252F\u00252Fupstart.splashthat.com\u00252F&amp;h=SAQECQptA&amp;render_verification=0&amp;enc=AZPzzaOTltKanFvV0HD3aUAnFbPjn2YaOQ0D4SgJC5IRAZjnJA_vMhRLZuHUHYa-lUcs4EmStJRvVZiyQR5jkafgiZYHW53AcZdhoOhD5O8q-1FhF9QugOiizWMzCq-1CjQcUa5IGgm05pcAr6kS1xAs1kGhMCyla1-rBX9k_GawUA&amp;d&quot;);"><div class="_6l- __c_"><div class="uiScaledImageContainer _6m5 fbStoryAttachmentImage" style="width:237px;height:124px;"><img class="scaledImageFitWidth img" src="https://fbexternal-a.akamaihd.net/safe_image.php?d=AQDj75UpVBcxXh62&amp;w=237&amp;h=124&amp;url=http%3A%2F%2Fd24wuq6o951i2g.cloudfront.net%2Fimg%2Fevents%2Fid%2F205%2F2055930%2Fassets%2F6ff.Screen-Shot-2015-02-28-at-12.56.15-AM.png&amp;cfs=1&amp;upscale=1" alt="" width="237" height="124"></div></div></a>

But for a video:

<a href="https://www.facebook.com/video.php?v=10152745113668553" **rel=**"*theater*" **ajaxify**="https://www.facebook.com/video.php?v=10152745113668553&amp;player_origin=widgets" target="_blank"><div class="_46-h _57tt" style="width:237px;height:133px;"><img class="_46-i img" src="https://fbcdn-vthumb-a.akamaihd.net/hvthumb-ak-xpf1/v/t15.0-10/s240x240/11011395_10152745113698553_10152745113668553_3266_400_b.jpg?oh=709f02ee59fbccae1f99b1a3f0ae0202&amp;oe=558030D1&amp;__gda__=1434103771_37a5564f98c084314f22c41b0fa51ede" style="left:-1px; top:0px;" alt="'Facebook is helping developers realize their visions. Register to attend F8 online at http://fbf8.com/stream.html'" width="240" height="135"></div><i class="_6o1"></i><div class="_5b_0 _5bgz"><div class="_578n fsm fwb">01:22</div></div></a>

if you change the rel='' everything works fine !

I tested this after DOM loaded and modified the rel attribute directly on the browser and voila it worked correctly there... But Could you please explain me if this is what it meant to be or ... a bug in facebook or is there anyway to fix this issue ?!

UPDATES( April 8th 2015) I had Reported This Problem to Facebook ! First they filed it as a bug to be fixed and after a while received a reply that they are going to deprecate Facebook likebox. Just noticed now that they have introduced a new API called facebook-page which works with no problem.


Solution

  • I'v reported this to Facebook and they confirm that This is a Bug. UPDATES( April 8th 2015) I had Reported This Problem to Facebook ! First they filed it as a bug to be fixed and after a while received a reply that they are going to deprecate Facebook likebox. Just noticed now that they have introduced a new API called facebook-page which works with no problem. Facebook Page-Plugin