We are developing a page with GWT that has a list view and selecting an item it opens a detail with ajax style, there is no refresh in the page and a new view is shown in the client. When that detail is shown( or accessed directly by its url), the meta tags for the Open Graph are set in the header. That detail is our Open Graph object.
The problem is that setting meta tags by code (even at the beginning of the onModuleLoad method) doesn't work because Facebook doesn't detect them when a user performs an action and Facebook thinks that the page is not an Open Graph one. We suppose FB reads the page directly without executing any javascript.
Any ideas or workaround with that?
Thanks in advance.
You'll need to this server-side, with a handler that takes an object id from the query string or path, and does two things:
write out the correct tags for facebook.
'deep-link' into your GWT app to show the detail view for the
object.
So for URLs like:
http://myapp.com/og/?type=movie&id=1234
http://myapp.com/og/?type=film&id=6789
The HTML output should have all the tags for the object specified, and it should launch your GWT app with a 'bookmark' or some other info it needs to navigate to the detail view.
Each object needs its own permanent, distinct URL. So when you pass it to the facebook API, facebook can 'crawl' it, and they can publish it as a link in news feed stories etc. (so machine readable, and shows the relevant content for non-machines!)
It should pass the test here:
http://developers.facebook.com/tools/debug
Some more recent information to refer to:
Put the OpenGraph tags in your server side HTML rendering, like detailed here:
http://www.gwtproject.org/articles/dynamic_host_page.html#servlet
Since Google considers AJAX crawling deprecated, they recommend using the HTML rendering on the server side as well:
https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html
Related
I have a PDF that has a button with field name ctaButton.
ctaButton currently has a url pointing to https://mywebsite.com.
I want to host the PDF on my server at https://mywebsite.com/hosted.pdf.
And when I send someone a link to the PDF, I want to attach a UTM_term parameter ?utm_term=customer1 and then have the PDF read this parameter and update the ctaButton url to https://mywebsite.com/?utm_term=customer1.
I've been messing around with the Javascript actions in Acrobat for a couple of hours trying to make this happen. Any help greatly appreciated.
You can get the full url to the document using...
var myURL = this.url;
"this" in Acrobat JavaScript is the document context.
I did hours of research and came to this conclusion – Javascript in Acrobat is like trying to code in 1985 AND browsers will not execute whatever code you come up with.
So I used this workaround:
When I send the PDF to someone, I send it as a link with a base64
encoded stringified JSON package that contains a bunch of tracking
data but importantly, the name of the file to access as well as utm
parameters specific to the recipient
The link hits a server handler (NodeJS) that extracts the encoded
JSON package, and uses the data in the package to serve up an HTML
redirect page pointing to the right PDF file
Importantly, the HTML page also saves the JSON package to the
browser's localStorage . . . this comes in handy in subsequent
steps
The PDF file opens in browser (it doesn't have to, could be opened on
desktop) and the call to action link has a link to a get request
handler
The get request handler serves up ANOTHER redirect page
This second redirect page accesses the browser's local storage, looks
for the utm parameters I set for that user, and then redirects to the
sale page, with nice utm parameters attached
So to sum up, you don't add the utm parameters to the call to action link in the PDF (because that would make the world too easy to live in) and instead you do all these acrobatics (no pun intended) to attach utm parameters in the link clicks (via JSON strings saved in localStorage) during the process (i.e. when user opens email to extract file via link, and then when user clicks call to action in the PDF).
Any questions or clarifications please let me know in the comments and I will do my best to address.
Caveats
Only works if user uses same browser in all steps (i.e. if Susan opens the email in Safari, saves the PDF, then clicks the call to action in the PDF, and the link opens in Chrome, utm parameters will not be passed).
Assumes browser is modern and has localStorage
UPDATE: I came across another solution. It's a bit more convoluted. Diagram below.
Porky.io is a Javascript extension for Adobe Indesign. So flow is:
send Porky.io the customer data you need (e.g. utm's for links)
Porky.io generates PDF from a template you provide with the customer data you provided
Listen for a new file save from Porky
Do something with the file (e.g. email it to customer)
I believe you need to run an instance of Windows somewhere in the cloud (e.g. on Azure) to run Indesign with the Porky.io. Unless you want to rely on your laptop.
My project's not big enough yet to warrant setting this up . . . but good alternative if I need to make my current solution more robust.
I have used php simple html dom to no success on this issue.
Now I have gone to DOMDocument and DOMXpath and this does seem promising.
Here is my issue:
I am trying to scrape data from a page which is loaded via a web service request after the page initially shows. It is only milliseconds but because of this, normal scraping shows a template value as opposed to the actual data.
I have found the endpoint url using chrome developer network settings. So if I enter that url into the browser address bar the data displays nicely in JSON format. All Good.
My problem arises because any time the site is re-visited or the page refreshed, the suffix of the endpoint url is randomly-generated so I can't hard-code this url into my php file. For example the end of the url is "?=253648592" on first visit but on refresh it could be "?=375482910". The base of the url is static.
Without getting into headless browsers (I tried and MY head hurts!) is there a way to have Xpath find this random url when the page loads?
Sorry for being so long-winded but I wanted to explain as best I could.
It's probably much easier and faster to just use a regex if you only need one item/value from the HTML. I would like to give an example but therefor I would need a more extended snippet of how the HTML looks like that contains the endpoint that you want to fetch.
Is it possible to give a snippet of the HTML that contains the endpoint?
My extension use content-scripts to grab data from some pages.
But, sometimes users use Google Translate on the page and I need original data.
How can I get it? The content-script grabs translated data.
To get the original (untranslated) version:
Get its address from the translate-address input:
Load that address in a hidden iframe.
Grab the data you want from your new hidden iframe using the usual methods for dealing with iframes in Google-Chrome extensions.
If the translated page has been modified by AJAX, the AJAX additions aren't available in the "Original" version, but Google-translate doesn't translate these either (for now) -- so just grab the AJAXed changes directly, from the translated-page iframe.
On my website, Like buttons are generated dynamically. The URLs associated with these Like buttons are links that automatically redirect (with htaccess) to its respective hashtag url (i.e. ".com/event/200" redirects to ".com/#event/200"). The issue is that I can't seem to set the title or image. When a page loads with a hashtag, a database is queried and then the page title, meta data, and other things are changed. Facebook seems to be using the metadata that's set before the database has had time to load and the content has been changed. Does anyone have any idea how I can solve this problem? I'd love to be able to set the title and image when the like button is loaded if there's anyway to do that. Here's my like button code:
<fb:like href='http://website.com/"+postname+"/"+data.id+"' send='true' layout='button_count' width='450' show_faces='true'></fb:like>
The URLs associated with these Like buttons are links that automatically redirect (with htaccess) to its respective hashtag url (i.e. ".com/event/200" redirects to ".com/#event/200").
That’s your error right there.
Since the Hash part of an URL does not get transmitted to the server, it’s only usable client-side. So redirecting to it server-side is a really bad idea, since you know nothing about the client’s capabilities (f.e. if it supports JavaScript).
Don’t do server-side redirects - make them client-side instead, via JS.
This tutorial shows how to basically go about making an “AJAX-Page” crawlable: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=174992
Note: The question is not how to fix the problem, as that is documented elsewhere on SO (e.g., Integrating Facebook to the leads to blank pages on some browsers / fb_xd_fragment).
1) What causes this, and under what conditions is it triggered?
2) More importantly, does this affect end users at all? For instance, how does this bug affect the URL shared by someone who clicks the FB Like button? If someone clicks the FB Like button from URL A, does URL A still get shared (but with "fb_xd_fragment" appended), or does URL A become your root URL (with "fb_xd_fragment")? In our logs, all the URLs appear as the root URL with "fb_xd_fragment" appended, so we're not sure if this is because people are clicking the Like button from the home page, or if all the shared URLs get morphed into the root URL.
Basically, what happens is whenever you use the JS API it opens your site in another iframe to use as a cross-domain receiver. What you can do is set a custom channel URL and it will use that instead. If seeing this bothers you, you can set a custom channel url. More information on http://developers.facebook.com/docs/reference/javascript/FB.init/