Facebook OG:Image on URL Frame - facebook

My domain is hosted with a popular domain name company, whos name I won't mention.
Then my website is hosted by a hosting provider.
Yet, for some reason the domain name company, only allows the Meta Description and Meta Keyword tag in URL Frames.
That leaves me with the following problem, I can't put the following code in the URL Frame (or Iframe):
<meta property="og:image" content="url of thumbnail"/>
This is needed for Facebook to pick up the thumbnail when being posted.
Is there any way I can achieve this without switching domain hosting?
.Htaccess maybe?

Your problem is one of many issues with using frames.
Search engines and other services (like Facebook) can’t work with your domain, as it always points to a different resource (everyone would always be lead to the home page of your site when following the link).
You could use the "real" URL of your page (i.e., of the frame), which is probably the one provided by your hosting provider.
Right click on your page, the context menu should show something like "Load this frame only". That’s the URL of your page. For images, a right click on the image and something like "Copy image URL".
You should definitely switch to a hosting/domain provider that allows you to use the full power of your domain.

Related

How to redirect imgur images to another domain with URL masking?

Famous image upload website imgur.com is forbidden/blocked in my country. Except VPN, there is no way to access to the imgur links.
Let's say i have a domain name called om-gur.com (i made up the name) and i bought a hosting service.
This is the link i want to see: https://imgur.com/xxxxxx.jpg
What i want is that when i change the domain name imgur to om-gur, i can see the imgur image and the url i should see is this:
https://om-gur.com/xxxxxx.jpg
Like hosting the image at another url, like some kind of proxy(?)
I tried 301 redirect (cPanel), some url masking/frame tests, some htaccess changes. Nothing worked.
In summary, i want some kind of proxy for my personel use.
The link i visit: https://imgur.com/xxxxxx.jpg
(manually changing imgur to om-gur then press enter.)
I see the target image at: https://om-gur.com/xxxxxx.jpg

Google DFP ads Image not loading

The issue I am running into is rather simple, the creative URL's are not clicking through within certain email clients (most often Gmail). More specifically, in GMail the creative can sometimes click to a blank page where the redirect URL will just sit idly and for some users, it will redirect to the appropriate URL.
I identified that the creative will not click through if the 'img src' and 'href' URL's are not identical (think /ad & /jump & /adx), furthermore I've identified that Google also prepends their content server location to some URI's (Google Content Server URI's look something like this "https://ci3.googleusercontent.com/proxy/....#") thus this makes the img src completely different...yay! We've looked at adding and removing co=1 / 0 --> this hasn't done anything for us.
We also tried hosting the Ads on our server and clicking the email to go to our domain. But on our domain DFP Ad images are not loading and add the style attribute (style="display:none;") on the image and due to that link also not working and we came across the same issue that if the 'img src' and 'href' URL's are not identical Ads will not work.
Can someone help me here and let me know why display:none is being added on the Ads?

Allowing multiple domains for 1 Facebook App (like Tumblr)

I am trying to get my website validated with the Facebook object debugger and I'm running into the following error:
Object at URL 'http://www.example.com/latest' of type
'smallteaser:teaser' is invalid because the domain
'www.example.com' is not allowed for the specified application id
'597566643589666'.
This error makes perfect sense since I haven't allowed the example.com domain specific access to the Facebook app. But do I really have to?
What I would like to achieve is similar to how Tumblr works when a custom domain is used.
Say, for example, the website www.davidslog.com: it has the following meta tags:
<meta property="fb:app_id" content="48119224995" />
--> This is the Tumblr app ID
<meta property="og:url" content="http://www.davidslog.com/?og=1" />
--> This is a custom domain which points to a Tumblr blog
<meta property="og:type" content="tumblr-feed:tumblelog" />
--> This is a custom Tumblr object type (in namespace tumblr-feed)
And if you then compare this with, for instance, the domain theartofnotwriting.tumblr.com, which has the following metadata:
<meta property="fb:app_id" content="48119224995">
--> This is the same Tumblr app ID
<meta property="og:url" content="http://theartofnotwriting.tumblr.com/?og=1">
--> This is a different domain
<meta property="og:type" content="tumblr-feed:tumblelog">
You can clearly see that the same Tumblr app has multiple URLs and everything validates correctly.
So why is it that this Tumblr page validates correctly and mine doesn't? How can a Facebook app be configured to allow being used on multiple domains?
I ran into this same issue. I figured that Tumblr must have some sort of partnership in place with Facebook to get this special treatment ( ip whitelist? special api? ) -- so I contacted my former Partnerships Rep at Facebook to enquire.
I got to speak with a platform engineer at Facebook about this, and I was totally wrong. There is nothing special going on.
The reason why all the domains running on Tumblr are validating fine with a single app_id, is that the facebook debug tool only checks the validity of the og_tag's structure (at least when it comes to the app_id). It does not validate if the app_id is properly associated with the given domain.
You can test this by putting up a test page with the your app_id on two different domains -- they'll both validate as fine in the debug tool.
When it comes to actual Facebook API access, Tumblr does everything on their domain. When people do use Facebook buttons/etc on Tumblr, it is often through a third party proxy tool (like ShareThis) or with a non-api button embed. I couldn't find a single custom-domain running on Tumblr that used the Facebook API or app_id related buttons. If you can, I'd love to see it.
It's the not answer you want (or I want) -- but that is what is happening. Tumblr's app_id appears on all the domains, but only actually works on ".tumblr.com"; The Facebook debug tool doesn't actually validate the app_id.
How can a Facebook app be configured to allow being used on multiple
domains?
If you try to add more than one domain in the app settings, you get an error that looks like this:
example.com must be derived from one of: Site URL, Mobile Site URL,
Canvas URL, Secure Canvas URL, Page Tab URL or Secure Page Tab URL.
example.org must be derived from one of: Site URL, Mobile Site URL,
Canvas URL, Secure Canvas URL, Page Tab URL or Secure Page Tab URL.
One solution is to set the "Page Tab URL" to a fake URL on example.org like so:
example.org/myfakepage
You don’t actually have to use the page tab for anything. This just allows you to add a second domain.
How can a facebook app be configured to allow being used on multiple domains?
It can’t. Facebook apps are tied to one domain (and subdomains thereof).
Imagine what would happen otherwise – someone could add lots of (big) websites to one single app, and then f.e. embed the JS SDK on each of them, and recognize a user that is connected to that app over “half the internet” … and thereby track their (almost) every step.
Facebook of course does not want this¹ – because they want to make money of the data they collect about users and their movements through the web (they can in theory track you on every single website that uses a simple like button) – they would be stupid if they gave that same ability to every app developer.
¹ OK, that’s my own assumption.
You cannot add multiple domains, unless the domains differ only by extension or subdomain.
In the example below, cuponeados differs only by domain extension (.com vs .com.ar), so both cuponeados.com.ar and cuponeados.com are allowed:
See this answer here: Need to add multiple domains in a single Facebook Application
The way Tumbler does this is to allow sub domains under their domain using *.example.com. This will permit all the sub-domains to work with their app (like odisharkins.example.com, facebook.example.com). There are certain aspects to adding several domains: look at the Facebook Blog.
Further domains must be derived from one of: Site URL, Mobile Site URL, Canvas URL, Secure Canvas URL, Page Tab URL or Secure Page Tab URL.
odisharkins.tumbler.com would not be an issue: it would work fine!
However, harkinstech.com or odisharkins.com will not work.
Worked for me: "The trick is to specify multiple app domains and use a comma separated list of valid URL's for the website URL configuration."
https://www.sitepoint.com/community/t/single-facebook-app-with-multiple-domains/99834/4
Go to developers.facebook.com.
Click on your application and edit the settings.
Add domains to that in the following form: example.com, example.org, subdomain.example.com (no http).
Save.
That’s the only way to do it, at east for the present time. You either add domains (and subdomains) manually or you can’t proceed.

Facebook won't render link image on wall post

Need a way for Facebook to render an image in wall posts. Sometimes, all you need to do is copy and paste the link to the image, like here:
But, with the images I need to link to, which are on S3, I get this:
You can click here to verify that the second link is in fact a valid image address (you should see a creepy hand drawn smiley face).
I did this test just using the normal Facebook GUI on the site, but I will be using the answer to this question in my app, which integrates with Facebook via the Open Graph API. (In case anyone thought this question was not programming related).
Anyone know what I need to do to get the second image to render in the post?
The key is image size. Don't ask me what the magic number is, but larger images work and smaller ones don't. It could be that it has to be larger than the preview size that facebook uses.
In my test, I had static website configuration turned off.
My guess is only static links will generate a thumbnail for posts on facebook. The link you are trying to use not a static one.
This is what Facebook gets when trying to generate a thumbnail.
<Error>
<SCRIPT/>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>D577337ADC9FA36A</RequestId>
<HostId>
DN9BnBduVLgHbf2lONA+e/fXQIOuT7W3WOFUPdthdpP2MZQhSLlolTvyJ0t9eZXn
</HostId>
</Error>
Solution :
It turns out that to make it work, you cannot just map any arbitrary subdomain to any arbitrary bucket. The fully qualified subdomain name must be the same as the S3 bucket name.
Suppose the name of your site is static.mydomain.com. Then you need
to create a S3 bucket with that same name, named
static.mydomain.com.
Once you configure that bucket as a S3 static web site, it will have
a URL assigned to it that looks something like http://static.mydomain.com.s3-website-us-east-1.amazonaws.com.
Go to your domain host and map your subdomain to the URL from step 2. In enom.com, that meant mapping the host "static" to the address "static.mydomain.com.s3-website-us-east-1.amazonaws.com" as a CNAME
record.
Source, it will help you host a static site from your S3 account. Use images from that custom domain URL path. That will work.

Facebook Post Link Image

When someone posts a link on facebook, a script usually scans that link for any images, and displays a quick thumbnail next to the post. For certain URLs though (including mine), FB doesn't seem to pick up anything, despite their being a number of images on that page.
I read up that FB prefers the "image_src" rel tag for the image the user wishes to specify, but this does not generate that thumbnail either for my site.
My url goes directly to the DNS, and is not forwarded, so I don't imagine that could be the problem either.
Does anyone have an idea as to why FB can't generate any thumbnails from my site?
The easiest way is just a link tag:
<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />
But there are some other things you can add to your site to make it more Social media friendly:
Open Graph Tags
Open Graph tags are tags that you add to the <head> of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.
An Open Graph tag looks like this:
<meta property="og:tag name" content="tag value"/>
If you use Open Graph tags, the following six are required:
og:title - The title of the entity.
og:type - The type of entity. You must select a type from the list of Open Graph types.
og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
og:site_name - A human-readable name for your site, e.g., "IMDb".
fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.
More information on Open Graph tags and details on Administering your page can be found on the Open Graph protocol documentation.
http://developers.facebook.com/docs/reference/plugins/like
I know this question is old, but I recently dealt with the exact same problem and went round and round on it for a couple weeks. Multiple searches on Google turned up a lot of useful information, but most of it was focused on Open Graph tags, which I wasn't interested in using. Turns out my site had multiple issues, but here are some of the basics.
As EightyEight said, make sure your HTML is valid - and the same goes for your javascript and server-side code (PHP, ASP, etc.). I had a small PHP error in a piece of code that was executing as a separate call to the server from the main page. Due to a number of bizarre coincidences, that code was generating a 500 error - but ONLY for IE6 and strict parsing engines like the W3C validator and the Facebook page crawler. The problem didn't appear in modern browsers (Chrome 4, FF 3.5, IE 8, etc) so I didn't see it right away, but older/stricter clients were showing the 500 every time and that was the main reason FB wasn't crawling our page (when everything else seemed to be correct).
Regarding Randy's response, he's correct that Facebook will keep an old cached copy of your page long after you've updated it. FB claims it's only held for 24 hours, but I experienced much longer times than that. FORTUNATELY, FB has released their "URL Linter" tool that will show you a preview of how your page will appear when being shared on FB, and it will force FB to instantly update its cache of your page. This was a lifesaving tool. You can find it at http://developers.facebook.com/tools/lint/
Regarding the URL Linter tool, be aware that each variation of a URL is cached separately on Facebook, so "www.example.com" is not the same as "example.com". Also, unique capitalization is stored as well, so "ExampleOne.com" is not the same as "exampleone.com". (This led to a lot of confusion between my client and myself when it appeared to me that the cache had been updated just fine and the client claimed they weren't seeing the updates. Turns out I was looking at exampleone.com and had used Linter to update the cache, but they were looking at exampleOne.com which I hadn't submitted to Linter. As a result, I ended up submitting quite a few variations of the URL to Linter just to cover the bases.)
WyrdNEXUS's advice to use the image_src link tag is spot-on. This allows you to be sure that FB is scraping the best possible image for your page. There are some varying guidelines out there about what specs the image file should have, but I've successfully used a 128px square image and have seen a 130x97 image make it through as well. Here is Facebook's official documentation from http://developers.facebook.com/docs/reference/plugins/like/:
Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
Obviously, FB will resize a large image for you, but you'll almost always get better results if you resize it yourself beforehand.
Regarding Mike Cooper's link to the eHow article, avoid using step #1 in that article. It was valid advice when the article was written and when Mike posted the link, but it's now better to use the URL Linter tool for previewing how your page will appear when being shared. By using Linter, you won't cause FB to cache a (potentially) bad copy of the page before you get a chance to tweak it.
Use the facebook lintter available here. http://developers.facebook.com/tools/lint/
This will check your link and re fetch any images. this also clears any old cache.
Or try this - https://developers.facebook.com/tools/debug
To change Title, Description and Image, we need to add some meta tags under head tag.
STEP 1 :
Add meta tags under head tag
<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />
NEXT STEP :
Click on below link
https://developers.facebook.com/tools/debug
Add your URL in text box (e.g http://www.test.com/) where you mentioned the tags. Click on DEBUG button.
Its done.
You can verify here https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/
In above url, u = your website link
ENJOY !!!!
try this: http://www.ehow.com/how_4938148_thumbnail-show-up-facebook-share.html
Is the site's HTML valid? Run it through w3c validation service.
Actually, if you've already tried linking that page on Facebook BEFORE adding the "image_src" link, Facebook will keep using the old cached copy and not even see your changes. Try modifying the URL by removing or adding the 'www', or duplicate your page to test it.
I've noticed that Facebook does not take thumbnails from websites if they start with https, is that maybe your case?
had the same problem and figured out that my head closing tag was in the wrong place
Old question but recently I seemed to be running into same issue with thumbnail images from my link not showing in status updates on Facebook. I post for many clients and this is relatively new.
FB doesn't seem to like long URLs anymore — if you use a URL shortener such as goo.gl or bitly.com, the thumbnail from your link/post will appear in your FB update.
Try using something like this:
<link rel="image_src" href="http://yoursite.com/graphics/yourimage.jpg" /link>`
Seems to work just fine on Firefox as long as you use a full path to your image.
Trouble is it get vertically offset downward for some reason. Image is 200 x 200 as recommended somewhere I read.
If you used any plugin for seo then Check 1st your seo plugin settings.Then find out Noindex setting if Enable Media for Noindex then disable it.