how to youtube thumbnails link replace with site link - javascript

I have problem youtube video and thumbnails block in our country and I want to run youtube api for getting these data , but problem is thumbnails links show like these link
I want to its show through my site link with my server like
https://img.example.com/vi/T0Jqdjbed40/default.jpg
I try to replace url with string replace function but its not work please tell me how to run through my site link like some site show like playit , vube.pk , flix

As a purely theoretical thing, you can replace sections of a string using the str_replace function:
str_replace(
"https://i.ytimg.com/vi/T0Jqdjbed40/default.jpg",
"://i.ytimg.com", "://img.example.com");
This will keep the http:// or https:// protocol in place.
For your use case, again purely theoretically, you would want to download the resource yourself, and then provide it to the end user. To get the data using file_get_contents for example:
$data = file_get_contents('http://www.example.com/');
You culd then potentially embed the image data directly into the page itself - see this SO question: Can I embed a .png image into an html page?
You should probably check youtube's terms of service before attempting anything...

Related

Get the open graph image for a webpage? (The way facebook embeds a thumbnail image when you share its link)

On my webpage I want to share a link - let's say to this wikipedia page for Superhero
In the code for that page there is the following code in the head tag:
<meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Connecticut_ComiCONN_Superhero_Mascot..jpg/640px-Connecticut_ComiCONN_Superhero_Mascot..jpg">
This is the thumbnail for that page that is shown if you share the link on social media. (Most pages now have one).
Is there a way to retrieve that image url to embed on my normal webpage page?
I'm using CSS, HTML and Javascript.
You can use https://www.opengraph.io/, for example:
Make request to https://opengraph.io/api/1.1/site/https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FSuperhero?app_id=f6ef4e6b-4162-40d7-8404-b80736d4bd55 (https://opengraph.io/api/1.1/site/${url_encoded_link}?app_id=${your_api_key}
Get image URL from the JSON response, which looks like this:
{
//...
"openGraph":{
"title":"Superhero - Wikipedia",
"type":"website",
"image":{
"url":"https://upload.wikimedia.org/wikipedia/commons/d/d6/Connecticut_ComiCONN_Superhero_Mascot..jpg",
"width":"1200",
"height":"1005"
}
},
//...
}
Note, that the free tier only allows 100 requests per month. And I'm not affiliated with it.
Alternatively, you can use something like open-graph-scraper - never tried, but looks promising, will require running NodeJS server as far as I understand.
This one parse-open-graph can work in browser, if I understand correctly.

Facebook OG tags not recognized [duplicate]

I just build up a image portfolio with a single HTML page where all the pictures are dynamically loaded. Everything works great so far, except for the facebook META OG:IMAGE.
Since the page loads just once, I can assign the OG:IMAGE URL once...
But I really would like to have each picture with its own OG:IMAGE, since this is a photo album.
The pics are loaded by clicking on a --li class="open-pic"-- tag.
I would like to change the OG:IMAGE value everytime I click on a --li class="open-pic"-- tag.
Is it possible?
I found stuff like this:
$('meta[name=og\\:image]').attr('content', newImageUrl);
However, I don't know how to link this to the li.open-pic onclick event.
Thank you!
G.
Since the page loads just once, I can assign the OG:IMAGE URL once... But I really would like to have each picture with its own OG:IMAGE, since this is a photo album.
Changing OG meta tags client-side is of no actual use – because Facebook will read those tags through it’s scraper, which means they will do an HTTP request for your URL and see what’s in the HTML code; and the scraper does not execute any JavaScript.
Solution: Provide an individual URL for each photo with its own meta information – and have your like button/share functionality/whatever FB feature point to that URL for each photo.
(How you handle things client-side does not matter – you can still display all the photos in one page, load new content via AJAX, whatever you like – but you will need separate URLs for your photos for them to be recognized as individual Open Graph objects.)
$('li.open-pic').click(function(){
$('meta[name=og\\:image]').attr('content', newImageUrl);
});
It's the colon. Try using single quote & double-quotes like this:
var imgSrc = $(this).find('img').attr('src'); // image stored as variable
$('meta[property="og:image"]').attr('content', imgSrc); // assigns meta property

Trace URL's that link to my iframe/widget

I have created a widget.html page with, for example, a "Powered by Example.com" box/widget. And I have an HTML iframe that links to that specific page (widget.html) on my site.
<iframe src="http://example.com/widget.html"></iframe>
I share that iframe code with website owners who want to use my widget on their sites.
I want to be able to see every single site that uses my iframe. I would prefer a code that creates a txt file or even a MySQL Table with all websites URLs that use my widget on their websites.
I basically want to track the sites that use my widget as an iframe . How do I do that? With Javascript? PHP? MySQL?
P.S. I'm not sure if an iframe is the best way to link widgets off my site, but I'm open for your suggestions. Thanks in advance.
use jquery
then load a request page throgh jquery like : $("#div1").load("demo_test.txt");
and send a request uri parameter to it
you will find the current url using the widget and alos you can get the parameter

Share on FB page showing image that I didnt included in my site

I am currently working on http://rightinfo.co.in
When I am trying to share this site on a FB page it is showing an image that I have not included in my site.
I have tried by adding ?v=1 to the url and url shortner services.
In facebook debugger also , the image is not showing. But in actual sharing , unknown image is showing.
Please help me to solve this
Thanks
You have issue with tags Please check this facebook debugger it explains alot Facebook debugger
It's because the og:image (see here) meta tag is set. This tag defines the image, which will be shown on facebook.
To change this image, try to edit this tag, take a look at the theme settings.
Another way is to change/delete the image itself, e.g. via FTP.
You can find it here: WEBROOT/wp-content/themes/Morpheus/img/portfolio/folio01-preview.jpg
Btw, I see you are using wordpress, I'd consider using a SEO plugin, which makes a proper use of the og-tags as explained here

load a code as the first thing in a webpage?

How do I make the followings code load the first thing in my website ? as matter of fact I want the href to load the first thing.
<link rel="image_src" href="" id="ShareImageID"/>
<script>
var ShareImageIdVar = location.href.match(/\d+/);
document.getElementById('ShareImageID').href = "http://www.mysite.com/Images/"+ ShareImageIdVar +".jpg";
</script>
what I am trying to do is, when some one share this page on facebook I want facebook to load this picture as thumbnail. So i want this herf to be filled out as soon the page loads out.
what I am trying to do is, when some one share this page on facebook I want facebook to load this picture as thumbnail.
I don't think this request makes sense. Loading order will not influence what Facebook offers as a preview icon for a page. Images inserted by JavaScript will likely not be visible to Facebook at all.
If you want to make Facebook choose a specific preview icon, use the Open Graph Protocol, namely
og:image - An image URL which should represent your object within the graph.
an example from the OGP web site:
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
The Open Graph protocol and Facebook Object Debugger have some information.
Does this have to be done in JavaScript? If you can use PHP, you can get the image ID from the query string and insert the dynamic link element before Facebook parses the document.
This works for me:
<?php
echo "<link rel=\"image_src\" href=\"" . $_GET['id'] . ".png\"/>";
?>
You would use a URL like:
http://mysite.com/index.php?id=12345
I'm not saying it's impossible in JavaScript, but I tried and Facebook didn't see the inserted image.
You can test using the Facebook debugger. Specifically, take a look at See exactly what our scraper sees for your URL and you'll see that it doesn't incorporate the JavaScript insertion.

Categories

Resources