Twitter Widget Cordova Application Pop up - angularjs

I am working on integrating twitter Widget in a tab of a Cordova application. I am using Cordova with Angularjs and ionic Framework.
I have obtained the API key needed in order to instantiate the widget and after a few attempts I got it. I attach one image (twitter in tab)
In order to do that, I create a tab, put the javascript in the main .html file and the link. So far, ok:
<a class="twitter-timeline" href="https://twitter.com/hashtag/mwc2015" data-widget-id="XXXXXXXXXXXXX"></a>;
But, the "show" begins when the user clicks on the twitter widget.
If you want to retweet, tweet something or whatever, twitter widget opens a new page, pop up, which is placed on top of cordova app, and then, user can not go back.
Device Back button doesn't work.
You can register and send a tweet, but always this new window is on top.
I attach an image to show what the user see in the screen when any button is clicked. twitter on top
So, you should kill Cordova app and start again.
I was wondering if someone knows how integrate the widget and the "children " pages of them , or if a javascript alternative to change target parameter of all links inside widget.js in order to open new windows inside the app.
Thank you so much.

I have experienced the same issue with Instagram, but I hope it can help as well. First of all, please install cordova InAppBrowser plugin.
cordova plugin add cordova-plugin-inappbrowser
Then try to modify your config.xml file with following, adding it before platforms tag:
<allow-navigation href="about:*" />

Related

How to implement the Google Tag Manager with a React web project and how to check it's working on every page?

How to implement the google tag manager in react project. I already pasted the script code on index.html and code in the body tag.
And it also working am getting API hits on the network console.
note: I don't have any App.js in my project.
enter image description here
But I need to know is enough or not.
if I move to any other page by clicking the link on the home page GTM API is not in the network console?
How to check it's working on all pages?
Inspect the web page
Go to the console tab
type: "dataLayer", if this property exists, then GTM is set correctly. You just need to create the tags and triggers in GTM to track the events that you need

How do I get my button to redirect to a web page within the app?

So far, I have it so that when a user presses a button, a browser opens and redirects the user to my desired url. However, I want this to happen within the app instead of a web tab. How can I do this?
Use the BrowserComponent, just add it to the center of a border layout form and set the URL for that component. Check out the list of main components in Codename One within the developer guide.
Define a xml layout containing a widget called webview. Then in your activity you implement a listener to your button which invokes that xml with the desired page to load inside your webview. Google to find some code and return here with your code problems, if you find some. If this will be the case, open new questions provinding detailed info about your matters then we can help more. Best.
EDIT: Excuse me, just now, re-reading your question I think I really understand it, and the solution is very simple, just a line of code (to instruct your app to open a webpage inside your webview, and not the regular browser, outside your app). Try this:
wv = (WebView) findViewById(R.id.myWebView);
wv.setWebViewClient(new WebViewClient()); // needed to open url inside our webview, otherwise it will open at the default browser
wv.loadUrl(url);

Ionic / Cordova with embedded video takes over web view

In a simple Ionic app I have a plain web view with some embedded videos. These embedded videos are included with an oEmbed iframe. Video works fine, but almost every video provider has a link to watch the video on the provider's page. For example Youtube always has a button 'watch on Youtube'.
When my users (accidentally) click that link, the whole Cordova web view is taken over by the linked URL. Instead of my app it shows the Youtube video. Then the user never gets to go back to my app, except by closing and opening the app.
I've tried to:
Prevent navigation by watching $locationChangeStart, that doesn't work as it doesn't fire for external URLs (like Youtube's).
Prevent navigation by using window.onbeforeupload, but that doesn't suffice as it doesn't guarantee the user navigates away and it presents an ugly confirmation popup.
Any other ideas on how to prevent navigation to external URLs from an Ionic/Cordova app would be highly appreciated.
You should provide more info, how do you insert the videos? some code?
I don't use videos, but I had a similar problem with google maps, if the user clicks the legal link, the page nativate to the google legal page and the user can't go back.
To fix this, I installed inAppBrowser plugin and used this code to open the legal page inside the inAppBrowser window
$('#map_canvas').on('click', 'a', function(e){
e.preventDefault();//you prevent the default click
window.open($(this).attr('href'), '_blank');//you open the link on the inAppBrowser window
});
So you should inspect the video to see if you can do something like this, preventing the link click and opening it on the inAppBrowser plugin
You will have this problems using externa players, a possibel solution would be to host the videos on your server and use some jquery/angular video player.
insert
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
in your index.html. So when you open a link,it'll use your device browser.You can come back from the device browser to your application with android back button.
You should probably give your url's like this
var ref = window.open('https://www.******.com/', '_system', 'location=yes');

Share one page with Facebook JS SDK with angularJS

I'm doing an web app with angularJS that is about books. Now that app is in the end im try to share an book page in facebook.
Every time that user click in a share button i change in the controller the meta tags but when the FB.UI Share Dialog opens nothing is scraped . This happens because facebook scraper don't run javascript?
How can i solve this?

A Link Inside an iFrame That Pops Up "Photo Theater"

I have a tab with an iframe external web page that loads... I would love a hyperlink inside that web page to link one of my photo albums in "theater" mode so you don't leave the page. However, any link I program inside that web page just brings in that photo album inside (not popped up and not in theater mode no matter if I have the &theater in the url).
Can I get some help on how to do this? Thanks!
this is a limitation of iframes in general. Less of a limitation and more of a security issue. As you said.. the iframe loads and external page - a page that could essentially come from anywhere. To protect the integrity of the site displaying this external page, the iframe can not access the page that contains it.
You might want to try opening a new window using javascript :
window.open ("{path_to_image}","title","menubar=1,resizable=1,width=350,height=250");
as you can see there are several options that you can set to customize the popup window.
Here is another link with some info about iframes

Resources