This is a bit complicated but I've got an image which uses the Pinterest parameter in its anchor entity, with the Pinterest button appearing elsewhere in the page:
<a id="im_popup" class="cloud-zoom" pi:pinit:media="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fmatchmybag.com%2Fshop%2Fbags%2Fbespoke-clutch%26media=http%3A%2F%2Fmatchmybag.com%2Fimage%2Fcache%2Fdata%2Fbags%2Fdesign-a-bag%2FThe-Clutch%2FCD1_fr_xlsq-467x467.jpg" title="" onclick="" rel="position: 'inside'" href="image/paps/linked/243241_colour_silvercrest.jpg" style="position: relative; display: block;">
The image in the 'media' parameter is not the same as the one in the img entity - just using it for testing for now but will change it to a dynamically set URL later.
When I click on the Pinterest button, the pop-up form appears and contains the correct description text, but the preview image is blank and when I click 'Pin It' in the popup form I get the 'This is not a valid image.' message.
The URL appearing in the Pinterest popup form is as follows:
http://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fmatchmybag.com%2Fbespoke-clutch&media=http%3A%2F%2Fpinterest.com%2Fpin%2Fcreate%2Fbutton%2F%3Furl%3Dhttp%3A%2F%2Fmatchmybag.com%2Fshop%2Fbags%2Fbespoke-clutch%26media%3Dhttp%3A%2F%2Fmatchmybag.com%2Fimage%2Fcache%2Fdata%2Fbags%2Fdesign-a-bag%2FThe-Clutch%2FCD1_fr_xlsq-467x467.jpg&description=Bespoke%20Clutch&layout=
Can anyone see what the problem is here? I've spent more hours than I'd care to admit to on this and would be so grateful for some pointers. Let me know if you need any more info.
Thanks a lot.
Apparently Pinterest is very strict about showing only images that actually appear on the web site. So maybe that is the issue, right now I cannot see that image on the web site provided in the url parameter (but then the question is quite old already...)
Related
Right, I don't really know how to explain this one but I will do my best by giving a scenario:
Homepage -> Contact page
Home page elements and text displays on top of the contact pages text.
Anyone know why this would be happening? Or if there has been any issues like this from the past?
Help and suggestions will be much appreciated
Edit: There is also nested menus and it is always the homepage that displays on top of content. The url seems to change first to the secondary page url, then it suddenly changes to the homepage url. It also blinks but I think this is an issue that jQuery mobile havent fixed using jQuery mobile 1.2.0
Overview
I've set up a site using jQuery Mobile. The problem I'm having is that when I enter the site from an interior page (like the blog pages) and click on the navigation buttons in the header, I can go back to the homepage but then none of the ajax/hash-based navigation links work. In my header navigation I've linked the left-side navigation buttons directly with hrefs, not using data-rel="back". I'm not trying to use the buttons to imitate the browser's back button, but rather for absolute navigation. I've tested this on the desktop in Chrome and Firefox and on an iPhone running iOS 5 in Mobile Safari; the behavior is the same in all browsers.
Edit: (Note specific questions below in bold italic.)
What works and what doesn't
For example, if you go to the interior page http://slawson.org/blog/ and then click the < Kim button in the header to go back to the homepage, then you can only go to absolute links (like Blog) but none of the hash-based links (the other links under the "Portfolio" and "About" headers) work... clicking on the links does not fire a page transition, instead the links just blink and do nothing.
If you enter the site from the homepage — http://slawson.org/ — or one of the subpages of the homepage — like http://slawson.org/#web — this problem does not occur.
index.html — contains most of the other pages that use hash-based navigation (these don't work), e.g.:
Web Sites
iOS Applications
Print Publications
Logos & Branding
...
blog/index.html and blog/.../*.html — regular pages loaded via JQM's ajax loader (these work).
Question
Is there a problem with JQM and ajax navigation when entering sites from interior pages, or is this something that can be fixed by restructuring things or adding some jQuery somewhere? I'd like to avoid breaking every page into a separate html file.
Versions
I'm using jQuery 1.8.2 and jQuery Mobile 1.2.0.
Edit:
I looked at the JQM multi-page template docs and at these related StackOverflow questions:
jQuery mobile page navigation behaviour
Facing an issue in jquerymobile's multi page template stucture
JQuery Mobile - link from external page (SinglePage-template) to an internal page (MultiPage-template)
Things I've tried:
data-url
I tried adding data-url to the multi-pages in index.html, like so:
<div data-role="page" id="web" data-url="index.html#web" data-title="Kim Slawson | Web Sites" class="shorter-list-items">
but that didn't help.
data-rel="external"
I tried adding data-rel="external" to links to the homepage, like this link on the navigation button on the blog page:
Kim
but that didn't help either.
data-ajax="false"
I tried adding data-ajax="false" to links to the homepage, like this link on the navigation button on the blog page:
Kim
This works (i.e., you can go to the homepage, then all of the multi-pages work) BUT the transition does not fire going to the homepage. Is there a way to add a transition to this link, perhaps by giving it a class and then using some jQuery to bind to that class to fire the transition? or is there a better way? (Of note, the back button works fine after I add data-ajax="false" to the link to the homepage. Clement Ho's answer here implies that adding it breaks the back button, but I'm not seeing that)
The problem is that the hash-based pages don't exist on the page when you're clicking the links to them. (<div data-rolw="page" id="#web">...</div> isn't there)
If you have a back-end framework set up, you could return the the hash-based pages, along with the requested page, whenever a non-ajax (the initial) request is made. Then those pages will be in the DOM no matter what page is loaded first.
The other alternative is, like you said, to break every page into its own file.
To start with I am new to facebook "like" button integration
I have a facebook like button on my webside (http://www.mini-signs.dk/index.html), but the image showing when like button is pressed is incorrect. I've tried to use meta tag
in between and on the page but it seems like it choosing a images name Galleri-Andet-Normal.jpg in the same folder.
I've tried to delete the image and overwrite it, and now something different is showing in the facebook timeline when liking the side, but the image in the like button dialog is still wrong. If i put the content value in a browser the correct image is showing
I've tried a lot of things og googled to solve it my self
Please help me out.
Only option you have is that you change your meta tags and WAIT. Once your page is crawled again, you will get new images :)
Try here and look where is the problem,
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.mini-signs.dk%2Findex.html
All the images referenced by og:image should be at least 200px in both
dimensions. Please check all the images with tag og:image in the given
url and ensure that it meets the recommended specification.
fb:admins and fb:app_id tags are missing.
I have already searched the site but I can't find an answer to this. My problem is that Facebook is showing the wrong image after I press the 'recommend' button (it's the same as the 'Like' button but with different text).
The webpage is here: http://www.bamarang.in/perfume-tree/ and the facebook debugger is here: http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.bamarang.in%2Fperfume-tree%2F%3Ffb%3Dfgfgfg
The website needs an email but you can use a fake one to enter, as there is no confirmation.
As you can see everything seems to be correct but the wrong image is displayed. I've tried clearing the cache, on both the browser and Facebook (this last one by writing the webpage url's in the developer tool) but to no avail.
You can also see the webpage's source to check that all the OG tags are there and correct.
What else can I be missing? Please help.
See the wrong image showing up here: www.crosstastemovies.com/temp/fb_error1.jpg
See the FB scraper showing the correct image here: www.crosstastemovies.com/temp/fb_error2.jpg
I've updated the question to add the screen shots.
The link you provided for your site is: http://www.bamarang.in/perfume-tree/ but the link with the debugger is: http://www.bamarang.in/perfume-tree/?fb=fgfgfg.
As you can see those two urls are not the same.
I curled both urls, the first one returns a redirect to https://www.bamarang.in/customer/account/create/ and when curling that the output has no og tags in it (check yourself in the debugger).
The 2nd url (with the ?fb=...) indeed has the og tags.
What's the url you're using with the recommend button?
You should probably just output the og tags even when the fb parameter is not present, don't forget that people can just copy/paste the url into their status on fb, you have no control over how people share.
I am wondering whether it is possible to change the action of a Facebook like button on an Ajax event.
What I am trying to do:
I display an article when the page was loaded. At the end of the article I have a button which loads the next article via Ajax. Additional I have the following Facebook like button:
<fb:like href="http://www.myurl.com" layout="standard" show-faces="true" action="like" id="fblike" />
When I load the next article I put the new URL of the article into the "href"-attribute via Javascript (which works fine), but when I click on the like button the initial article url will be pushed to facebook, and not the new one.
Any ideas?
Thanks a lot.
You don't actually need the iframe version as it is more limited and not as good for performance. All you need to do is use this snippet to re-render the button in the DOM; without a page refresh, the element does not "refresh" otherwise:
FB.XFBML.parse();
See docs here: http://developers.facebook.com/docs/reference/javascript/
You could try the iFrame version instead the XFBML version:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
See here for more infos:
http://developers.facebook.com/docs/reference/plugins/like