I'm looking at what's required to develop a web page for the Kik Messenger in-app browser and I'm confused as to how the development workflow is supposed to work.
The API Docs say that "To launch your webpage in Kik simply open the sidebar and type in the URL to your webpage.", which would be fine except for the fact that the "sidebar" no longer exists in the current version of the app and it no longer seems to be possible to enter an arbitrary URL(*).
* EDIT: It looks like you can open an arbitrary URL in the browser by entering it into chat and then tapping on it.
Given these restrictions, how do folks test their web pages with the app? Do you have to just use the Chrome Extension until deployment?
Related question: How do you make Kik aware of your web page? Some of the other questions on this site imply that you have to wait for their web crawler to index it. Is that the case? If so, is exactly how this works documented anywhere? I feel like I've missed a doc link along the way.
In December they removed the NEW Apps tab in the Discovery Section as well as the option to access arbitrary URLs. (as you pointed out) For testing I usually use the Chrome extension or access my testserver via an URL from a chat.
But since the NEW tab is currently removed, it is not very feasible to release new Kik Apps at the moment, since people would only be able to discover your App by using the Search function and getting into top 100 would be very unlikly this way. I contacted Kik if the removal of the NEW tab was a permanent change, to which I got the response that they are currently revamping their platform and new solutions on the way for the stuff they are moving.
So if u are currently working on a Kik App I would recommend waiting with releasing it until possible future updates of the Kik Browser are released.
As for your other question to make the crawler find you app, you simply have to add some Meta tags into your header:
<meta name="description" content="app description">
<link rel="kik-icon" href="your image")">
<link rel="canonical" href="your domain">
<script src="http://cdn.kik.com/kik/2.0.5/kik.js"></script>
Related
Based on my custom URL parameters I process, I am trying to modify dynamically a meta tag I have id'ed in index.html like so:
<meta name="og:image" content="http://example.com/someurl.jpg" id="ogImage"/>
The code below in my home.ts seems to be working
document.getElementById('ogImage').setAttribute("content", Media.ImageURL) ;
I can verify it is via the browser dev console/elements.
However, when I view from facebook via their ojbect graph debugger at
https://developers.facebook.com/tools/debug/og/object/
It appears to see the default
http://example.com/someurl.jpg
as if the index.html is shipped before my home.ts gets chance to make the update.
Perhaps, my understanding is flawed and there is better way to do this.
Thank you.
Note1: initially, I was thinking I had to make some angular binding between index.html and one of my services but I could not locate any sample code, the closest I came to was this post
How can I update meta tags in AngularJS?
But I don't know how to apply it for my ionic2/3 code, so I opted for the document.get approach.
Note2: the ultimate goal here is to share a link into a social media (web or app) like facebook, a messenger like viber/skype, etc... and have it resolve to meaningful images, title, description to drive the visit back to the site via browser, or app if the user clicking on the link is on a mobile device with my app version of the site installed on his device.
Note3: if you decide to point me to ionic deeplinking please provide code to match above, because I could not understand how to apply to my case.
If you are trying to implement dynamic open graph meta tags values in your pages, you will need a server-side scripting language like php. Such a script will run on the server, update the pages as needed, then the pages will be served to the requesting site or application.
client-side scripting (ie. JavaScript) is usually ignored when a site or app is merely visiting your site/link for the purpose of extracting (aka scrapping, parsing html) information such as the one provided by the open graph meta tags (og:title, og:description og:image...).
I have a personal project which consumes my free time and effort for about a year without significant profit. I have problems with it appearance in Google and would really appreciate to get help here.
This project (http://yuppi.com.ua - similar to craiglist in US) is WEB-based AngularJS 1.2 application that uses PHP rest API hosted on GoDaddy. And in order to make this application popular it have to be very visible in internet and very searchable in Google and users have to be able to share pages via social networks or skype.
According to Google specification, google crawlers doesn't run javascript to get content of a web page before index, so I've added _escaped_fragment_ page that displays content of web page without javascript. For example:
Page: http://yuppi.com.ua/#!/items/sub/18/_
Dirty : yuppi.com.ua/?_escaped_fragment_=/items/sub/18/_
This dirty page will be redirected here where google will see content.
http://yuppi.com.ua/server/crawler_proxy/routee.php?path=/items/sub/18/
So basically I have two versions on HTML file for that page. One version is the one that available to users, which has styles, a lot more HTML tags etc. And the second is the version for Google crawler - very light-weight without any styles. And I am expecting to see clean link to my site in Google, not dirty.
So, If to search all links to a web site in Google you will see that one of the links displays it's "dirty" state.
Another problem is sharing links in Skype.
When I send a link to someone, I am expecting that this link will be transformed to thumbnail image but it is not happens. Instead I see ungly link to my web site.
Please help me to understand how to make happy everyone: users, google crawler, GoDaddy and me.
I was encountering the same problems last year with a big project and we ended to use : https://prerender.io/.
It's a prerendering system that work with a phantomjs browser to detect bot request and render a full html template. It does also instanciate a cache service to not render again a template that haven't change.
Hope it help's.
I have a web site that I'm working on which has a fully implemented paypal checkout flow. We're working on a mobile client which re-uses this flow to accomplish checkouts.
Unfortunately, when we redirect to the paypal site, we get the full desktop style, rather than layout and styles tailored to mobile.
Is there any URL parameter I can supply or different approach I have to take so that the checkout is usable on a mobile device?
The URL we're redirecting to looks like this:
https://www.sandbox.paypal.com/webscr?cmd=_ap-payment&paykey=AP-LOTSOFNUMBERS
That's odd. I never realized Adaptive Payments didn't automatically kick in to the mobile. I know Express Checkout does, so you could switch to that unless you had some specific need for the Adaptive platform..??
If you do stick with adaptive check out the options for the checkout flow. You can do an iframe and other things that might work better for mobile. There's a lot of info at that link about it.
I have an angular app set up to work in html5 mode with a #! fallback, so on most browsers it works with http://example.com/foo/bar and on less cool browsers we get http://example.com/#!/foo/bar. All that seems to work.
I have been going through trying to get google to crawl the site nicely, and it doesn't seem to be working as expected. I have set up <meta property="fragment" content="!" /> in the page to signify to google to recrawl with ?_escaped_fragment_=, and set up nginx to redirect to a static version of the page when it receives a request like this.
It is working for the front page - looking in the access logs I can see http://example.com/?_escaped_fragment= and can google "A sentence from the front page" and get the home page back as a result.
However it is not working for any of the interior pages, if I look in the access logs I can see a whole bunch of http://example.com/foo/bar/?_escaped_fragment_= rather than http://example.com/?_escaped_fragment_=/foo/bar/ as I might have expected.
Is there anything obvious I am missing to make google do what I want it to?
I think that is for AngularJS apps with HTML5 routes, and indeed, you should see requests with just ?_escaped_fragment_=, not ?_escaped_fragment_=/foo/bar/. For more info check section "3. Handle pages without hash fragments" here, https://developers.google.com/webmasters/ajax-crawling/docs/getting-started.
I've a mobile version of my site which has a 'Donate via Paypal button' on it which is working fine. It's a button generated from within the paypal account that when clicked brings users to my account and asks them to enter an amount to donate and then either login or pay with CC.
Problem is the Paypal page it brings me to is not mobile optimised. From reading online It appears Paypal only offer the mobile enhanced version if you're using Paypal Mobile express checkout which is far more involved than simply adding a link onto your page.
The system I have now is 100% functional and does everything I want it to, I just want it to switch to the mobile version when you go to Paypal, to be honest it's very surprising Paypal doesn't do this automatically. They should detect a mobile browser and just change the stylesheet or redirect to the mobile-login page.
Is there any way of getting the mobile-styled paypal page without having to jump through the hoops of using the express payment system? I know it's not masively difficult but it is when compared to the really simple version I'm currently using.
After hours messing with Pain Pal I finally figured out the issue. If you use a link generated by PP for donating ON THEIR SITE - ie. You go to Paypal and once there you enter the amount you wish to donate - the it won't style as the mobile site.
However, if you take the amount in on your own site and pass it to Paypal then it will auto change to the mobile site.
Ignore anyone on line (and there are plenty of people who do) telling you that to get the mobile styled site you need to use their mobile express checkout. You do not. At least not in the above scenario.
As stated here the mobile optimisation is not working for "Donate" buttons.
Which command did you use ?
With cmd=_donations its not showing the mobile version. When you use cmd=_xclick its mobile optimised, but then its not a "Donation" Site.