Adblock Plus is blocking my custom Facebook feed's images - javascript

I am using Facebook's graph API to pull images posted to a company FB page and putting them on a web page. Some images show up fine, some don't show up at all. Looking at the page's source code I can see that all the images that are working have a URL that begins: graph.facebook.com/... and the images that won't load begin with: facebook.com/ads/images/...
Suspecting that the /ads/ part of the URL was triggering Adblock to block the images, I disabled Adblock for the page and the missing images appeared.
Given that is impractical to expect all visitors not to use Adblock, I'm wondering how I can fix this issue.
Thanks!

Its the way filters are implemented inside Adblock. For them, somehow the api and image along with the ip lookup translates to an ad which should be blocked. They use lot of parameters to determine if it translates to an ad or not like comparing image dimensions, filename, social media links, behaviour etc. So about the question of fixing it would simply would be to correct the way Adblock works or improving its detection for the ads in this case.

Related

Site page speed (Youtube non cookie )issue - when implementing Youtube video play using <iframe>

We developed a CMS using craft cms. We are having several company youtube videos to play in our site.
Now we are implemented like
<iframe loading="lazy" id="clickVideo" height="635" width="100%" src="https://www.youtube.com/embed/<code>?rel=0"> </iframe>
When we checked the page speed using google and several other sites. They are showing errors as in the screenshot below:-
The urls they are showing errors is
https://www.youtube-nocookie.com/s/player/7acefd5d/player_ias.vflset/en_US/base.js
https://www.youtube.com/s/player/7acefd5d/player_ias.vflset/en_US/base.js
How we need to fix this issue? Any other way for implementing this? Please help.
First of all, the warnings indicate that you have iframes from both youtube-nocookie.com and youtube.com on one page. Those are essentially the same (the former being slightly better at preserving privacy), but since they are a different origin, the browser can't reuse any assets between them. You can see this in your screenshot – the browser is loading base.js from both origins, which means the performance impact is doubled. So the first step would be to decide whether you want to use youtube-nocookie.com or youtube.com and then use that domain for ALL iframes on your page. This will cut the performance impact in half.
Beyond that, embedded YouTube videos will load whatever resources Google wants them to, so you can't really optimize the player itself. You're already lazy-loading the iframes. Beyond that:
Consider if you actually need an iframe or if a link to the video would suffice. If you don't embed any videos, they don't impact performance.
You can also defer loading the iframe until a user explicitly clicks a button to load it. This will help with initial loading performance and have the nice side-effect of being privacy-preserving, which is relevant if you have users in the EU. There are several tools to achieve this, for example the Contextual Consent feature of klaro.

Using an animated gif as my website's favicon

This Js can make a video & simple image as your site's favicon by using this:
var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');
here's the Github page.
Is there a way to make an animated gif as my website's favicon using this concept.
P.s: I'm noob so if anybody make a fiddle & show a demo that'll be great!
You can simply use the GIF as regular in your HTML page and if it is animated it will be animated as well in the browser, just rename it to favicon.ico and add it as favicon tag in the header (example: http://55chan.org/ :) )
Sadly it will only work in Firefox, e.g.:
notice Chrome does not support it:
- https://bugs.chromium.org/p/chromium/issues/detail?id=19731
(Outside of using a single Animated Gif (see https://en.wikipedia.org/wiki/Favicon#File_format_support). You can use the workaround as specified in the comments by dynamically changing the image.)
Broader
What you have to take into account is that it is not only your browser that will show you the animated favicon. Lots of applications will "spider" your site and will use the icon in different ways e.g. to show as icon next to personal link collections or in search pages.
A while ago i wrote https://plugins.svn.wordpress.org/wp-favicons/trunk/includes/server/class-http.php which is basically a crawler for many kind of favicons taking into account data uris, different http status codes, wrong mimetypes, etc... but it will not have onboard it's own javascript parser to find animated sequences provided by a client-side script. I doubt that any crawler will actually do this.
So take into account the purpose and that favicons in general are not only ment as identification next to a uri in a browser or browser bookmarks "list".

How to show insecure content in iframe

In short , I'm developing a google chrome extension , when I add any url starting with http:// to source attribute to an iframe, I get a message like :
[blocked] The page at 'https://www.facebook.com/' was loaded over
HTTPS, but ran insecure content from 'http://youtu.be/m0QxDjRdIq4':
this content should also be loaded over HTTPS.
and I don't see the content in the iframe !
so how can I overcome this ?
what I want to achieve is that : I hide facebook adds , and in its place I added an iframe instead, I detect when the mouse is hovering over a link contained in a post, then I want to show the link's content in an iframe.
What are my possible alternatives? I don't need to enable showing insecure content in chrome because it is a chrome extension that I will publish!
It seems that the security limit is strict, so we need a way to work around that.
What if you could load the page using other means than an <iframe> and insert it into the page afterwards? There are multiple ways to do that, ranging from more practical to less realistic.
You can use the Chrome captureVisibleTab API to generate a screenshot of a website as an image, exactly what you need. It sounds like you need a visible tab to use this API, but you can actually specify any Chrome window as a target and you can create Chrome windows unfocused and hidden behind the edge of the screen.
If captureVisibleTab provides trouble in step 2, there is also pageCapture API to get an entire page as a single content object.
You can also use a server to create screenshots. Serve a simple application over HTTPS that uses PhantomJS to create a screenshot. An advantage of this approach is your server is likely to be much faster at screenshot generation. The disadvantage is you need to pay for the server.
You could also use xhr in your extension background process (which is not limited by the security limitation) to get the HTML. This wouldn't get any resources, but that could be a beneficial thing if you want a very quick if inaccurate screenshot. Just load HTML, parse and detect links to stylesheets, download them and inject those stylesheets into the HTML as <style> tags.
The resulting HTML can be injected to the <iframe> manually. You could even inject scripts and images this way, but that would be harder and less useful, since you need a quick screenshot of how the page looks like.
I think using built-in Chrome functionality for screenshots is the best bet, if only you can make the user experience good enough.
First and stupid way: change http in link on https. But youtube and I think many other sites don't allow to show their content in iframes. try it and you get Refused to display 'link' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
Second and at least stupid way: remove protocol from link, like //youtu.be/m0QxDjRdIq4 and you get protocol, that on this page. But a situation similar to the previous.
Third way for youtube only: you can generate iframe with src like //www.youtube.com/embed/m0QxDjRdIq4 and user can see the video.
Fourth way, not for all sites: use site API's - not a best solution, but like a option.
Fifth way, but impossible (I think): try to get page's content with javascript and regenerate it in way, that you need.
Sixth way, needs powerfull server: create an service on your server, which will download pages and resend it to users. One problem - linear dependence server's power of requests.
Seventh way, I forgot that it's extension: you can open link in another tab/window, get it content, close tab/window and show content in tab that you need.
Eigth way, the best, I think: use YAHOO yql like this:
$.getJSON("https://query.yahooapis.com/v1/public/yql?q=select"
+"* from html where url='youtube.com/watch?v=m0QxDjRdIq4'"
+"&format=json&diagnostics=true&callback=?"
, function (data, textStatus, jqxhr) {
// process data
}
}
Demo on jsFiddle

Is it possible to disable html inside a frame or embedded video? If yes, how?

I'm creating a website which is for video streaming. Most of the videos shown on my website were embedded from different video hosts. I found out that these embedded videos have heavily annoying ads on it that forces you to click before you can actually play the video. That reduces the quality of the video to the users. This is the screenshot of the video.
Ads were placed on the center that forces you to click before you can play the video.
I look at the source code and this is what I found.
Is it possible to hide or disable the html inside the iframe? Or any other solutions (scripts) to hide these on the video. Thanks.
bodi0 offered the best solution, however you can also tell the viewer to use adblock or any "css changing" plugin like Stylish, grab the ads' class / id and make it display: none;
however, these ads are what keep your video service free. They paid for the service hosting and maintenance fee. If you feel the need to go ad free, consider getting a premium account.
Yep, you need to do couple of things:
Parse the URL and get the contents of the iframe (via curl functions will be fastest, if you use PHP).
Using PHP (or other scripting language) RegEx filter and inject CSS, which will overwrite the old code and it will replace the ads (or hide them).
Save the modified page content in a variable and include it in your script file, where you output the video page content.
However the exact answer to your question is impossible, because your question is too broad.
Also keep in mind, that this procedure may be illegal (copyrights violations mostly), if you do not have explicit consent from the owner of the videos, because you grab and modify the contents from his website.

Multiple og:image tags not being displayed by share dialog or update status box

I am currently working a new feature to allow users to select the thumbnail they would like to use when sharing an page on Facebook. The user should be able to use the Facebook widgets like the send dialog or share buttons as well as simply cutting and pasting the URL into their udpate status dialog on Facebook.
I have read much of the documentation, which seems to indicate that I simply need to add multiple og:image tags in the page being shared. I have done this and run the page through the linter so the cache gets updated.
When passing the page to the share.php directly, effectively removing any of my client side code and letting the dialog present what it is scraping, I am seeing 3 images from the page available.
I am not sure what I am doing wrong here.
Here is the linter result, the graph object, the sharer.php link and the page. Anyone have ideas of what I could be doing incorrectly?
I have confirmed that at least the og:title tag is being respected by the share dialog. I have also tested the size of the images, and included file extensions as suggested below.
I know this works because buzzfeed has the exact functionality I am going for. I have reduced my example down to only the core pieces I think should work. You can find the full source here.
Could it be the XML namespace in the top HTML tag?
In the BuzzFeed article, it's:
xmlns:og="http://opengraphprotocol.org/schema/"
In your page its:
xmlns:og="http://ogp.me/ns#"
On the Buzzfeed article, the content attributes in the og:image links point to named .jpg files, vs your links which do not have a filename/extension at the end.
It may be required to include a filename in the links, especially if it's basing image detection on the file extension.
EG:
Buzzfeed:
<meta property="og:image" content="http://s3-ak.buzzfeed.com/static/campaign_images/webdr02/2013/3/18/11/10-lifechanging-ways-to-make-your-day-more-effici-1-2774-1363621197-4_big.jpg" />
Yours:
<meta property="og:image" content="http://statics.stage3.cheezdev.com/mediumSquare/3845/4AC356E3/1"/>
After some tests, I guess it's a caching issue.
Looks like the sharer is caching the graph, using the og:url as a key, so that different querystrings in the sharer won't bypass the cache, if they do not impact the og:url value.
Obviously, the debug tool don't use such cache.
If I'm right (this is just an insight), you can either wait that the cache entry expires or try with a different og:url. Moreover, to ease the test, keep the new og:url equal to the new page location.
So funny story, I'm a developer at BuzzFeed and came across this while trying to figure out why our share dialogs suddenly stopped showing the thumbnail picker.
It looks like Facebook disabled the functionality. It briefly made a reappearance on 1/14/2014 but they introduced a bug that prevented sharing from any pages with multiple og:image tags defined. (See: https://developers.facebook.com/bugs/1393578360896606/)
They fixed the bug, but as of 1/22/2014 it still looks like the thumbnail picker is disabled.
The Sharer.php script on the Facebook site doesn't support all the OG tags as far as I know. The images are scraped from the page content itself, so if you want your three images to appear on the Sharer.php script, include them in your content.
Sharer.php has been officially deprecated by Facebook, so I wouldn't be surprised if certain functionality does not work with it. While it still works, it was always the simplest option and I'm guessing they never built the link image scraping from the og items into it.
I was able to find this article, which shows one way that you can specify exactly what images are available to the sharer.php share page. You can specify one (or multiple) images to share with a URL structure like the following:
http://www.facebook.com/sharer.php?s=100
&p[url]=http://bit.ly/myelection
&p[images][0]=http://election.gv.my/assets/vote.png
&p[title]=My customized title
&p[summary]=My customized summary

Categories

Resources