What HTML tags to display video preview in iMessage? - markup

I'm trying to understand how Amazon does it to make this page play a video preview when its link is sent in iMessage:
https://www.amazon.com/Amazon-Fire-TV-Stick-With-Alexa-Voice-Remote-Streaming-Media-Player/dp/B00ZV9RDKK/ref=as_li_ss_tl?ie=UTF8&qid=1495387130&sr=8-2
After a bit of research, I've read multiple times that OGP og:video tags do the trick, however that page contains none.
The video that shows in iMessage is the one that appears as the last product image.
Any idea?

Related

Google Sheet & App Script : how to get image from a link preview?

I am trying to reproduce a RSS reader like Feedly with Google Sheet and displaying with Glide as an app on my mobile phone.
Everything's fine with IMPORTFEED() function with titles, description, URL.
But it seems this function doesn't allow pictures to be displayed even if they are in the feed (which is not all the time).
So I am looking for a way to extract the main image from a blog post... the one displayed when you hover on a link in a Google Sheet cell.
I would like to get the link of that image displayed in the link preview and put that link in another cell.
Here is an example:
I tried IMAGE()
and also IMPORTXML when there is an image in the RSS feeds (but not all of them do... so I stopped)
Is it possible in Google Sheet to get the main image from the one displayed in the link preview ?
For instance, one of the blog I want to extract the main picture of a blog article would be Creajv (URL : https://creajv.com/ ; Feed : https://creajv.com/feed/)
So the IMPORTFEED() function I did in Google Sheets was :
=IMPORTFEED("https://creajv.com/feed/";"items";FALSE;3)
Which stands for :
=IMPORFEED(...) the function to import feeds from an URL
"items" the way to pull every data there is in the feed (you can use other parameters and can see all the possibilities on the GoogleFormulas documentation)
FALSE because I don't want the headers to be included
and the number 3 because I want only the last 3 results displayed.
And it displays perfectly : author, description, URL, date
But I did a little digging in Google and found that basically IMPORTFEED() cannot get images from feeds, even if it is added by the author of the blog (he has to add a feature to do it).
So I am now trying to see if there is another way which is not IMPORTFEED() to get every time the main image of a blog post.
And I saw Google Sheet is able to pull instantly it when I copy paste the URL of a blog article within a cell for instance for Creajv :
Print screen of the image I get when I click in the cell which contains the post URL
So my thoughts would be that I can pull the author, date, description etc. with IMPORTFEED (which works perfectly every time) and use a formula on the cell with the URL to get in another cell the URL of the picture pulled from the one in the link preview.
Two other possibilities might also be with Google App Script :
creating with the App Script a custom function
or creating a script pulling the image in a cell every time a new row is added via the IMPORTFEED() function.
Functions only, as Apps Script doesn't run on mobile Apps
How about this solution? I checked the website and inspected the image from the thumbnail.
Luckily, the structure is simple:
<div class="article-image">
<img src="https://creajv.com/wp-content/uploads/2020/11/HighresScreenshot00000.png" alt="Concours de Level Design avec Unreal Engine, du 11/11 au 05/12/2020">
</div>
You can get the url with IMPORTXML, and apply IMAGE to it:
=IMAGE(ImportXml("https://creajv.com/2020/11/08/concours-de-level-design-avec-unreal-engine/", "//div[#class='article-image']//img/#src"))
Since you are already retrieving the post url with your previous formula, change the source url by the correspondent cell:
=IMAGE(ImportXml(C1, "//div[#class='article-image']//img/#src"))
For example:

Extract the number of views/revenue for a specific video (Youtube CMS)?

My friend works as a CMS admin for a Youtube Network and asked me if there is a way to automatically extract the number of views and the revenue for specific videos. Let me explain. If some people upload copyrighted material, as a CMS admin you have 2 options, either remove the video or claim it/add an asset so that ads appear on the video when being watched but the problem is that those videos are not connected to an partnered account so you can't see the revenue for that channel but have to check each video individually. So if I have a video (making it up) with the link: http://www.youtube.com/watch?v=123abcEFG56, you can take the code of the video, "123abcEFG56", paste it into the search-box of the Youtube CMS analytics and you get all the information for that video if you claimed it/added an asset to it (he tried to search by using words which are part of the video title (he tried even the exact title) in the YT CMS analytics but this works only for videos that are uploaded on a partnered channel/account so for videos uploaded on non-partnered channels, you can only view the statistics for that video if you put in the code of the video into the search box).
I came up with an idea, I visited some of the channels with the claimed videos, clicked on the video's tab and copied the html code. Then, by using a regular expression and PowerShell (Win7), I extracted all the video codes into a .txt file. Each line of the .txt file contains one video code, for example, it would look something like this:
123abcEFG56
123abcEFG57
123abcEFG58
...
So, this is not about a regular Youtube account but a CMS account and since analytics offers it, I would like to extract the data from the "Last Month" (default on Youtube is: "Last 30 days").
I am not familiar with the Youtube-API, so my question is, is it possible (and if yes, how) to make a batch script which would take one code per line and request the views and revenue made last month for the video with the corresponding code, and then "write" that info into another .txt or .csv file (ideally: "Video name", "Number of views", "Revenue")?
Thanks in advance for your answers!
You can use the Content ID API for this. Please reach to your partner manager for details.

how browsers act when downloading images called from ajax?

I'm new in this topic, so my apologies for this question :)
I need to create a page that must show all images uploaded in a post, one at time. When the user click next button, the it must load the next picture, replacing the first one.
< [ image1 ] >
Title
Description
other content
--> User clicks next
< [ image2 ] >
Title
Description
other content
However, in order to speed the image display load, the two following images need to be downloaded in hidden panels, so the images will be cached when user clicks next and load the next bundle of images.
If I use ajax to do this task, will the browser use the downloaded images or ajax will download them once again?
Is there a way to do this process more optimal?
Thank you very much!
You can download the next image's data to strings using ajax and convert it to a base64 string and embed it in the html (when the next button is clicked, using javascript) by changing the src atribute of your image to "data:image/png;base64,(base64stringhere)" replacing (base64stringhere) with the downloaded base64 string of an image
ref: http://www.techerator.com/2011/12/how-to-embed-images-directly-into-your-html/
ref: How can you encode a string to Base64 in JavaScript?
Note: most browsers cache images, so it will waste quite a bit of bandwidth if the users are viewing images they already have downloaded.

Switching embedded youtube video playback with Images

I am looking to have an embedded youtube video with several images below it that correspond to different youtube videos. I want to set it up so that when an image is clicked on, the video above changes to whichever video corresponds with the clicked image. An implementation of this can be seen here: http://www.seanhayesmusic.com/2012/media/
I am trying to implement this into a wordpress site and I really only have skill in HTML and CSS. I would very greatly appreciate if someone could help me with the code for this!
Just look at the source. it's just html. He's got the youtube video in an iframe, and there's an <a> tag around the thumbnails with target= attribute making the link change the iframe.
Alternatively, you could actually embed the video on the page, and use javascript (and jquery if you want it to be easier) to alter the embed code when you click on the thumbnails. This method would probably be better and easier.
Go to the youtube page for each video, click "share" then "embed" and copy the html.
While you're there, take a screenshot. Crop/resize to make the video thumbnail.
For the default video (the one that plays/shows before you click thumbnail) paste in the full embed code (from step 1) into your page. add this to the <iframe> tag: id="video_player"
For the other videos, put your thumbnail image on your page as normal, then add a <a> tag around the image like this: <a href="#" onclick="$('#video_player').attr('src', 'http://www.youtube.com/embed/paPT5qxM9m0'); return false"> (except of course you need to fix the url, with the one in the embed code for that video
If you don't already have it, source jquery into your page. That means adding something like the following to your <head> tag: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

ASP.Net MVC. Making Dynamic Images SEO Friendly

I have a website made to provide free web-based tools for making indie games. Currently, it only supports artists contributing to games. The features for helping artists consist of a set of artist community tools that allow artists to upload images based on a description, then we post that image in a gallery page. Other artists can upload their images and each image can have several revisions.
The way I chose to implement the image upload and display feature is by serializing uploaded images to a byte array and storing it in the database. When I need to display the image in the UI I just call a controller action I named "GetScaledGalleryImage" and pass in the image ID. That controller action takes the binary from the database and converts it back into an image, returning the requested image back.
This works very well functionally, but the problem I realized later is that the google crawler thinks all of my images are named "GetScaledGalleryImage" so if someone searches for "sylph" on google images, nothing comes up from my site, but if someone searches for site:watermintstudios.com getscaledgalleryimage, all of my images come up.
Here is an example of the URL that is being output in my HTML http://watermintstudios.com/EarnAMint/GetScaledMedia/68?scale=128
In the past, pre-MVC I would handle 404 errors and return content based on what was requested even if the page didn't actually exist. This would of course allow me to have the images pulled back by the image name (or description).
Is that the best way to do this? Or is there a better option? Something simpler would be better like if I could just do http://watermintstudios.com/EarnAMint/GetScaledMedia/Iris%20Doll?id=68&scale=128, but based on how google indexes images, would that give me what I need? Or do I need to provide image file extensions for maximum indexability?
Thanks all
It is important when doing Search Engine Optimization to always use alt="this is a crazy robot" for your images. This will help the crawler identify them. Note: always use alt, don't always name your images this is a crazy robot.

Resources