The Facebook "Update Status" is not getting right image of the page. When I paste the http://www.cjp.org/page.aspx?id=245692 link on my "Update Status" it only shows on thumbnail of "Charity Navigator" and completely ignores the main image. On other urls like http://www.cjp.org/page.aspx?id=235964, it shows the main image and gives options of other thumbnails.
Both pages as basically done the same way with cms, the only difference I see is the image ratio. Is that the reason why it's not getting the main image. Is there a way to show the main image without chaining the aspect ratio?
Thanks,
Rex
You don't have any open graph data so facebook is just guessing what images, description, title etc you want to show. You need to add open graph meta data to your head, and check it with the url linter to make sure it is reading the things you want it to show, correctly.
https://developers.facebook.com/docs/opengraph/
https://developers.facebook.com/tools/debug/
Use a tag like this:
<link rel="image_src"
type="image/jpeg"
href="http://www.example.com/image.jpg" />
Note, this doesn't work for everyone. It did work, but many are saying it doesn't anymore. Trying doesn't hurt.
Related
How can I add allowfullscreen to featherlight.js for a video?
The example on the http://noelboss.github.io/featherlight/ website for the iFrame video has allowfullscreen on it, I just can't figure out how to add it to my own video url.
The format for adding the video URL I'm using is:
link
I can't figure out where to put the allowfullscreen since adding it to the URL doesn't work, I also tried this:
link
But it didn't work.
Thanks!
Charles
Either do like the example (have an hidden <iframe> already present on the page), or else use the afterContent callback to add the attribute.
When you add a "link" type post to Tumblr:
...your admin shows a small thumbnail of any image associated with that link:
However, this doesn't show on the frontend of the site:
Is there any way to pull this image through?
Tumblr Link Theme Operator and Thumbnail
Tumblr recently added some new theme operators to allow for link thumbnails.
I presume this works the same as video thumbnails work and may only be available if the linked site creates the thumbnail.
{block:Link}
{block:Thumbnail}
<img src="{Thumbnail}" alt="{Name}">
{/block:Thumbnail}
{/block:Link}
Reference: http://www.tumblr.com/docs/en/custom_themes#link-posts
This is how it's done:
Click on your blogs name on the dashboard above or in the bloglist on the right hand side.
Click on Customize on the right hand side (or just go to the template you chose)
Once you're in there you can change the HTML on top on the left hand side, right under the templates name and icon
There you look for the
{block:Link} and before the description you add:
{block:Thumbnail}
<img src="{Thumbnail}" alt="{Name}">
{/block:Thumbnail}`
Now and again when the page refreshes (about 1 in 3) my facebook like button goes all weird and glitchy as seen in this image...
This is the code i am using to show the button (with PAGE_URL as actual URL):
<fb:like send='false' layout='standard' href='PAGE_URL'
width='500' show_faces='false' font='tahoma'></fb:like>
All the javascript SDK is correct and the like button works, it just does that weird thing shown in the image.
Anyone know why this is?
Looks like the image resource isn't loading. Why don't you take a look at the source when you observe the error and confirm that the image should be displayed. If it's simply not loading, that'd be a Facebook issue, and you should log a ticket.
On my page, overlays are loaded by inserting their content with jQuery and then fading in.
What I want to do is this:
When you click to open an overlay, an URI is loaded (e.g. news/12, where news is the category and 12 is the id of the item to load).
Except, instead of loading it in body, it should be loaded in the overlay.
In other words, I want to achieve something like on facebook, where you open an overlay, the url changes, but the main page stays the same.
I'm guessing you need ajax for this, but I have no idea whatsoever how to do it.
Thanks
It sounds like you want to use the new history.pushState(...) and history.popState(...) browser API.
This SO post might help you out: Change the URL in the browser without loading the new page using JavaScript
Use Boxy. See http://onehackoranother.com/projects/jquery/boxy/tests.html#
AJAX example:
<a href='#' onclick='Boxy.load("test-1.html");'>Test 1</a>
See this question: Ajax - How to change URL by content
I solved it thanks to Lethargy's answer.
.pushState() is exactly what I need to have the URL reflect the contents of the overlay that is dynamically created with jQuery.
With some tweaking around and debugging I managed to get it all working.
Now my overlays (or popups, dialogs, whatever) are search engine ready, and the url is copy-pastable for users :)
I have a page with og tags (including a source and an image - a youtube-like video view page).
I've replaced the image the og:image tag points to, to another image by the same name. However, when using the facebook linter/debugger, the image shown is the old image, while clicking the image itself, opens and shows the new image.
Facebook uses some kind of a proxy cache for the content of the image - how can I clear it without changing the name of the image file ?
This thread gives an answer.
To reiterate (in case thread goes down),
Go to http://developers.facebook.com/tools/debug
Enter the URL (of the page that holds your og meta tags) and include the query data: fbrefresh=CAN_BE_ANYTHING
e.g. http://www.example.com/mypage.html?fbrefresh=CAN_BE_ANYTHING
Using the debugger/linter should force a full recache. I suspect the caching you're seeing is in your browser. Have you tried emptying your cache or using incognito mode?
If that doesn't work (and depending on how much traffic you're getting) it might have something to do with the names being the same - but I don't think this should be the case. Try replacing the image with another with a different name, hit the URL in the debugger so FB receives the new one, then swap back to the one you want. Kinda janky, but will probably do what you want.