Welcome to Geeklog, Anonymous Monday, December 30 2024 @ 12:09 pm EST
Geeklog Forums
Post to Facebook
Page navigation
webbadass
Follow me? Anyone know?
Thanks
suprsidr
Place this in path to geeklog/system/lib-custom.php Requires Geeklog 1.8.x
function CUSTOM_getFooterCode(){
global $_CONF, $_SCRIPTS;
if(preg_match('/\/story.php\?mode=edit/i', $_SERVER['REQUEST_URI']) && isset($_CONF['facebook_consumer_key'])){
$_SCRIPTS->setJavaScriptLibrary('jquery');
return ' <div id="fb-root"></div>
<script type="text/javascript">
jQuery(document).ready(function(){
var theForm =
\'<fieldset>\'+
\'<legend>Publish directly to a Facebook wall</legend>\'+
\'<div style="padding:2px 0;"><label for="fb_to">Facebook page, id or username of target wall:</label><input type="text" name="fb_to" value="" /><span style="font-size: 62%;"> Optional</span></div>\'+
\'<div style="padding:2px 0;"><label for="fb_from">Facebook id or username of poster:</label><input type="text" name="fb_from" value=""/><span style="font-size: 62%;"> Optional</span></div>\'+
\'<div style="padding:2px 0;"><input type="button" value="Publish to Facebook" name="publish_to_facebook" /><span style="font-size: 62%;"> Will open separate window.</span></div>\'+
\'<span style="font-size: 62%; color: #ff0000;">You must be admin of target wall.</span>\'+
\'</fieldset>\';
jQuery(\'#se_publish>fieldset:last\').append(theForm);
jQuery(\'input[name="publish_to_facebook"]\').live(\'click\', function(e){
e.preventDefault();
publishToStream();
});
});
window.fbAsyncInit = function(){
FB.init({
appId: '.$_CONF['facebook_consumer_key'].',
status: true,
cookie: true,
xfbml: true,
oauth : true
});
FB.login(function(response) {}, {scope: \'publish_stream, offline_access, manage_pages\'});
};
(function(){
var e = document.createElement("script");
e.async = true;
e.src = document.location.protocol +
"//connect.facebook.net/en_US/all.js";
document.getElementById("fb-root").appendChild(e);
}());
function publishToStream(){
var args = {
to: (jQuery(\'input[name="fb_to"]\').val() != "")?jQuery(\'input[name="fb_to"]\').val():"me",
from: jQuery(\'input[name="fb_from"]\').val(),
name: jQuery(\'input[name="title"]\').val(),
link: "'.$_CONF['site_url'].'/article.php?story="+jQuery(\'input[name="sid"]\').val(),
caption: " ",
picture: "'.$_CONF['site_url'].'/images/speck.gif",
description: stripHtml(jQuery(\'#introtext\').text()),
actions: [{
name: "Read More...",
link: "'.$_CONF['site_url'].'/article.php?story="+jQuery(\'input[name="sid"]\').val()
}]
}
if(args.from !== ""){
FB.api("/me/accounts", function(response) {
for (var i=0, l=response.data.length; i<l; i++) {
if(response.data[i].id == args.from || response.data[i].name == args.from){
args.from = response.data[i].id;
args.access_token = response.data[i].access_token;
sendMsg(args);
break;
}
}
});
}else{
sendMsg(args);
}
}
function sendMsg(args){
FB.api("/"+args.to+"/feed", "post", args, function(response){
if (!response || response.error) {
alert(\'An error occurred\');
} else {
alert(\'Post ID: \' + response.id);
}
});
}
function stripHtml(html) {
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent||tmp.innerText;
}
</script>'."\n";
}else if(preg_match('/\/calendar\/index.php\?mode=edit/i', $_SERVER['REQUEST_URI']) && isset($_CONF['facebook_consumer_key'])){
$_SCRIPTS->setJavaScriptLibrary('jquery');
return ' <div id="fb-root"></div>
<script type="text/javascript">
jQuery(document).ready(function(){
var theForm =
\'<fieldset>\'+
\'<legend>Publish a new Facebook event</legend>\'+
\'<div style="padding:2px 0;"><label for="fb_to">Facebook page, id to publish event to:</label><input type="text" name="fb_to" value="" /><span style="font-size: 62%;"> Optional</span></div>\'+
\'<div style="padding:2px 0;"><label for="fb_from">Facebook id or username of poster:</label><input type="text" name="fb_from" value=""/><span style="font-size: 62%;"> Optional</span></div>\'+
\'<div style="padding:2px 0;"><input type="button" value="Publish to Facebook" name="publish_to_facebook" /><span style="font-size: 62%;"> Will open separate window.</span></div>\'+
\'<span style="font-size: 62%; color: #ff0000;">You must be admin of page or user.</span>\'+
\'</fieldset>\';
jQuery(\'form[name="events"]\').append(theForm);
jQuery(\'input[name="publish_to_facebook"]\').live(\'click\', function(e){
e.preventDefault();
createEvent();
});
});
window.fbAsyncInit = function(){
FB.init({
appId: '.$_CONF['facebook_consumer_key'].',
status: true,
cookie: true,
xfbml: true,
oauth : true
});
FB.login(function(response) {}, {scope: \'create_event, offline_access, manage_pages\'});
};
(function(){
var e = document.createElement("script");
e.async = true;
e.src = document.location.protocol +
"//connect.facebook.net/en_US/all.js";
document.getElementById("fb-root").appendChild(e);
}());
function createEvent(){
var to = (jQuery(\'input[name="fb_to"]\').val() != "")?jQuery(\'input[name="fb_to"]\').val():"me";
var args = {
owner: jQuery(\'input[name="fb_from"]\').val(),
name: jQuery(\'input[name="title"]\').val(),
start_time: jQuery(\'select[name="start_month"]\').val()+"/"+jQuery(\'select[name="start_day"]\').val()+"/"+jQuery(\'select[name="start_year"]\').val()+" "+jQuery(\'select[name="start_hour"]\').val()+"\:"+jQuery(\'select[name="start_minute"]\').val()+jQuery(\'select[name="start_ampm"]\').val(),
end_time: jQuery(\'select[name="end_month"]\').val()+"/"+jQuery(\'select[name="end_day"]\').val()+"/"+jQuery(\'select[name="end_year"]\').val()+" "+jQuery(\'select[name="end_hour"]\').val()+"\:"+jQuery(\'select[name="end_minute"]\').val()+jQuery(\'select[name="end_ampm"]\').val(),
location: stripHtml(jQuery(\'textarea[name="location"]\').text()),
description: stripHtml(jQuery(\'textarea[name="description"]\').text()+"\n '.$_CONF['site_url'].'/calendar/event.php?eid="+jQuery(\'input[name="eid"]\').val()),
venue: {street: jQuery(\'input[name="address1"]\').val()+" "+jQuery(\'input[name="address2"]\').val(),
city: jQuery(\'input[name="city"]\').val(),
state: jQuery(\'input[name="state"]\').val(),
zip: jQuery(\'input[name="zipcode"]\').val(),
country: "", latitude: "", longitude: ""}
};
if(isNumber(to))args.page_id = to;
FB.api("/"+to+"/events", "post", args, function(response){
if (!response || response.error) {
alert(\'An error occurred\');
} else {
alert(\'Event ID: \' + response.id);
}
});
}
function stripHtml(html) {
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent||tmp.innerText;
}
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>'."\n";
} else {
return '';
}
}
If you haven't already created an app for your site, head over to https://developers.facebook.com/apps and create a new app.
Setup should look like this:
http://www.flashyourweb.com/media/index.php?g2_itemId=45027
set your "App name" to yoursite.com
and
http://www.flashyourweb.com/media/index.php?g2_itemId=45024
set the "Site URL" to http://yoursite.com
and "Domain" to yoursite.com
Finally enter your Facebook "App ID" into geeklog configuration -> Users and Submissions -> Facebook OAuth Application ID
you can add your Application Secret there as well(although not needed).
Now a button should appear in the story editor under the "Publish Options" tab.
http://www.flashyourweb.com/media/index.php?g2_itemId=45029
Also in the Calendar events editor.
I plan on dropping this into a plugin here in the next few days if you can wait.
Let me know how it turns out.
-s
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
suprsidr
Currently that is the minimum code for this feature.
I believe a full plugin can add much value.
If we record the post id /event id we can display the FB comments, likes, links ....
Social features are up near the top when users pick their blog.
I'm taking feature requests.
-s
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
Laugh
One of the Geeklog Core Developers.
suprsidr
So here's what I'm thinking:
Instead of creating a table to store FB content ids, I'd insert a hidden DOM element to store the id and trigger the comment insertion upon display.
[code]<div data-role="comments" id="FB id" />[code]
I'd have to prompt the user to save/re-save the story upon receiving the FB id.
Brilliant right?
Anyone see any potential issues?
-s
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
webbadass
I have always hated facebook - I think their tutorial on how to create an app is for an older version or something - I have found the pages and the How To's but there is no info on WHAT to do to create an app or WHERE the damn thing will go when its made.
I believe I have to 'Register my app' before I can 'Create a canvas page'. BUT I dont see where I do that - 'Register my app' links all point back to https://developers.facebook.com/apps - I rummage around inside of any of these and find a reference to "Register my app" and it points right back to https://developers.facebook.com/apps - ANY IDEA WHERE I ACTUALLY REGISTER THE BUGGER?
As always you have my many thanks for the help...
suprsidr
In one of my posts above I link to photos of detailed app creation.
-s
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
webbadass
So i did and think i made it through properly. The screens on facebook dont match your screen caps and i dont mean just the font sizes. There are additional options and forms and fields. So now i am at the point where i enter my userID under the 'Facebook OAuth Application ID' in geeklog and the button does indeed show up. Upon creating a story and hitting the button i get a generic error.
http://webbadass.com/article.php?story=geeklogerror
I went through and checked all the info and it seems correct and i feel i am close. I can smell it. But what am i missing now?
suprsidr
If you go back through and edit your app, the screens will look the same.
I'm sure they have not changed since last week.
Was there a FB popup asking for permission when you entered the story editor?
-s
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
webbadass
If you go back through and edit your app, the screens will look the same.
I'm sure they have not changed since last week.
Here is the edit screen i get, did i set it up using the wrong steps in the first place?
http://webbadass.com/article.php?story=fbconfig
Was there a FB popup asking for permission when you entered the story editor?
There was no popup at any time... Am i supposed to enter it in the fields below the facebook button? i tried this but it didnt work.
suprsidr
After you give the app permission the first time, the popup will not wait for user interaction anymore and disappear.
Chrome is probably blocking the popup. Allow popups for your site.
-s
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
webbadass
Your app needs to get permission to to post to your wall. This will happen in a popup every time you load the story editor.
After you give the app permission the first time, the popup will not wait for user interaction anymore and disappear.
Chrome is probably blocking the popup. Allow popups for your site.
-s
Son of a gun. It works. Thanks again. Chrome is launching the popup window, but it is only staying open for a second. Although in Firefox and Safari on the mac it works fine. Tomorrow I will test it in IE, Firefox and Safari on the PC. Once I get that done would you want me to do a screen grab tutorial that is screen by screen and step by step? Or should I wait till you get the plug-in completed?
suprsidr
Once you give it permission that is the behavior.
I'll do a video tut once I get the plugin finished.
It's already done w/ that functionality, but working on the comments feature atm.
-s
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
Once you give it permission that is the behavior.
I'll do a video tut once I get the plugin finished.
It's already done w/ that functionality, but working on the comments feature atm.
-s
Awesome - I really appreciate all the hard work and help. Mind if I keep peppering away with questions in this thread? Hope not cause I have a few more...
First - is it supposed to post more than the title to facebook? Like the intro text? I was kinda hoping it would with a link back to the geeklog site for the body. Both my customers want this functionality as they block facebook access to prevent their employees logging in through their network. Here is an image of what i get right now. Did miss something?
While I am on it, out of curiosity - could it have the ability to post images in a story to the facebook page as well?
suprsidr
The app sends the title, intro text, and read more link.
I just posted a wall post and event from my test site to my flashyourweb page wall.
I can attach a picture as well, but they stick it between your profile pic and the text, squeezing the text into a small column.
If I don't attach an image they fill the space w/ a 50x50px blank gif. which also squeezes the text over into the small column.
So I attach geeklog's default 1x1px speck.gif to avoid the squeeze.
-s
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
webbadass
FB does not accept any html at all, so I strip it out.
The app sends the title, intro text, and read more link.
I just posted a wall post and event from my test site to my flashyourweb page wall.
I can attach a picture as well, but they stick it between your profile pic and the text, squeezing the text into a small column.
If I don't attach an image they fill the space w/ a 50x50px blank gif. which also squeezes the text over into the small column.
So I attach geeklog's default 1x1px speck.gif to avoid the squeeze.
-s
Hmm - my config does not post the intro text to facebook. What am i missing? Was there something i was supposed to specify in the facebook app that is not letting the intro text through?
suprsidr
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
Page navigation
- Normal Topic
- Sticky Topic
- Locked Topic
- New Post
- Sticky Topic W/ New Post
- Locked Topic W/ New Post
- View Anonymous Posts
- Able to post
- Filtered HTML Allowed
- Censored Content