Displaying facebook feed using FB.api - facebook

I want a to display my facebook feed in my site that show only specific #hashtag, for example "#StarComm". This is my code.
var page_id = 'MY APP ID';
var pageaccessToken='MY Token';
FB.api('/' + page_id + '/feed?q=%23StarComm&access_token='+ pageaccessToken, {limit:5} , function(response){
if (response && response.data && response.data.length){
var ul = document.getElementById('pagefeed');
for (var j=0; j<response.data.length; j++){
var feed = response.data[j],
li = document.createElement('li'),
a = document.createElement('a');
a.innerHTML = feed.message;
a.href = feed.link;
li.appendChild(a);
ul.appendChild(li);
}
}
});
My out put is like this.
Follow us on twitter at https://twitter.com/StarcommOnline #StarComm
And i want my output is like the standard fb:like-box. Thanks in Advance!

Related

Titanium: Facebook API: Photo not showing

Starting to pull by hair here, running out of things to try.
I'm taking a photo, and it's not showing. If i use a URL, then it works.
I'm using the API example, so not sure what i'm doing wrong?
The only thing i see on the Facebook page is the message, not the photo.
photoButton.addEventListener('click',function(e){
var image = e.media;
var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,'camera_photo.png');
f.write(image);
var blob = f.read();
Titanium.Media.showCamera({
success:function(event) {
Ti.API.debug('Our type was: '+event.mediaType);
if(event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {
// send XHR req to post image on Facebook
fb.permissions = ['publish_actions', 'status_update', 'publish_stream', 'read_stream','manage_pages']; // Permissions your app needs
fb.authorize();
var data = {
name : "This is my name",
message : 'This is my message',
caption : "This is the caption",
picture : blob
};
fb.requestWithGraphPath('1234567890/feed', data, 'POST', function(e) {
if (e.success) {
alert(e.result);
} else if (e.error) {
alert(e.error);
} else {
alert('Unknown response');
}
});
} else {
alert("got the wrong type back ="+event.mediaType);
}
},
cancel:function() {
// called when user cancels taking a picture
},
error:function(error) {
// called when there's an error
var a = Titanium.UI.createAlertDialog({title:'Camera'});
if (error.code == Titanium.Media.NO_CAMERA) {
a.setMessage('Овој уред нема камера');
} else {
a.setMessage('Unexpected error: ' + error.code);
}
a.show();
},
saveToPhotoGallery:true,
// allowEditing and mediaTypes are iOS-only settings
allowEditing:true,
mediaTypes:[Ti.Media.MEDIA_TYPE_VIDEO,Ti.Media.MEDIA_TYPE_PHOTO]
});
Ok, this post hold the key: Appcelerator Titanium: Facebook Image Upload fail
The issue is for some reason feeds dont work with the FB module, so you have to use an XHR request:
var endPoint = 'https://graph.facebook.com/v2.1/' + pid + '/photos?access_token='+ acc;
xhr.open('POST',endPoint);
xhr.send({
message: data,
picture: image
});

Display Facebook Album Cover Image

I'm trying to show the cover photos of a Facebook user's albums, but I am not having any luck.
What I have so far is this:
FB.api('/me/albums', function(response) {
for(var i = 0; i < response.data.length; i++)
{
if(response.data[i].cover_photo != undefined)
{
var alb = $('<div class="album" id="album-' + response.data[i].cover_photo + '"></div>').appendTo(view_scroll);
alb.css('background', 'url(https://graph.facebook.com/' + response.data[i].cover_photo + '/picture)');
}
}
});
All I am getting is a question mark image. Any suggestions on how get the actual cover image into the background of the div?
Found it... Needed to add the access token to the end of the url:
background-image: url(https://graph.facebook.com/' + response.data[i].cover_photo + '/picture?access_token=' + [ACCESSTOKEN]
Hi i had the same problem, and i already got the cover_photo from every album of the user. Im using javascript sdk. After checking the login status, just call the function albumes():
function albumes() {
FB.api('/me/albums?fields=name,link,cover_photo,id',
function(response) {
for(var c = 0 ; c < response.data.length ; c++) {
coverPhoto(response.data[c].cover_photo, response.data[c].name);
}
}
);
}
function coverPhoto(id, nombre){
FB.api('/'+id+'?fields=picture',
function(responseIn) {
$('#javascriptData').append(
"<br>"+ nombre +"<img src='"+ responseIn['picture'] +"'>");
}
);
}

Titanium: can't switch tabs, close tabs, anything other than my current tab

Everything I try just does nothing, no errors, message, really anything. So I have three tabs, the first being a login tab, each tab has its own .js code, so for example, the login has its own login.js. Now, I use the httpClient to authenticate back to our website, and now want to remove the login tab and display the other tabs, cannot get it to work for the life of me, I can now remove the login tab but cannot load ay of the other tabs. Driving me nuts because I am finding 20 examples but they either don't separate the tabs into their own .js files or the example just plain doesn't work for me. Help! This seems so basic but yet...
app.js
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
// create base UI tab and root window
//
var scan = Titanium.UI.createWindow({
title:'Scan',
backgroundColor:'#fff',
url:'scan.js',
mylabel:'Hello Scan'
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Scan',
window:scan
});
var login = Titanium.UI.createWindow({
title:'User Authentication',
tabBarHidden:true,
url:'login.js'
});
var loginTab = Titanium.UI.createTab({
title:"Login",
window:login
});
//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({
title:'Manual',
backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({
icon:'KS_nav_ui.png',
title:'Manual',
window:win2
});
var label2 = Titanium.UI.createLabel({
color:'#999',
text:'I am Manual Window ',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
win2.add(label2);
//
// add tabs
//
tabGroup.addTab(loginTab);
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
// open tab group
tabGroup.open();
login.js
var win = Titanium.UI.currentWindow;
var tabGroup = Ti.UI.currentWindow.tabGroup;
var appUrl = "http://localhost:3001/ticket_agents/sign_in";
var email = Titanium.UI.createTextField({
color:'#336699',
top:10,
left:10,
width:300,
height:40,
hintText:'Email',
keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(email);
var password = Titanium.UI.createTextField({
color:'#336699',
top:60,
left:10,
width:300,
height:40,
hintText:'Password',
passwordMask:true,
keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(password);
var loginBtn = Titanium.UI.createButton({
title:'Login',
top:110,
width:90,
height:35,
borderRadius:1,
font:{fontFamily:'Arial',fontWeight:'bold',fontSize:14}
});
var loginReq = Titanium.Network.createHTTPClient({
onload : function(e) {
var json = this.responseText;
var response = JSON.parse(json);
Ti.API.info("Received text: " + this.responseText);
if (response.id > 0)
{
alert("login Success");
win.tabGroup.close();
tabGroup.removeTab(loginTab);
tabGroup.setActiveTab(2);
tabGroup.open();
}
else
{
alert("Unknown login error");
}
},
onerror : function(e) {
var response = this.responseText;
Ti.API.debug(e.error);
alert('error: ' + this.responseText);
},
timeout : 5000
});
loginBtn.addEventListener('click',function(e)
{
if (email.value != '' && password.value != '')
{
loginReq.open("POST",appUrl);
var params = {ticket_agent: {email: email.value, password: password.value, remember_me: 0}
};
var authstr = 'Basic ' + Titanium.Utils.base64encode(email.value + ':' + password.value);
loginReq.setRequestHeader("Content-Type", "application/json; charset=utf-8");
loginReq.setRequestHeader('Authorization', authstr);
loginReq.send(JSON.stringify(params));
}
else
{
alert("Email/Password are required");
}
});
win.add(loginBtn);
I think that's all you'd need to see, the login.js has my latest attempt but I've tried things like tabGroup.open({url : 'app.js'}) and about three our four other option. Thanks.
You may want to add this eventListener to your app.js where the tabGroup is.
You can then fire a "app:gotoTab" event from anywhere.
app.js
Ti.App.addEventListener('app:gotoTab', function(e) {
tabGroup.setActiveTab(e.tab);
});
login.js
// tab index starts with 0, so 0 is your first tab
Ti.App.fireEvent('app:gotoTab', { tab: 0 });
Simply Copy paste this code
Login.js
var win = Titanium.UI.currentWindow;
var appUrl = "http://localhost:3001/ticket_agents/sign_in";
var email = Titanium.UI.createTextField({
color:'#336699',
top:10,
left:10,
width:300,
height:40,
hintText:'Email',
keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(email);
var password = Titanium.UI.createTextField({
color:'#336699',
top:60,
left:10,
width:300,
height:40,
hintText:'Password',
passwordMask:true,
keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(password);
var loginBtn = Titanium.UI.createButton({
title:'Login',
top:110,
width:90,
height:35,
borderRadius:1,
font:{fontFamily:'Arial',fontWeight:'bold',fontSize:14}
});
var loginReq = Titanium.Network.createHTTPClient({
onload : function(e) {
var json = this.responseText;
var response = JSON.parse(json);
Ti.API.info("Received text: " + this.responseText);
if (response.id > 0)
{
alert("login Success");
tabGroup.setActiveTab(2);
}
else
{
alert("Unknown login error");
}
},
onerror : function(e) {
var response = this.responseText;
Ti.API.debug(e.error);
alert('error: ' + this.responseText);
},
timeout : 5000
});
loginBtn.addEventListener('click',function(e)
{
if (email.value != '' && password.value != '')
{
loginReq.open("POST",appUrl);
var params = {ticket_agent: {email: email.value, password: password.value, remember_me: 0}
};
var authstr = 'Basic ' + Titanium.Utils.base64encode(email.value + ':' + password.value);
loginReq.setRequestHeader("Content-Type", "application/json; charset=utf-8");
loginReq.setRequestHeader('Authorization', authstr);
loginReq.send(JSON.stringify(params));
}
else
{
alert("Email/Password are required");
}
});
win.add(loginBtn);
Hey Ross, You always remember window.close work on child Window perfectly.
In this application. You can use single Window base Application.
If, In First Window Login Successfully then, you can OPEN Second child Window.
for more details you can use KICHEN Shink Example. this is very useful for You.
You may want to redesign your UI. The Apple Human Interface Guidelines specifically say that you shouldn't programmatically switch tabs or add/remove tabs. They expect that a tabgroup should only be controlled by the user once you put it in front of them.
If the user needs to log in before they can use other features of your app you can present the a login window before the window with the tab group. Otherwise, you should replace the content of the login tab with something else after a successful login, perhaps with user profile information or some instructions.

Json parse from Facebook events

I have had some trouble with fetching json from a groups events on facebook and then put them in a tableview to be used in a Appcelerator mobile app.
The idea is to have this as a calendar to show events for a club in a simple way.
I want to show the name of the event. The picture for that event and the date for the event.
All in a tablerow.
I have gotten to the part where i can get the Name and date for the events with this code:
Ti.UI.backgroundColor = '#dddddd';
var access_token='AAACEdEose0cBAAICGa4tFTcZAqCOGm2w9qPYGZBwNtJ1oZAcwaMAP2DDHZCN58cvVBZCHZADZAZBTPC8tTnpfQ7uGKI5j3SbMYcRmWquZCdPzhwZDZD';
var url = "https://graph.facebook.com/64306617564/events?&access_token=" + access_token ;
var win = Ti.UI.createWindow();
var table = Ti.UI.createTableView();
var tableData = [];
var json, data, row, name, start_time, id;
var xhr = Ti.Network.createHTTPClient({
onload: function() {
// Ti.API.debug(this.responseText);
json = JSON.parse(this.responseText);
for (i = 0; i < json.data.length; i++) {
data = json.data[i];
row = Ti.UI.createTableViewRow({
height:'60dp'
});
var name = Ti.UI.createLabel({
text:data.name,
font:{
fontSize:'18dp',
fontWeight:'bold'
},
height:'auto',
left:'50dp',
top:'5dp',
color:'#000',
touchEnabled:true
});
var start_time = Ti.UI.createLabel({
text:'"' + data.start_time + '"',
font:{
fontSize:'13dp'
},
height:'auto',
left:'15dp',
bottom:'5dp',
color:'#000',
touchEnabled:true
});
row.add(name);
row.add(start_time);
tableData.push(row);
}
table.setData(tableData);
},
onerror: function(e) {
Ti.API.debug("STATUS: " + this.status);
Ti.API.debug("TEXT: " + this.responseText);
Ti.API.debug("ERROR: " + e.error);
alert('There was an error retrieving the remote data. Try again.');
},
timeout:5000
});
xhr.open("GET", url);
xhr.send();
But when i want the specific event to open in a new window when clicked i just get the event that lies last on the screen when i put this in a browser:
https://graph.facebook.com/64306617564/events?&access_token=AAACEdEose0cBAOLAFWMKPmvgqEwap1ldnl7DeZBDKJC6YTZC4Goh6K5NHsvpOFmFQaGp1IekVsCxZCZCz3lwGpRcQG9ZBkcMrZAnLk4As8kgZDZD
And the access token expires REALLY fast. Any ideas how to make an access token that lasts longer?
Well, the code i am using to open the window is:
table.addEventListener('click',function(e) {
// Create the new window with the link from the post
var blogWindow = Ti.UI.createWindow({
title : data.name,
modal : true,
barColor: '#050505',
backgroundColor: '#050505'
});
var webView = Ti.UI.createWebView({url:'http://www.facebook.com/events/' + data.id});
blogWindow.add(webView);
// Create the close button to go in the left area of the navbar popup
var close = Titanium.UI.createButton({
title: 'Close',
style: Titanium.UI.iPhone.SystemButtonStyle.PLAIN
});
blogWindow.setLeftNavButton(close);
// Handle the close event
close.addEventListener('click',function() {
blogWindow.close();
});
blogWindow.open();
});
win.add(table);
win.open();
in my opinion that should open the event that is clicked on by parsing the ID from the row and putting it after the link.
Am i retarded or what is wrong?
It doesnt matter on which event i click it just open the last one all of the times.
And how can i get a thumbnail for the events?
Pls help........
When you click on table to get value from data which is not available.You can achieve it using you custom variable try to put this line of code at your row creation where you add your row in array i.e.row.data = data; and on table click event get that object using this alert(e.source.data); and check it. Best luck

Feed Dialog posts not showing on the news feed

I'm using Feed Dialog to create a post from my website's micro app onto a user's facebook wall/feed. However, whenever I make the post from my website, the post shows up on my wall, but never in the news feed. I have checked & confirmed with friends, and my own account. The posts, while visible on my wall, do not appear in the news feed at all. None of these friends are blocked or have blocked my posts, which I have confirmed by going over there settings with them in person, some of these friends are in fact family which have full access to all my profile elements. For whatever reason the posts aren't showing up. I scoured google and found only two questions that matched mine exactly with no answers. The comments I know are off, they are just for me and I understand them, my site's urls and app codes are removed.
The posts work, except they never appear on the feed. Can anyone explain this, what am I doing wrong?
THANKS :D
Here is the code for the postToFeed function
<div id='fb-root'></div>
<script src='http://connect.facebook.net/en_US /all.js'></script>
<!--<p><a onclick='postToFeed(); return false;'>Post to Feed</a></p>-->
<p id='msg'></p>
<!-- REQUIRED -->
<script>FB.init({appId: "SECRET", status: true, cookie: true, xfbml: true});
//This is the functional trigger for Feed Dialogue using FB.ui
function postToFeed() {
// vars pull the data from the form based on the id's of each input element
var linkStr = document.getElementById('link').value;
var nameStr = document.getElementById('mname').value;
var descStr1 = document.getElementById('hr').value;
var descStr2 = document.getElementById('life').value;
var descStr3 = document.getElementById('party').value;
var descStr4 = document.getElementById('weap').value;
var descStr5 = document.getElementById('click').value;
var descStr6 = document.getElementById('ttier').value;
var descStr7 = document.getElementById('mn').value;
// Determine if the monster is critical based on the hours variable
if (descStr1 < "25") {
var critStr = "CRITICAL"
var pic = "(my site URL"
}
else {
var critStr = ""
var pic = "(mysite URL)"
}
// Build the post using variable data pulled from form
var obj = {
method: 'feed',
link: linkStr,
picture: pic,
name: nameStr + ' ' + critStr,
description: 'Time Left:' + descStr1 + ':' + descStr7 + 'Hrs | Top Tier Full?: ' + descStr6 + ' | Life Left:' + descStr2 + '% | Party/Defence:' + descStr3 + '% | # of Weapons Launched: ' + descStr4 + ' | Clicks for next: ' + descStr5
};
// Check if posted
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>