Facebook Javascript SDK Feed Dialog showing blank window - javascript

I'm using the Facebook Javascript SDK to post on my page, i've already read something about this here: Facebook feed dialog: allow user to select destination page or group so I've been using this code so far:
$("button#shareOn").on('click',function(event){
event.preventDefault();
var _parentForm=$(this).parents('form:first');
var _pageSelect=_parentForm.find("select[name='pagesList']");
var _pID=_parentForm.find("#pID").attr('value');
var _vURL=_parentForm.find("#_vURL").attr('value');
FB.ui({
app_id:app_id,
method: 'feed',
from: _pageSelect.val(),
name: 'Title',
caption: 'Subtitle - 26/02/2013',
description: 'My text',
link: _vURL,
},function(response){
console.log(response);
});
});
Where _pageSelect.val() is the ID of the page in which I'm trying to post, _vURL is the url ( youtube link ) which I want to share... The problem is that when I click on the button, a window opens up, but's actually blank.
By opening Google Chrome's dev console, sometimes I see a 500 Internal Server error related to that window and sometimes it only comes up totally empty, but I can't figure out what is actually causing it.
I've also tried urlencode the url from PHP or encodeURIComponent from Javascript, but nothing as changed at all.
Sometimes the window comes up only with Title, Subtitle and Description, so I guess the link should be the error, but I knew that Facebook JS SDK used to write Link not properly formatted or something like API error (100).
UPDATE
It seems that Feed dialog has started collaborating, but still not working as expected. This is the updated code:
$("button#shareOn[name='shareVideo']").on('click',function(event){
event.preventDefault();
var _parentForm=$(this).parents('form:first');
var _pageSelect=_parentForm.find("select[name='pagesList']");
var _pID=_parentForm.find("#pID").attr('value');
var _vURL=_parentForm.find("#_vURL").attr('value');
var options={
app_id:app_id,
method:'feed',
from:_pageSelect.val(),
link:_vURL,
caption:'test'
}
console.log(options);
FB.ui( options, function(response){});
});
The window is opening, but sometimes it's blank and sometimes shows a link, which is not the url of the video, but it's just www.youtube.com. I've been trying with the Facebook URL Debugger and it's showing me that the URL which I'm using is actually right. But feed dialog just doesn't work

So, I've got the answer, which isn't really what I was expecting, but at least it works. As the Facebook docs aren't pointing to this, I've found the sharer method, which I call in a Javascript function.
So, this is the code:
$("button#shareOn[name='shareVideo']").on('click',function(event){
event.preventDefault();
var _parentForm=$(this).parents('form:first');
var _pageSelect=_parentForm.find("select[name='pagesList']");
var _pID=_parentForm.find("#pID").attr('value');
var _vURL=_parentForm.find("#_vURL").attr('value');
var leftPosition, topPosition;
var windowFeatures = "status=no,height=" + 400 + ",width=" + 300 + ",resizable=yes,left=" + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no";
leftPosition = (window.screen.width / 2) - ((300 / 2) + 10);
topPosition = (window.screen.height / 2) - ((400 / 2) + 50);
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(_vURL),'sharer', windowFeatures);
return false;
});
By the way, I don't like this method, but it seems like the only way to accomplish what i was trying to do. Now I just need to know how to get the result of the sharing function ( if the post was shared or not ).
Hope this will help someone :)

Related

aspx page open a hyperlink via a button

I've read a few answers, and tried a bit of different code from them, but haven't been able to solve this. I am a newbie at this and it seems like quite a simple thing to do, apologies if the answer is really obvious, just need it to work really..
So far, I have an aspx page in Visual Studio 2010 / it was created by someone else, and has both JavaScript and cSharp code behind it.
What I would like to happen is that, an 'Edit' button appears on the page in a table in the correct place, and as a result of pressing it, another page is called allowing the editing (of contacts - it's an internal website).
I can get the link working OK as a 'normal' hyperlink, using this line of code:
var editcontact = '<td align = "right" colspan = "40" class =
"contactBorder"><a href="WebForm1.aspx?supplier_id=' +
dataRow.supplier_id + '">Open Contact(s) For Edit</a></td>';
edit contact then gets put in a table like structure (maybe it's "form" given the HTML tags):
finishedcontacts += openrow + contactid + contactname +
contactjobtitle + contactlocation + contacttelephone +
contactemail+ editcontact + '</form></tr>';
That's OK but it's not very 'nice', what I would like is an actual edit button, I can get the button to appear, but the last time I tried it pressing it does nothing:
var editcontact = '<asp:button id = "editImage4" runat="server"
Text="Click me"
OnClientClick="window.open(\'WebForm1.aspx\\?supplier_id=\' + dataRow.supplier_id + \', \'WebForm1\');" />';
Any ideas on how to get this working OK from a button?
Here is some other code I tried, which was to separate out the generation of the url from the calling code, but none of them seemed to work:
//var url = string.Format("{0}?supplier_id={1}", "../WebForm1.aspx", dataRow.supplier_id);
//var url = string.Format("{0}?supplier_id={1}", #"../WebForm1.aspx", dataRow.supplier_id);
//var url = 'string.Format("{0} supplier_id={1}", "WebForm1.aspx",'+ dataRow.supplier_id +')';
var url = 'WebForm1.aspx?supplier_id= '+ dataRow.supplier_id +'';
var supplierid1 = dataRow.supplier_id;
Any ideas what be greatly appreciated. This is my first ever post..
Use Response.Redirect(url) if you want to redirect using your button and this button must be a server side control.
In the end, a colleague helped me out with this.
As other posters identified there was some problems with the URL, and especially with the escapes.
Anyway below is the code in the unlikely event anyone needs something similar.
buttoncode = '';
var editcontact = '' + buttoncode + '';
And we added a function (which should probably be called a method or whatever):
function OpenContactForEdit(supplier_id)
{
window.location = "WebForm1.aspx?supplier_id=" + supplier_id;
}
Comments:
This bit is very important:
onClick="OpenContactForEdit(\'' + dataRow.supplier_id + '\')"
Note exactly how we needed to escape (and 'end escape') the single quotes.
I believe that was quite a big part of why, what I was doing was not working.

Phantomjs check if javascript exists and is working

I am quite new to Phantomjs and am starting to getting to know how to use it. However all of the semi advanced tutorials does not cover the thing i want to use Phantomjs for.
Now my question is how would i check if a Javascript is active on the site and if it is working correcly (i.e not throwing erros in the console).
I hope someone is able to point me in the right direction or know how to do this.
you can interact with the open page using the webpage.evaluate method:
var page = require('webpage').create();
page.open('http://m.bing.com', function(status) {
var title = page.evaluate(function(s) {
//what you do here is done in the context of the page
//this console.log will appear in the virtual page console
console.log("test")
//here they are just returning the page title (tag passed as argument)
return document.querySelector(s).innerText;
//you are not required to return anything
}, 'title');
console.log(title);
phantom.exit(); //closes phantom, free memory!
});
in order to see the virtual page console, you have to add a onConsoleMessage callback:
page.onConsoleMessage = function(msg, lineNum, sourceId) {
console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")');
};
EDIT: by default javascript is executed.

Twitter Intents Popups from Actionscript 3 application

I have an AS3 application that shows users tweets. I'm trying to use the twitter intents links to do popups, such as https://twitter.com/intent/retweet?tweet_id=93035636432437248.
When you have a simple href="link" it will use the embedded http://platform.twitter.com/widgets.js to properly format a nice popup window.
When in flash I can only open in self or blank and neither triggers the JavaScript the same way it does when you click from html href links.
I also tried using ExternalInterface to call a js method to use document.location or window.open and neither used the twitter js.
What is the best way to harness the Twitter JavaScript from a flash button so we get the nice clean popup window?
Looking at the Twitter Web Intents API Documentation, near the bottom of the page you can find a link to the unobfuscated source code which shows how their API automatically handles links.
Put simply they are attaching a Click Event Handler to the DOM which then checks to see if the link being clicked points to their Web Intents URL. As you are opening a window from ActionScript you are bypassing the DOM and therefore the code won't fire.
Now normally you would just expect to use ExternalInterface to call a method exposed by the Web Intents API; however the clever chaps at Twitter have created their entire API in an anonymous closure to avoid polluting the DOM - gotta love javascript ;)
So, personally, I would tackle this by creating my own version of the Twitter Web Intents API and including it on the HTML page which my Flash Application sits; for example:
// Create a global object which we can attach methods to.
var TwitterAPI = {};
// The methods themselves are created in a closure to avoid polluting the global
// namespace with temporary variables.
(function() {
// The base URL of the Twitter API.
TwitterAPI.baseURL = "https://twitter.com/intent/";
// Opens a pop-up window and prompts the user to retweet the Tweet linked to
// the supplied tweet_id.
TwitterAPI.retweet = function(tweet_id) {
var url = TwitterAPI.baseURL + "retweet?tweet_id=" + tweet_id;
openWindow(url);
}
function openWindow(url) {
var windowOptions = "scrollbars=yes,resizable=yes,toolbar=no,location=yes";
var width = 550;
var height = 420;
// Center the popup window.
var left = Math.round((screen.width / 2) - (width / 2));
var top = 0;
if (screen.height > height) {
top = Math.round((screen.height / 2) - (height / 2));
}
window.open(url, 'intent', windowOptions + ",width=" + width +
",height=" + height + ",left=" + left + ",top=" + top);
}
}());
You can then invoke this from your ActionScript project via an ExternalInterface call, as you previously suggested:
ExternalInterface.call("TwitterAPI.retweet", "35782000644194304");

Ok, I've got the bit.ly link, but now the asynchronicity of jQuery is getting in the way

function dlLink(title, currentArray, currentIndex, currentOpts)
{
var img = new Image();
img.src = 'Gallery/Wallpapers/' + title;
html = img.width + ' x ' + img.height + '<br />'
+ '<a class = "nav" href = "Gallery/Wallpapers/' + title + '" target = "_blank">Download</a><br />http://';
// set up default options
var defaults = {
login: '*************',
apiKey: '*******************************',
longUrl: 'http%3A%2F%2Fschnell.dreamhosters.com%2Fwallpapers.php%3Fwp=' + title
};
// Build the URL to query
var daurl = "http://api.bit.ly/v3/shorten?"
+ "&login=" + defaults.login
+ "&apiKey=" + defaults.apiKey
+ "&longUrl=" + defaults.longUrl
+ "&format=json&callback=?";
// Utilize the bit.ly API
$.getJSON(daurl, function(results) {
$('#fancybox-title').append(results.data["url"].substr(7));
});
if(img.complete)
return html;
}
Ok, the point of this function is that it's a callback to a Fancybox that puts HTML content into it's 'title' section. In this section I put the image's resolution, a download link and a bit.ly link for coming back to the image at this website - http://schnell.dreamhosters.com/wallpapers.php?page=12 Originally I was having XMLHTTPRequest problems with the bit.ly URL, but I seem to have resolved those.
The problem now, though, is that I need the variable 'html' to have all the html content that's going into the fancybox before the return statement comes up. While it may look like everything happens before the return statement, jQuery is doing the $.getJSON() function asynchronosly and so it's not garaunteed that 'html' will have stuff in it before dlLink ends. I need a way to make it so that the order of things happens as its shown in the code, so that the $.getJSON request and the subsequent callback function will always finish what they're doing before going onto the return statement.
Edit - I figured out what to do and the code above correctly does as I wanted. See my answer below.
Ok, so I finally solved this after realizing a few things.
1 - You're kinda supposed to do all the work you can with the JSON data while in the callback function of $.getJSON().
2 - The area I was trying to put the link in had the id 'fancybox-title', so I just went ahead and said $('#fancybox-title').append(stuff);
3 - Fancybox's title (when shown on the inside at least) will only size itself for lines of text that are already there by the time the function formatting the title has finished. Anything appended to it after won't be accounted for in size and so the title area will remain the same and you'll see lines of text creep up into the picture (found this out the hard way). To get around this I made sure to add a 3rd line of text to my 'html' variable - <br />http:// This made Fancybox size its title area for 3 lines of text. Then in the callback function I used substr to take the bit.ly link starting from after http:// and to the end.

Create a 'send to Delicious' bookmarklet with custom tag

I've created a javascript bookmarklet that gets the current page's title and URL, using the following code:
//Check to see if jQuery is already loaded
if (typeof jQuery == 'undefined') {
var jQ = document.createElement('script');
jQ.type = 'text/javascript';
jQ.onload=runthis;
jQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
document.body.appendChild(jQ);
} else {
runthis();
}
// main Javascript function
function runthis() {
title = document.title;
url = document.URL;
tag = "customTag";
alert("Added to paperclip: Page Title: "+title+" | URL: "+url);
}
I now want to take that info and add it as a bookmark on my Delicious account. How do I go about this with Javascript/jQuery? I've taken a look at the API documentation but am having trouble getting my head around it (completely new to this, and OAuth makes my head spin), and can't find any full code examples to tinker with.
Would really appreciate any help/examples.
Edit:
You may want to look at this previous question. - "I want to create a Delicious bookmarklet in Firefox that bookmarks the current page with a predefined tag."
Well, an example that does exactly what you want by using a bookmarklet in your browser's toolbar is the delicious bookmarklet. It gather information from the page, displays the info in a popup, allowing you to edit it, and then stores it to your account:
http://delicious.com/help/bookmarklets
javascript:(function(){
f= 'http://delicious.com/save?url='
+ encodeURIComponent(window.location.href)
+ '&title='+encodeURIComponent(document.title)
+ '&v=5&';
a=function(){
if( !window.open(
f + 'noui=1&jump=doclose',
'deliciousuiv5',
'location=yes,
links=no,scrollbars=no,
toolbar=no,width=550,height=550'))location.href=f + 'jump=yes'
};
if(/Firefox/.test(navigator.userAgent)){
setTimeout(a,0)
} else {
a()
}
})()
If you use your Yahoo ID to log in, you do have to use OAuth, but if you don't, you can use the V1 api like this (from this page, worked for me in Chrome):
javascript:(
function()
{
location.href = 'https://user:pwd#api.del.icio.us/v1/posts/add?url='
+ encodeURIComponent(window.location.href)
+ '&description=' + encodeURIComponent(document.title)
+ '&tags=obvioustesttag';
}
)()
Make sure to search your tags for "obvioustesttag" since it doesn't show up in the chronological list immediately.
Try to create a regular login or new account if you currently use YahooID to sign in, otherwise, you'll have to deal with OAuth.

Categories