On my website, a user enters their Twitter username when they register and their timeline is embedded on their profile page. Until now, I've achieved this with the following JavaScript code:
<script type="text/javascript">
var twitterUsername = // read from database
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 'auto',
height: 210,
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser(twitterUsername).start();
</script>
Recently I noticed the following messages appearing in the JavaScript console
TWITTER WIDGET: This widget is being deprecated, and will cease functioning soon. https://twitter.com/support/status/307211042121973760
TWITTER WIDGET: You can obtain a new, upgraded widget from https://twitter.com/settings/widgets/new/user?screen_name=electricpicnic
It seems that instead of using this widget I should use an embedded timeline. However, the docs seem to suggest that in order to embed a timeline in a page, you need to go to the widgets section of your settings page and setup a widget for each user whose timeline you wish to embed. Twitter gives you the code that will embed this timeline in your page, but this code contains an attribute data-widget-id="275025608696795138" which has a different value for each user.
Obviously this approach won't work for me, because it's not feasible for me to setup a widget for all my users (present and future) and store a data-widget-id for each of them. Is there some non-deprecated way that I can embed timelines, which allows me to provide the Twitter username at runtime?
Update
According to this post in the Twitter dev discussion group, this functionality is not available currently, but will be provided in a future version.
Twitter is deprecating their unauthenticated widgets. You will no longer be able to use those.
But Twitter has an API that you can call, and you can generate your own custom tweet timeline UI without having to use their widget. For an example of the UI, see http://tweet.seaofclouds.com/.
But you also have to know that you just can't call their API directly from Javascript, since their API has OAuth. You can call their API only from server-side code (I don't know what you're using now, PHP/Ruby/Python/Java?). Good news is, OAuth is an open standard and you can call their API using any language. Here is an example of the same widget, but it gets data by calling the API using PHP. This is a long term solution.
If the Twitter timeline is essential for your site - then you have to go the API way. You must register your site with Twitter, and then use OAuth to get a user's timeline data, and use that data to render the javascript widget.
With the new Twitter widgets, just create an authenticated twitter widget from your own account (e.g. YourName).
Then set the data-screen-name of the user (e.g. 'twitterUsername') you want to show and you end up with something like this:
<a class='twitter-timeline' href='https://twitter.com/YourName'
data-widget-id='your-widget-id'
data-screen-name='twitterUsername'>Tweets by #twitterUsername</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');</script>
Here is a bit of javascript that you can use to embed a user's timeline in a webpage
Add the script https://www.tweetjs.com/tweetjs.js
Then add the code:
TweetJs.ListTweetsOnUserTimeline("PetrucciMusic",
function (tweets) {
for(var i in tweets)
{
document.write(tweets[i].text + "<br>");
}
});
... Although I'd recommend using better styling than that :)
This is how I use it, feels pretty decent.
HTML:
<ul id="twitter_update_list">
</ul>
Script:
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="https://api.twitter.com/1/statuses/user_timeline.json?screen_name=theunexpected1&callback=twitterCallback2&count=10"></script>
Notice the "screen_name" variable sent out to the script.
You can customize your callback function (blogger.js), also you can save this file locally to avoid external request.
Hope this is useful.
For reference, I have created a jsfiddle here, you can take the CSS snippets too from there.
http://jsfiddle.net/rahulsv/8fRTD/
UPDATE:
This solution no longer works since Twitter updated to v1.2 - no unauthorized access to tweets.
Related
Ive tried using the js load function but as the external site does not allow CORS requests, my original GET request gets blocked.
<div id="test"></div>
<script>
$(document).ready(function () {
$("#test").load("https://mywebsite.com");
});
</script>
So it seems that my only approach is to use iframes?! Is there a way to only crawl a specific div with iframes? I dont want to display the whole website.
EDIT: Since I am using Django I was able to crawl the website with python in a view and then push the crawled and cleaned up code snippet in the html template. Nevertheless to answer my question -> There is no correct way of doing it as long as the website you are trying to access is blocking the content.
Work with the owner of the site you want to take content from.
They can set you up with an API. That avoids having to use hackey methods or risking copyright-related legal trouble.
Looking into using Google Cloud Print, it seems that it is quite complicated regarding OAuth2, the various tokens/client ids etc.
What is the simplest possible way to print a PDF from a web page?
Implemented client side in Javascript with AJAX (so with CORS) or server side with Java (but preferrably not too many jars needed)
PDF document can be sent as binary or referred to as publicly available URL
Preferrably no user login, must be with some kind of "service" authorization
The same application is already using API keys for google maps geocoding. So re-using these keys, if possible, would be the ideal option.
It would be great with some pointers on how to do this in the simplest possible manner possible.
The simplest possible scenario is using the GCP Web Element, as described in: https://developers.google.com/cloud-print/docs/gadget
It boils down to including the print gadget scripts, creating a container to host the button and creating the print gadget in it:
<html>
<head>
</head>
<body>
<div id="print_button_container"></div>
<script src="https://www.google.com/cloudprint/client/cpgadget.js">
</script>
<script>
window.onload = function() {
var gadget = new cloudprint.Gadget();
gadget.setPrintButton(
cloudprint.Gadget.createDefaultPrintButton("print_button_container")); // div id to contain the button
gadget.setPrintDocument("url", "Test Page", "https://www.google.com/landing/cloudprint/testpage.pdf");
}
</script>
</body>
</html>
If you are not logged-in your GCP account you will be shown the appropriate log-in dialog and then you'll select the target printer.
Check the fiddle here:
https://jsfiddle.net/0ncsuqra/
I'm using ionic framework to develop native app. Here, I'm having default header in all the pages. When switching over to second page, I need in-app browser to view the external content.
So, I used window.open
Click Here to view inapp browser
But, I need the header to be constant when I am viewing the content in in-app browser.
Is it possible in ionic framework?
I don't need iframe for this. It is heavy weighted in html.
Updated:
I m having a html file which I m injecting to iframe. like
<div id="header"></div>
<iframe src="serveraddress/index.html"></iframe>
Instead of iframe, is there anything which remains the header constant? If I use in-app browser, my header was invisible.
EDIT
I had disregarded the in-app browser element in your question. Here is an update, specifically for in-app browser.
DISCLAIMER: none of the code provided below has been tested; however, this answer gives you guidelines to implement your solution.
Instead of iframe, is there anything which remains the header constant? If I use in-app browser, my header was invisible.(...)Header needs to be constant when I'm viewing external website content.
When you use in-app browser:
Click Here to view inapp browser
it opens a popup which displays the requested URL.
You would like to have your own header displayed in the in-app browser window. I see two ways to do this:
A) You could customise the webpage you want to display in your in-app browser beforehand, and store it on your server.
The customised webpage could have included some third party HTML, using one of the 4 techniques mentioned below. See techniques 1, 2a, 2b and 2c.
Say you store a customised webpage on your server which is like so:
<div id="header"></div>
<div id="main"></div>
The page is stored on your own server, at url: www.myserver.com
If you make your in-call like: window.open('http://www.myserver.com',...) you would display your customised page, with your own headers.
B) You could fetch the third party webpage with in-app browser, keep it hidden, modify it, then display it
Please read this Cordova doc page.
To open a window and keep it hidden:
var ref = window.open(url, target,'hidden=yes');
To execute a script when the hidden in-app window is ready:
var iabRef = null;
function insertMyHeader() {
iabRef.executeScript({
code: "var b=document.querySelector('body'); var a=document.createElement('div');document.createTextNode('my own header!'); a.appendChild(newContent);b.parentNode.insertBefore(a,b);"
}, function() {
alert("header successfully added");
});
}
function iabClose(event) {
iabRef.removeEventListener('loadstop', replaceHeaderImage);
iabRef.removeEventListener('exit', iabClose);
}
function onDeviceReady() {
iabRef = window.open('http://apache.org', '_blank', 'location=yes');
iabRef.addEventListener('loadstop', insertMyHeader);
iabRef.addEventListener('exit', iabClose);
}
Now you can show the in-app window: ref.show();
APPENDIX: 4 techniques to use third-party content in your apps:
If the third-party website provides an API (complex solution, but entirable configurable)
e.g. Bing Search API
Some websites provide an API, which responds with bare information, usually returned in the form of a JSON string.
You can use a JavaScript templator like Mustache to create your HTML from the JSON response you got, either server-side or client side. Then you open your popup:
<div id="header"></div>
<div id="myTemplatedHTML"></div>
If you go for the client-side option, I suggest you read open window in javascript with html inserted
2a. If the third-party website does not provide an API: cross-site javascript call
Please read this thread: Loading cross domain html page with jQuery AJAX
You would have in your HTML:
<div id="header"></div>
<div id="myLoadedHTML"></div>
And the myLoadedHTML would be filled with HTML fetched from the third-party website.
I recommend to use a tool like YQL to fetch the HTML. YQL will let you make complex queries to fetch just the bits of HTML you need.
2b. If the third-party website does not provide an API: embed
Please check this thread: alternatives to iframes with html5
It reads that: if you want to display cross domain HTML contents (styled with CSS and made interactive with javascript) iframe stays as a good way to do
It also mentions the embed tag:
<embed src="http://www.somesite.com" width=200 height=200 /></embed>
In your case, you could probably achieve your goal with something like:
<div id="header"></div>
<embed src="http://www.somesite.com" width=200 height=200 /></embed>
2c. If the third-party website does not provide an API: iframe
Alternatively, should you want to display a third-party website in an iframe, and then modify the display with your own content, I suggest you check this StackOverflow thread: Cannot modify content of iframe, what is wrong?
In your particular case, say you named your iframe myIframe:
<iframe src="serveraddress/index.html" id="myIframe"></iframe>
You could then achieve your goal with something like this:
$(document).ready(function(){
$('#myIframe').ready(function(){
$(this).contents().find('body').before('<div id="header"></div>');
});
});
I'm afraid the inAppBrowser Plugin does not support such behavior. It's not listed on their docs here
https://github.com/apache/cordova-plugin-inappbrowser
You can edit the plugin native code for iOS and Android, if have such knowledge.
If you don't want to get into native development (probably), then iframe is the way to go. But you won't be able to edit the contents of the iframe because it will be in a different domain from your application. All you can do is position and size the iframe so that it fills the page right below you application header.
I know it's been a while – just in case somebody is struggling with the same issues: There's a themeable version of cordova's InAppBrowser which is working like a charm, we used it recently in a project.
https://github.com/initialxy/cordova-plugin-themeablebrowser
I am going to create a crawelable ajax by jquery, How to do it? before I had a website that used jquery Ajax for searching my website but nothing indexed.
this is the new way tha I use:
page 1
And then show result by ajax and don't allow the link to go:
javascript
$("body").on("click","#linkA",function(e){
e.preventDefault();
var href=$(this).attr('href');
$.ajax({
type:"POST",
url:"ajax/return.php",
data:({page:href}),
success:function(data){
$("body").html(data);
}
})
});
my questions:
1- Is the way that I am using true?
2- Is this way crawelable?
I think the way that you are using is true, and it's a good way, but google has an article about Making AJAX Applications Crawlable
As long as the links you provide in the "href" attribute are also rendered correctly by the server if the browser accesses them directly, you're on the safe site. You should also use HTML5 History API and Pushstate in order to reflect the url of the page currently shown, so visitors can use their browser history buttons, send links to pages and favorize them in their browser.
Google and the other search engines normaly won't execute your javascript and try directly to access the links you provide.
If your site got heavy scripts to load or static parts like header, footer, menu it's a great way to improve your loading / rendering speed by hijacking the links and loading only the needed content via javascript.
I am implementing a content sharing service, similar to Twitter and Facebook button. When the user visits a page, he will be able to click on my button, which will open a page in a new window that lets the user interact with my service. My service use 2 parameters: the current page's URL and title.
I have looked at the html code used to add the Twitter, Facebook and Printfriendly buttons and they all use Javascript code specific to their service.
For instance, this JS file must be included to add the Printfriendly button to your page:
<script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script>
For Facebook: <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
Twitter:<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
My question is do I need to write some Javascript code or can I just forward all the request to the server?
Thanks,
Olivier.
You need to write a bit of JavaScript code for the button (for the window to show up with the specified contents) and the main script (which is included like Twitter and facebook did as you mentioned)
You can get away with simple hyperlink. For example Facebook share button works like hyperlink: Share on Facebook.
The reason to use javascript or iframe is to have better control over user experience. So it is up to you to decide how you want to handle it.