I'm trying to integrate facebook share by using images directly from my database.
Static images using the OG tags:
<meta property="og:image" content="http://X.com/image.jpg" />"
Works fine.
However, my images are not static, they are being called from my database using this:
echo "<img src=\"pic.php?id=".$id."\"/>";
Where pictures render fine on my website but facebook share does not pick them up.
The logical thing in my mind then would be to do this:
echo "<meta property=\"og:image\" content=\"http://X.com/pic.php?id=".$id."\"/>";
Sadly, this does not work.
Any ideas?
I suggest you use a URL rewrite to create a friendly URL, e.g.
http://x.com/pic/id
If you are using Apache, that would be a .htaccess file (assuming you have mod_rewrite enabled), something like:
RewriteEngine on
RewriteRule ^pic/([^/\.]+)/?$ /pic.php?url=$1 [L]
Same problem for me using asp
Image is retrieved from MySQL blob field by asp script.
the debugger shows the image and gives no error but the button on the page doesn't take the image.
And it should have nothing todo with caching as it is a brand new page.
Page: http://www.ffkama.be/html/2_agenda_detail.asp?ps=id51
Image URL: http://www.ffkama.be/root/imager_ag.asp?id=51
UPDATE: I forgot the code in the HEAD TAG :( One thing is sure, without the 'prefix="og: h t tp://ogp.me/ns# fb: ht tp://ogp.me/ns/fb# website: h t tp://ogp.me/ns/website#"' in the HEAD Tag, the debugger doesn't give an arror and the image shows up in the dubugger but the image won't show up on your page. Then the page is cached and there are only 2 solutions: 1. rename the page 2. wait several days for the cache to expire
Related
i have two things to complete in my project, First thing is to hide the image path,That is done using dynamically loading the image (imageJPEG) from imageConvert.php with the parameters,The Second thing is i need to implement client side browser caching, For this i was using the
<link rel='subresource'>
before ( with normal image path ) , but it is not working with dynamic image loading. Do anybody have solution for this.
echo "<img class='lazy' src='imageConvert.php?raw=$image&cap=ps&hash=$user_id' />";
echo '<link rel="subresource" href="imageConvert.php?raw=$image&cap=ps&hash=$user_id" as="image">';
Thanks in advance.
Your image will not be cached by the browser because, as you know, it's a dynamic image being printed by a php script file.
PHP outputs cannot be cached by the browser, so if you wanna hide the image path, try to use a Rewrite condition in your htaccess to change it to another location.
For long time I use this "replace function" to get the thumbnails by Instagram API, it worked well but now they changed somethings and I no longer to use bigger thumbnails by this way.
src="<?= str_replace('s150x150/', 's320x320/', $post->images->thumbnail->url) ?>">
By default thumbnail, it works well.
https://scontent.cdninstagram.com/vp/94387bd7b8a247f3f4039f8789772142/5AEE2A9E/t51.2885-15/s150x150/e35/c0.135.1080.1080/26335890_2247807142112483_5882778660510892032_n.jpg
But replaced thumbnail size to bigger, it appears a msg: Invalid URL signature.
https://scontent.cdninstagram.com/vp/94387bd7b8a247f3f4039f8789772142/5AEE2A9E/t51.2885-15/s320x320/e35/c0.135.1080.1080/26335890_2247807142112483_5882778660510892032_n.jpg
Anyone can help to get bigger thumbnail of Instagram. They changed API and I feel so tired with Facebook, they have made many changes since sync with FB and everytime like this, the developers have to update with no instructions.
You can try with this trick
src="<?= str_replace('s150x150/', 's320x320/', str_replace('vp/', '', $post->images->thumbnail->url)) ?>">
or
src="<?= str_replace('s150x150/', 's640x640/', str_replace('vp/', '', $post->images->thumbnail->url)) ?>">
You have to replace (delete) also "vp/" on url, and works again.
It's a really bad solution, but it's the only that i've found.
Copy the link of the profile pic after the "/s150x150/xxxxxxxx......jpg" to the end of this:
"https://instagram.flju2-1.fna.fbcdn.net/vp/e890a9f0b7b40abe5667b06d0fa750e5/"
like: https://instagram.flju2-1.fna.fbcdn.net/vp/e890a9f0b7b40abe5667b06d0fa750e5/xxxxxxxx......jpg
Works right now.
A solution would be very nice!
I have also done it like you the last few month.
I think one of the solutions is to use non-squared fotos from instagram (you get with "standard_resolution") and set it as a background-image and do the "square" via css and display cover…
This is my personal solution at the moment…
i opened instagram on google chrome selected the desired post, right-clicked to "save as". after opening the saved html doc. in chrome i right-clicked again to veiw page source. i scrolled down to line 217 of the page source and one of the links there gave me the picture i wanted. not sure that it is the same thing as before but it let me download the picture of the post in a .jpg format. hope this helps
I am successfully pulling in the url for each image for a particular tag via PHP, but the image simply will not display. I saved the image(s) off locally and it displayed just fine, but not when referencing the url in the src attribute.
<img src="http://origincache-prn.fbcdn.net/1597216_736275239737299_176271816_a.jpg" />
You can follow the above source link to the image, and this is how the img tag is set in html, but it will not display in the browser.
Any suggestions?
Thanks in advance.
I'm not sure but can this have something to do with REFERER-check?
I mean - my chrome doesn't shows up WHY the request get's blocked, when I embed it to a website.
You should figure it out (my linux-curl shows the pic with referer set, but i'm not sure if this works!).
An idea would be to provide a php-file which is just a WRAPPER for sending to image:
<?php // redirect.php
header('Location: ' . $_GET('r'));
die();
usage:
<img src="redirect.php?r=<?php echo urlencode('http://origincache-prn.fbcdn.net/1597216_736275239737299_176271816_a.jpg"');" />
Because modern browsern do not send "REFERER" when redirected through status-header 302 Redirect
just have a try...
This is possibly related--Facebook share dialogs that attempt to share images from the FB CDN origincache end up with a 500 Internal Server Error and a blank page. I know that FB throws an error when sharing other images on FB, but you usually get a descriptive error message and not just a server error.
I'm creating a slideshow where I'm displaying images based on their urls. I've used PHP to extract the image urls from web pages and I've used JavaScript to display them in a slideshow format. Only thing is, the first picture takes a lot of time to load so I decided to cache the urls by storing them in a text file, but I don't know how to read the urls from the text file in my JavaScript bit?
Could anyone point me in the right direction as to how I should proceed. I couln't find anything helpful online.
My JS code is like this:
<script language="JavaScript1.1">
var slideimages=new Array()
slideshowimages("<?php echo join("\", \"", $image_urls); ?>") <--this is where I was initially echoing the array or image urls from php, but it proves slow for the first few images
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
var slideshowspeed1=30000
var whichimage1=0
function slideit1(){
if (!document.images)
return
document.images.slide1.src=slideimages[whichimage1].src
if (whichimage1<slideimages.length-1)
whichimage1++
else
whichimage1=0
setTimeout("slideit1()",slideshowspeed1)}slideit1()
</script>
Thanks!
Why are you pulling from an external website? You generally will get a lot more speed if you pull them locally. I do believe that once it pulls the images once or so, it will cache for users when it shows up again. What you could do is to use that list you pull and create the images hidden on the page so they load with the page. Then when going through the slideshow, the user should have had time to cache the images and the slideshow will have sped up.
Just make a CSS class known as hidden and visability:hidden;it. Most browsers will still try to load the data.
I have some thumbnail images with its larger version.I placed the thumbnail images in a page.Now for link I just gave a link
<img src="thumbnail1.jpg>
but for this I have to make different pages for showing larger one.I want to give a link to show them in a single page.means whenever I will click the thumbnail it will open the larger one in a page with the same url but with its name like
imagegallery.php?news=images/largerimage1/13.jpg
imagegallery.php?news=images/largerimage1/14.jpg
so how to do that?
Pretty basic stuff, I suggest you get to read some PHP tutorials on the internet to get some knowledge on one thing and another.
The ?news= part in your URL is a parameter that can be read by PHP. This type is known as $_GET. To get this part you would need $_GET['news'] so if we'd use your first link and place this inside a script: echo $_GET['news']; the page would say images/largerimages1/13.jpg.
In order to get the image loaded on your website we need some simple steps, I'm changing the news parameter into image, that suits better for your script since it ain't news items:
<?php
// Define the path (used to see if an image exists)
$path = 'your/absolute/path/to/public_html/'; # or wwwroot or www folder
// First check if the parameter is not empty
if($_GET['image'] != "") {
// Then check if the file is valid
if(file_exists($path . $_GET['image'])) {
// If an image exists then display image
echo '<img src="'. $_GET['image'] . '" />;
}
}
?>
Below this script you can put all your thumbnails the way you want. Ofcourse, also for these thumbnails there are some automated options. But I strongly suggest you get a good look at the script above and some beginner PHP tutorials so you completely understand the example given. This still isn't the best method, but it's kicking you in the right direction.
if your imagegallery.php is in root of your domain, you can just add slash as a first char to links like this:
<img src="thumbnail1.jpg>
else you will have to write some php function which it returns BaseUrl of your web. Then it should looks like this:
<img src="thumbnail1.jpg>
maybe you can something like this,
Techincally, there is no thumbnail image, just a stretch version of the regular image
I don't understand which part you don't know how to do:
- the link part?
it should look like
<img src="thumbnail1.jpg>
- or the PHP part (the file called imagegallery.php)?