Open Graph ticker localization - internationalization

My app adds lines like this to the ticker "[User] read [article] on [app]". I'd like to have that translated into Danish for users that use Facebook in Danish, so I've added this to the meta tags:
<meta property="og:locale" content="da_DK" />
The name of the object is "read", and the action is "article".
Unfortunately, the ticker line isn't shown in Danish, just English. How do I make it do that? I've already read https://developers.facebook.com/docs/internationalization/, but I can't get it to work. Is it possible that the action/object just haven't been translated into Danish by whomever translates Facebook? If so, how do I confirm that?
https://developers.facebook.com/tools/debug returns no error for the page, and the language tag seems to be correctly parsed.

Yeah, this kind of translation is done in the Facebook Translations app.
Go into your app settings, click edit, and on the left there will be a link to "Translate your App" - in this tool, you'll be able to specify the non-English structure of News Feed and Ticker stories.
The object itself (title etc) in Danish will be picked up from your object URL.

Talking about the Translations Admin Panel, tab Browse Phrases, column Status, reachable under:
https://www.facebook.com/translations/admin/dashboard.php?app={APP_ID}&aloc={LOCALE_YOU_TRANSLATE_TO}
What should then be the right value for this column? I have I approved at the moment and translations are not visible in the OpenGraph messages appearing in the Ticker or on the Timeline.

Related

Uipath studio- data scraping error appear after I modified the selector

I use UiPath and data scraping activity. First open the browser direct to the e-commerce site and search the product. Everything is fine, until after the product was searched and results were shown, the data scraping stopped and the output gives the following error message which I couldn't understand why:
This is because I had previously edited the selector. Currently, my selector is:
<html app='chrome.exe' title='Qoo10 - "ItemsFList" Search Results : (Q·Ranking): Items now on sale at qoo10.sg' />
My previous selector did not causes any error and the selector was:
<html app='chrome.exe' title='Qoo10 - cooking oil; Search Results : (Q·Ranking): Items now on sale at qoo10.sg' />
The ItemsFList is actually a String variable I created. This variable stores a list of text in String format. It stores the exact same text as the rpa input into the search box at the e-commerce site when the rpa begins running.
UiPath tries to write as specific a selector as it can based on the data you provide it. Unfortunately, sometimes that selector is too specific.
For example, when you scrape a page, it includes the title of the page in the selector. But the page title will change if you are looping through more than one page. And sometimes the page title is completely dynamic, perhaps including a variable that changes every time the page is loaded. If the title is hard-coded into the selector, your program will only work if that page remains constant, which rarely happens.
Remove the title
You can use wildcards in the title to make this part of the selector more generic. Quite frankly, my experience is that that title is rarely needed at all, so I just remove it whenever I do a UiPath web scrape of HTML pages.
As you can see in the image below, the title is deselected. You can then click the orange ? Validate button to confirm that the page scraping will still work without the title. If everything goes green, you're good to go.
As you've found, the title almost always gets in the way.
The issue is your UI selector. It is clear with your error as you can see the title is dynamic and you're relying on the title to find the browser window or browser control. You have to make your selector more generic and than it should work. Try go through the UI explorer or UIPath Documentation. The few options you can try in your selector is:
Remove title from the selector <html app='chrome.exe' />
Or make Title generic
<html app='chrome.exe' title='Qoo10 - *' />
Note the * sign in the title that will make it more generic and please go through their documentation

Make JAWS read page title programmatically when loading new content

I've inherited a project that uses a lot of click-triggered JS to change page content instead of linking to different actual HTML pages. I'm being asked to make JAWS read the page title when this happens, as if a new page is being loaded.
From my observations and a bit of light testing, reading the page title (meaning the contents of the <title> tag) is standard behavior for JAWS when linking to a new, separate page (as in a foo.html file), but not what happens when a same-page link or button is clicked.
How can I cause JAWS to read a page's title after a link or button is clicked that changes the existing page's content in a way that seems like a new page to the user but is actually the same file under the hood?
For this question, please assume that refactoring what I have to use an actual new page instead of JS content replacement is not an option. And if something is wrong with my initial assumptions, please let me know that as well.
It sounds like you have a single page app (SPA). You can't force the <title> element itself to be read but if you also put the same text into an aria-live="polite" container (a visually hidden <div> or <span> (*)), it'll be read.
You still want to update the title, even if it's not read, because the screen reader user can use a shortcut key (INS+T with jaws) to read the page title. And when the user switches between the browser and another app and then back again, they'll hear the title, so it's still important to update the title.
There are some decent blogs regarding accessible SPAs:
Accessible page titles in a Single Page App talks specifically
about the page title in SPAs
Building Accessible Single Page
Apps talks about general principles but doesn't really have any
code examples
Single page applications, Angular.js and accessibility talks specifically about using angular but the concepts and code examples can be applied generically.
(*) Note, when visually hiding the aria-live region, don't use CSS display:none because that'll hide it from the screen reader too. Use a sr-only type class. See What is sr-only in Bootstrap 3?
There's good info in slugolicious's answer. The specific issue has a simpler solution, though: <title> elements can be ARIA-ified.
<title role="banner" aria-live="polite">Default title here</title>
in conjunction with
$(function() {
// existing logic here
$(title).html("New title here");
});
being called when the new content loads.

Is it possible to change text directly in the code

I would like to know if there is a way to change text in the code instead of using the admin panel? I have Filezilla installed and can access my site/files from there.
If I use the inspect element in any browser, I can see an HTML structure, but as I have understood there is no HTML document in Magento, right? So where do I go if I want to make a change to a text element on my site and I don't want to use the admin panel?
Most of the text elements are handled by Magento's language translation system.
Quite often, you don't have to mess around hacking templates, just simply add a line to the translation CSV with the text string exactly as it appears, add a comma and then the new text string you want Magento to display.
For example, if you're working with US English, you can use the following file in your own custom template package as follows:
app/design/frontend/default/your_package/locale/en_US/translate.csv
Let's for example, change one of the window shade bar titles in the One Page Shopping Cart. Add a line to translate.csv as follows:
"Billing Information","Billing Address Information"
How this works, in the template the following line normally displays the title:
<?php echo $this->__('Billing Address') ?>
This code snippet $this->__('Billing Address') is a call to Magento's language translation system. It reads the translate.csv file finds Billing Address and changes it to Billing Address Information when it assembles the page html.
Lotta people out there have made changing text like this far harder than it has to be.
Hunting down the proper template, changing the text, finding the template got messed up, or trying to remember after the fact what was changed.
VS.
Changing a simple central file that contains all the text string translations... Often only by adding a new line to the file
Magento actually makes this very simple.
Thank you! So magento stores all text in .csv? or just the stuff that needs to be translated? I'm making a search for .csv via Filezilla but I only get two languages (the site is translated to multiple languages). Should I be looking somewhere else?

how to use the facebook like button with ajax driven content and load dynamic content

I have searched the net for a solution but can't seem to get anywhere.
My page (php) is loading with one url (let's say www.mysite.com)
in the page several search options on music (albums) can be done and the tracks are shown. (without refreshing the page). the info comes from a database.
So the url stays the same.
In this search process the facebook meta tags (description, url, title) stay the same also because I never reload the page, I only load content into div's.
I would like to be able to 'like' the album, and backlink to it. So I have created the function to load the album by using the url: www.mysite.com?album=12345
I can show a popup with this url to share this.
So, if you go to this url, the content is automatically loaded based on the url parameter.
And on this spot (where you can see the url with the parameter ?album=12345) I would like to show the 'like' button as well. (I generated the url, so I use this in the code:)
echo '<div style="overflow:visable" class="fb-like" data-href="http://mysite.com/?album='.$albumid.'" data-send="false" data-width="300" data-show-faces="false">?</div>';
it works so far... (after I added the parse code to enable the button)
However the like button takes the default meta tags description and title etc.
Not particular on this album or artist - so it's not unique.
Note: if I remove the meta[property=og:url] from the header I can make the button backlink to the right url with the ?album parameter. Otherwise it would go back to the default root of the site mysite.com (this does make the lint tool give an error on the missing meta)
I have tried to add into this same function something like:
$("meta[property=og\\:url]").attr("content", "http://mysite.com/?album=<?php echo $albumid; ?>");
$("meta[property=og\\:title]").attr("content", "<?php echo $artistname; ?>");
$("meta[property=og\\:description]").attr("content", "<?php echo $albumname; ?>");
I did this so the meta tags will be changed, just to let the like button show the right description etc. However this doesn't work.
I understand that facebook scrapes the page (I used the lint tool etc.) but I will never executes javascript, so the meta tags wil stay as default (when first loading the page)
What can I do to make a unique like button, with it's own description (albumname etc) without making a html page for each one of them (millions of albums in the database...)
I hope it makes sense.
I can't seem to figure this one out, help please :-)
Based on the comments below I used the following solution:
you should create the right fb meta tags when the url (with the params ?alb_id=12345) is opened.
That's enough for the like button to do its job.
Your logic is fine, up to the point where you're setting the meta tags using jquery.
They should be set using PHP. As you can imagine the scraper won't execute the jquery, but if it's fed the already PHP-customized meta tags it will use them (as provided).
Just have the og:tags prepared server-side, depending on the albumId requested, and it should work. It might not work right away, I remember there used to be occasional caching issues with the scraper before.
In short, index.php?album=123 will send a different set of og:tags to the scraper than say index.php?album=321. Just set them up server-side.
<meta property="og:title" content="<?php echo $artistTitle; ?>"/>
What can I do to make a unique like button, with it's own description (albumname etc) without making a html page for each one of them (millions of albums in the database...)
You can’t, because Open Graph objects are URLs (resp. are represented/identified by their URL).
One URL == one Open Graph object.
But where’s the problem in having one URL for each album? Since it all works using parameters, it’s not like you have to create a page for each album URL manually …

Facebook can't access my web app image

i try to share a link from the web app which i am making.
But facebook can't access my web app's image .
is there any solution to fix this?
Since you didn't provide much information, these are some tips:
Use the full list of Open Graph Meta Tags:
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.
After adding the Meta Tags, run the website again in the URL Linter to clear the Facebook caching.

Resources