Is there a url we can src for the FB logo that will be the same src as what gets generated after FB.init completes?
I doubt that I can hard-code the FB CDN link below and expect it to work for all users and also stay up-to-date.
https://s-static.ak.fbcdn.net/rsrc.php/v1/yL/r/FGFbc80dUKj.png
I basically want to reduce another image request for a FB logo sprite that already gets loaded with any other social plugin I have on my site.
Try using font-awesome's icons.
fa-facebook-official: Font Awesome Icons
and apply facebook logo's official color in css ( #3B5999 ).
Given that the URL still (after 5 months) resolves to the image correctly, I would say that you are probably OK using the link you have.
As a fall-back, though, you may want to consider hitting the link with an ajax call and changing your usage of that URL to a locally cached copy just incase the link ever goes dead. It's slightly more work, but it's a functional way to use a 3rd party's image and still fall back to your own version if theirs goes away.
Related
I spotted that one (just one, rest is ok) shared link on wall of group I am in isn't look properly. It's just grey rectangle, you can see it on included image. I wonder why it's displayed this way because I copied url and pasted it to facebook open graph object debugger. There are no warnings and preview generated by tool is ok (so image pass dimension requirements). I also tried to put that url on my profile and I can see image. Sorry that I don't paste urls here but I don't think I'm allowed to do this. I hope someone still want to answer my qestion. What is reason of this behaviour?
Grey rectangle on shared link
There can be several reasons for this situation.
I assume you use some service provider to generate image.
Facebook crawler visits your site and make POST request which uses no cache content, which also makes your site fresh render for facebook request but also may cause timeout error in some cases. If image thumbnail is generated with some service provider it can be the cause.
Thumbnail service providers often causes mistakes by themselves. Take under consideration that what you see on facebook wall is the very first render of the image in the thumbnail provider. Check twice parameters that you send to the service and maybe there is some problem with alpha channel (if it's PNG image).
That's for my guesses. Hope it will help you.
I need to create a custom Facebook Page Tab app which will show an external site in an iframe. This need to have adverts on it but I'm not sure if this is possible as the site is hosted externally.
I'm not sure if I need to sign up to the Facebook Audience Network to get approved etc. either?
Any help or advice would be great.
Many browsers have this limitation of not allowing external sites to be shown in an iframe. Imagine the case when you are working hard to create a site and others show all your content in iframes. That is, naturally frustrating.
However, there is a candidate-solution: Let's suppose you create a page which sends a request to the other site and appends all the content into the body and head of your page. This is very much possible, so the solution is to:
Create a page in your site, let's call it outsider
In the server-side code of your outsider page send a request to the desired page to be shown
You will get the html of the page. Process it and include its content into the head and body of outsider. This includes:
3.1. Checking all the CSS to be reached, as the target page might refer to local CSS, which is unreachable locally at your end. Process the URLs of CSS files
3.2. Checking all the Javascript to be reached, as the target page might refer to local JS, which is unreachable locally at your end. Process the URLs of JS files
3.3. Apply the idea described in 3.1. and 3.2. for other resources, like images, until you are satisfied with the content of outsider
Create an iframe, having the source to point to outsider. outsider is inside your scope, so it should be shown
NOTE: If the site owning the target page does not like the possibility of you showing their content inside iframes, they might protect it by, let's say, having Javascript in their code, which checks whether the page is inside an iframe. Remove that code while processing the response to your request. If nothing else prevents you from showing the page in an iframe, then you should achieve success.
On what browsers or user agents that channel URL is actually used, and what for?
I have no intention of having my site to work on Internet Explorer <= 8 (it is an HTML5 <canvas> game, and I am serving everything else as "application/xhtml+xml").
So, if channel is only useful on that old crap, I can gladly get rid of it...
Related (possibly): Channel URL Facebook
Because the social plugin is cross domain call, it needs a way to communicate. The wrokaround is to include a hidden iframe in the page for that. But, with this workaround, that iframe is loaded every time when page loads and will double the traffic reported. This is why channel url was done. What it does, it load the fb js in that page, and from that moment on, the js is available on your domain.
It will improve your loading times (cache) and will fix the reporting issue (you will see in reports channel page reported separately). But is not necessary for any html5 capable browser.
So, if you are using only HTML5 capable browsers, you are safe to ignore that. I am not sure about ie9, I will try to test it with my app by removing channel url and let you know.
Edit: By removing the channel URL from my app, I start getting double traffic reports from IE9. I think that is a good idea to keep the file there, is is just a simple html file with a single line. Better to be safe than sorry.
When you add a link to your Facebook page, after some processing, Facebook presents you a next/prev button to choose an image linked to the url your are inserting.
Obviously, Facebook reads the html-page and displays the images found on the url you insert.
Does anyone knows what algorithm Facebook uses to decide what images to show ?
If I insert a link to : http://www.staplijst.be/lachende-wandelaars-aalter-aktivia-003.asp, only 11 images are detected. The one I want, the one at the top right corner, is not included in the list.
If I insert a link to http://www.staplijst.be/stichting-kennedymars-rijsbergen-zundert-nederland-knblo-nl-81996.asp, 19 images are displayed (including the one I want (the one at the right top corner of the text area).
Both pages are build using asp code but are functionally the same.
I thought that it has something to do with the image size, but can't find any deciding factor there.
I will investigate some furhter, because if I know what Facebook is looking for, I can make sure that the correct images are included on the page (since they are dynamic pages build with classic asp).
But if anyone has any idea ? Help would be appreciated.
This looks like a duplicate of:
Facebook Post Link Image
Use <link rel="image_src" href="abs_url_of_your_image">
My guess, is that FB hides repeated images - 'couse a repeated image normally indicates a design-element (not content). When you post a link, only images related to that articles content, are relevant.
So; make sure your image only appears once, and see if it helps!
I am not familiar with the way Facebook did it, but I can tell you how I would do it.
Establish web request to desired url
Parse resulted web response with regular expression, that looks for <img src="" />
I'm trying to implement a feature like that where a user inputs a url and when displaying that url I want to have a custom display (an embed object if it's a video from youtube, a thumbnail if it's an image link, title and excerpt of body if it's a normal link).
How can such a feature be realized?
There is a new idea called oEmbed that a few sites support (Flickr, Vimeo and a few others) that addresses this problem. oEmbed site
Otherwise, just check the site against a list of ones you pick and then pull out the relevant bits to construct an embed link.
I liked the idea of oEmbed a lot but unfortunately it doesn't has that much adoption yet.
oohEmbed tries to solve this issue by building oEmbed for many websites.
For the feature to work, it needs the server's interaction where I believe the following scenario is how it works
Assume that we have the site humanzz.com and that it provides such feature
A user enters a url on the humanzz.com's webpage and presses a button like facebooks' preview button
An AJAX call is made to a dedicated page on humanzz.com
humanzz.com does calls the remote website and gets its data
The AJAX call now returns the page's data (oEmbed JSON object)
This involves so much server's overhead.
I really wanted to do it using JavaScript as the server's role was only to bypass "Same Origin Policy"'s restrictions.
oohEmbed allows bypassing the server's step by specifying a callback parameter to oohEmbed so that the JSON object returned is passed to a callback function on your page.
An example illustrating this is as follows
Add a script tag dynamically to your page
< script type="text/javascript" src="http://oohembed.com/oohembed/?url=http%3A//www.amazon.com/Myths-Innovation-Scott-Berkun/dp/0596527055/&callback=myCallBack">< /script>
This would result in executing myCallback(oEmbedJSONObject) which is great.
The problem with that solution is you still have to have a fallback for websites that don't have oEmbed representations.
For the embedded things, I have been using auto_html ( https://github.com/dejan/auto_html) with great success (vimeo, youtube, images) and even added soundcloud myself. But I am still looking for a "thumbnail" generation with an image and text facebook-like.
I guess you have to construct it by yourself by manually parsing the kind of URL you get.
If it is an image url, well then you just have to rescale it and in case the user clicks on it, then handle that by opening the original one somehow.
If it is a link to some youtube video, then you have to take a look at how the embedding of Youtube videos works. You can just copy the code that is provided by Youtube itself, and then exchange the parts with the URL to the video with the URL you got from your user.
I did never implement something like that, but I assume it should work somehow like this.