rel=image_src isn't changing the thumbnail - meta-tags

I added this code to the head but when I try to post something about a website inside a Facebook page, the image that I specified is still not showing up as an option. I'm using wordpress as a CMS. Any ideas why?
<meta content="something" name="title">
<meta content="something="og:description">
<link href="thumbnail.jpeg" rel="image_src">

Try using the Facebook Debugger to pin-point the issue.
Sometimes there is a caching issue and feeding your URL through this tool forces Facebook to scrape your URL again hence refreshing the cached og:tags
Further more your og:tags should look more like this :
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
Notice the property attribute and not the content attribute that you (possibly) used. The correct syntax is available at this link : http://ogp.me/

Related

Instagram ?__a=1 query: Why do I get login page instead of JSON?

Here is a sample url that returns JSON of the instagram user's data: https://www.instagram.com/therock/?__a=1
And it returns JSON like this:
{
"logging_page_id":"profilePage_232192182",
"show_suggested_profiles":true,
"show_follow_dialog":false,
"graphql":{
"user":{
"biography":"founder",
"blocked_by_viewer":false,
"business_email":null,
"restricted_by_viewer":false,
"country_block":false,
"external_url":"https://projectrock.online/7ad",
"external_url_linkshimmed":"https://l.instagram.com/?u=https%3A%2F%2Fprojectrock.online%2F7ad&e=ATMKh6M0eOgq-_jVoR3-xJ0Q2wwVSenYemMoYM0A0nWrW9Y5P7mDXX1dkk2dDLidhEuV1Wees7Z3teLJqp7vB2k&s=1",
"edge_followed_by":{
"count":199139001
},
"followed_by_viewer":false,
"edge_follow":{
"count":406
},
"follows_viewer":false,
"full_name":"therock",
"has_ar_effects":false
I am working on an ASP.NET Core API and have an endpoint that takes in instagram handle and parses the JSON. It works fine locally, but when I hit the same endpoint on the Azure-deployed API, I get the log in page instead:
<!DOCTYPE html>
<html lang="en" class="no-js not-logged-in client-root">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Login • Instagram
</title>
<meta name="robots" content="noimageindex, noarchive">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#ffffff">
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover">
<link rel="manifest" href="/data/manifest.json">
I tried by using a third party browser-as-service (PhantomJsCloud) but returns the same log in page. I thought it was the CORS policy, but fixing it didn't work, and also setting the cookie returned, but to no avail. I am really lost here, I'd be really thankful if anyone can point to why this is happening. Thank you!
probably instagram don't want you to fetch it like that and has some mechanism to identify that your request is done programmatically. I assume when you call it in the browser it is working. You can try to cypress or puppeteer to still make it work or probably use the official api with tokens etc.
EDIT:
okay.. I played a little bit around and could make it somehow work, but not sure how reliable this is:
first I started with the following: https://codelike.pro/fetch-instagram-posts-from-profile-without-__a-parameter/
after having the parsed JSON object I searched for entry_data.ProfilePage[0].graphql.user.edge_owner_to_timeline_media.page_info.end_cursor --> used end_cursor for the following request:
https://www.instagram.com/graphql/query/?query_id=17888483320059182&id=928659671&first=100&after= where you need to used the end_cursor for the &after query param. query_id is for Media in the instagram account, id is the id of the instagram account (you can get the id of the instagram account from the parsedObject)
query_id is some kind of hardcoded thing from instagram, other ids can be found here: https://gist.github.com/Carlos-Henreis/2df27431fa5d7a84b7a5e57ee1bf6ae2#file-query_id-csv
Edit 2:
Realized this will only work when your ip is also not detected by instagram or you send a cookie of a logged-in session, otherwise you wont get the ProfilePage but a LoginAndSignupPage instead unfortunately
for more info, see here: https://stackoverflow.com/a/57722553/5195852

how to set X-Frame-Options for local file

I create a web browser in python3 with pygobject (gtk3 and webkit2) and I want create a home page include google. I create a html file with a iframe but I see the error :
Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
How I can set X-Frame-Options ? All the solution in the web is a configuration in a local serveur but I don't have local serveur.
Here is my home page
<!DOCTYPE html>
<html>
<head>
<title>(Nouvelle page)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<iframe src="https://www.google.com/"></iframe>
</body>
</html>
This is not something you can fix locally, unfortunately.
There is a similar question here: https://stackoverflow.com/a/8700754/2773979
The problem isn't that your page is missing that header, it is that Google sets this header precisely to prevent people from embedding the site into an iframe. Browsers comply to this by refusing to load/display the content of the iframe.
Note that there are solutions, like proxying the google page, but those are probably against the terms of service.

Smooth Streaming Apple URL gives 404

I have followed the walkthroughs to make an IIS Smooth Streaming publishing point support Apple devices, but have run into a problem: the target URL for the <video> tag generates a 404 response.
My isml is as follows:
<?xml version="1.0" encoding="utf-8"?>
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<meta name="title" content="" />
<meta name="module" content="liveSmoothStreaming" />
<meta name="sourceType" content="Push" />
<meta name="publishing" content="Fragments;Streams;Archives" />
<meta name="estimatedTime" content="36000" />
<meta name="lookaheadChunks" content="2" />
<meta name="manifestWindowLength" content="0" />
<meta name="startOnFirstRequest" content="True" />
<meta name="archiveSegmentLength" content="0" />
<meta name="formats" content="m3u8-aapl" />
<meta name="m3u8-aapl-segmentlength" content="10" />
<meta name="m3u8-aapl-maxbitrate" content="1600000" />
<meta name="m3u8-aapl-allowcaching" content="False" />
<meta name="m3u8-aapl-backwardcompatible" content="False" />
<meta name="m3u8-aapl-enableencryption" content="False" />
<meta name="filters" content="" />
</head>
<body>
</body>
</smil>
The html I'm using is:
<!doctype html>
<html>
<head>
<title>Apple streaming IIS test</title>
</head>
<body>
<h1>Live Stream</h1>
<video width="640"
height="360"
src="http://10.1.1.22/video.isml/manifest(format=m3u8-aapl).m3u8"
autoplay="true"
controls="true">
Live
</video>
</body>
</html>
Note that when I type the URL http://10.1.1.22/video.isml/manifest into my browser, I get the correct XML file for Silverlight-based streaming, but adding either (format=m3u8-aapl) or (format=m3u8-aapl).m3u8 (as per these instructions) causes a 404.
Edit: I've tried a few more things with no success, but they might give insight into what's failing:
The URL http://10.1.1.22/video.isml/manifest(foo=bar) gives me the exact same response as /manifest, suitable for Silverlight.
The URL http://10.1.1.22/video.isml/manifest(format=foo) gives me a 404.
The URL http://10.1.1.22/video.isml/manifest.m3u8 gives 400 bad request.
The URL http://10.1.1.22/video.isml/manifest(foo=bar).m3u8 gives me the Silverlight response.
So it seems the extension doesn't mean anything to the server but it can't parse it if parenthesized arguments aren't present. More importantly, it's clear that the server handler is actually running for /manifest(format=m3u8-aapl) but generating a 404 in some kind of sub-request. We can rule out the server not understanding the URL and failing to run the correct handler.
After exploring some related questions, I came across this answer: The stream needs to use h.264 video and AAC audio.
Unfortunately, it's not quite that simple. The free version of Expression Encoder 4 doesn't support h.264 or AAC; they are locked down and advertised as a paid feature. The thing is, Microsoft refuses to sell Expression Encoder anymore but nonetheless haven't made these features free or offered any kind of alternative! All the third-party options they suggest are astronomically priced and geared towards large corporations.
After searching painstakingly for a reasonably priced third-party replacement, I came across a program called Unreal Media Server which both supports h.264/AAC and will output to a Smooth Streaming publishing point. (Installing a DirectShow codec pack like CCCP is also necessary.)
Just when I thought I was finished, I discovered to my horror that attempting to stream made a w3wp.exe process crash. Saying 'yes' to the offer to debug showed me a stack trace with an access violation in mpeg2tssink.dll. Fortunately, the first (and only relevant) Google search result for mpeg2tssink.dll was this question where someone else had the exact same problem. The fix was to grant the IIS_IUSRS account full control of the C:\inetpub\media\archives folder where Smooth Streaming saves its video chunks. Then things started to work.
So in short:
On the computer which provides the video stream, install CCCP, Unreal Media Server, and Unreal Live Server.
On the server, grant IIS_IUSRS (or whatever user App Pools are run under on your version of Windows/IIS) permission to modify the folder where video fragments are kept, probably C:\inetpub\media\archives

SVG in IMG tag not displaying in Mobile Safari / iOS Chrome

I'm trying to use an SVG file in an IMG tag. In my local environment works, but when pushing to the server it doesn't. I assume I have an issue with the type of document served, but can't figure how to fix it. Here's the code that loads the SVG:
<img src="images/icon-reputation.svg" />
Here's my DOCTYPE and header info:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>SVG</title>
</head>
Any clues? Thanks.
Make sure your web server is serving the SVG files with the correct ContentType. You can check what the type is by looking in the Net/Network section of your (desktop) browser developer tools.
The way you configure the server depends on the server of course. But, for example, for apache it is:
AddType image/svg+xml svg

How do I disable "compatibility mode" in Internet Explorer 8 for my website?

When users go on my website, I want to force them to use Internet Explorer 8 non-compatibility mode.
If they use compatibility mode, my website doesn't work.
How to force it off? Is it a meta tag?
Edit: Yes, you can do it. The solution is this:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
You can do it as a tag or as a setting in IIS (with the tag), set to IE=EmulateIE8
You can't force IE into non-compatibility mode.
What you can do is to tell the browser that the page works in IE 8, then it will remove the compatibility button in the address bar. A user can of course still force the browser into compatibility mode, but not with just a click of a button.
See: How to avoid ie8 compatibility button?
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<META content="IE=edge" http-equiv="X-UA-Compatible">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=IE9" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
all and any of it might help but it all depend on your script.
You do not need to use all it is just different way to say it.
it depend on script that you use on site
You need remove port number from your domain site name site:1180/index/
If browser see port number in url - hi "think", that's is intranet.
setup your dns server for friendly urls - site.com/index and it work OK
Here is some JS that helps
Code in the following condition runs only in IE7 and lower:
The below code works if the user is on IE7 or even in IE 8 (Compatibility View only) then you can navigate them to your Error Page.
if (document.all && !document.querySelector) {
alert('you are on IE7 or lower');
window.location.href = "URL";
}
The next one runs in IE8, but not in IE7 or IE9+:
if (document.all && document.querySelector && !document.addEventListener) {
alert('you are on IE8');
window.location.href = "URL";
}
I would recommend against doing this, even if you can find a way to do it. Compatibility Mode is a setting the user is meant to have control over. You shouldn't be changing it out from under the user.
You should either fix your site to work with compatibility mode, or just tell your users not to do it.

Resources