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.
Related
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.
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
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...
I'm having a problem with the Facebook Like Button here. Although the button works, it's fetching the wrong thumbnail to display on Facebook.
Since the website is a store and each product has its own like button, it's very important that the correct thumbnail is displayed on Facebook. I used the Facebook Linter to debug a product URL from the site. I hoped Facebook would grab the bigger, obviously main image of a product URL but it's fetching one of the related products thumbnail.
From what I've read in the docs, I should explicitly set og:image in the head of my document. However, I have no access to the back-end and I can only use JavaScript to dynamically generate a meta-tag. I've tried to do that but it seems worthless doing so since the URL is scrapped before any script is run.
I don't understand what rules Facebook is using to infer the value of og:image. On another website that also doesn't have any meta-tags set, the main image of the product is being correctly scrapped. Why?
When, for whatever reason, one cannot declare any Open Graph properties, what can be done to improve the chances of Facebook's algorithm grabbing the desired image (or text)?
Ideally, you should set og:image meta tags as part of the open graph protocol. When this fails, it simply defaults to all images via image html tags take into precedence. The very first image defined via img tag will be the first image pulled by facebook.
<html><body>
<p style="background:url(img0.jpg);">hello</p>
<img src="img1.jpg">
<img src="img2.jpg">
<p>bye</p>
<img src="img3.jpg">
</body></html>
If the above sample code was your site, facebook would label img1, img2 and img3 as potential thumbnails and in that order if the user has the option to choose what image to specify.
So, just put your product picture first.
I'm looking to share things on google plus but I need to be able to populate the snippet info myself as the pages I am sharing are loaded via ajax on my jquery mobile site.
So that being said I need to set the info either via the url (facebook sharer style) or via javascript.
If you are trying to change the rich snippet that appears, you should use the snippet tool to create schema.org that is then placed on your site. The share link would then be that page, which would contain the attributes set to how you want them to appear. You can specify the title, the image, and the description for the content that gets shared.
If you are trying to just create a link to share something, you can create direct links to the share dialog. For example,
Click to share
will create a share link to {your url}.
Because jQuery mobile is rendering a lot of the information on the actual client, you might need to generate a URL, similar to the one above, that would then point to another page that would with the right content in schema and a redirect to your site. When they follow the share link, a user would be redirected to the jQuery mobile page. When Google reached the page you're redirecting from, it would read the schema.org markup and correctly calculate the snippet. The following example works for me:
<html itemscope itemtype="http://schema.org/Article">
<head>
<meta itemprop="name" content="Example">
<meta itemprop="description" content="This is the most awesome thing ever.">
<meta itemprop="image" content="http://placekitten.com/250/250">
</head>
<body>
<script>window.location='http://istoocute.com/#kittens';</script>
<a href='http://istoocute.com/#kittens'>Click here if you're not redirected</a>
There's really nothing to see here, move along...
<img src="http://placekitten.com/250/250" />
</body>
</html>
https://developers.google.com/+/plugins/+1button/#configuration - shows you the configuration settings that you need.
I was able to just go ahead and use the schema.org in my situation. This worked because when you view one of my pages is "promoted" to the first page in the list of cached pages. So even if you were to start on page A and browse to page B and then share page B when google searched the url you have provided page B is now before page A and thus is schema.org meta data is used.
I have no doubts that writing your own redirect page and passing it some thing like this
?redirect_url=http://google.com&img=your_image.jpg&description=its great&title=a product
would work. The only thing to remember is that you will need to use a javascript redirect that way when google looks at the page it see's the page and does not get redirected (bots dont use js) but when a person hits the page it will redirect them to the real page.