Subject: Post to Facebook

Posted on: 20/08/11 05:58pm
By: webbadass

I have a client request that i am trying to resolve. An associate of mine has a Wordpress page that will post his Wordpress blog posts directly to his facebook page at the same time. I have not yet installed or used the OAuth in 1.8 so I am gonna ask outright if it is possible to have story posts ALSO post to facebook with any current plugin or addon.

Follow me? Anyone know?

Thanks

Re: Post to Facebook

Posted on: 20/08/11 10:20pm
By: suprsidr

I just happen to have spent the last few days doing just that.

Place this in path to geeklog/system/lib-custom.php Requires Geeklog 1.8.x
PHP Formatted Code

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

Re: Post to Facebook

Posted on: 21/08/11 03:44am
By: ::Ben

:shakehands: Nice piece of code.

Thanks,

Ben

Re: Post to Facebook

Posted on: 21/08/11 04:07am
By: suprsidr

Thanks Ben.
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

Re: Post to Facebook

Posted on: 21/08/11 08:43am
By: Laugh

Displaying Facebook comments would be near the top of my list.

Re: Post to Facebook

Posted on: 21/08/11 08:56am
By: Laugh

Not that it will help at the moment but I have been meaning to add some plugin api that will allow plugins to easily add in extra fields to a story edit forum that would be saved (if so desired) when the story was saved and can then be displayed when a story is displayed. I was originally thinking of this for plugins like the tag plugin where currently you have to type in an autotag to display any tags for a story but this would also work nicely for a Facebook type plugin.

Re: Post to Facebook

Posted on: 21/08/11 12:31pm
By: suprsidr

I've been contemplating a way to include FB comments in stories based on whether you published a particular story to your wall.
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

Re: Post to Facebook

Posted on: 21/08/11 06:45pm
By: webbadass

:helpme:

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...

Re: Post to Facebook

Posted on: 21/08/11 07:08pm
By: suprsidr

https://developers.facebook.com/apps

In one of my posts above I link to photos of detailed app creation.

-s

Re: Post to Facebook

Posted on: 21/08/11 07:56pm
By: webbadass

Sorry. Back on track. I didnt realize that your flashyourweb.com references were links. AND there is a tiny little button on the 'Welcome to the Developer App' page that says "Create new app"...

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?

Re: Post to Facebook

Posted on: 21/08/11 08:05pm
By: suprsidr

The screens on facebook dont match your screen caps and i dont mean just the font sizes.

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.

Upon creating a story and hitting the button i get a generic error

Was there a FB popup asking for permission when you entered the story editor?

-s

Re: Post to Facebook

Posted on: 21/08/11 09:51pm
By: webbadass

Quote by: suprsidr

The screens on facebook dont match your screen caps and i dont mean just the font sizes.

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

Upon creating a story and hitting the button i get a generic error

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.


Re: Post to Facebook

Posted on: 21/08/11 10:04pm
By: suprsidr

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

Re: Post to Facebook

Posted on: 21/08/11 10:49pm
By: webbadass

Quote by: suprsidr

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?

Re: Post to Facebook

Posted on: 21/08/11 10:53pm
By: suprsidr

Chrome is launching the popup window, but it is only staying open for a second.

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

Re: Post to Facebook

Posted on: 22/08/11 04:17pm
By: webbadass

Quote by: suprsidr

Chrome is launching the popup window, but it is only staying open for a second.

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?

Re: Post to Facebook

Posted on: 22/08/11 06:14pm
By: suprsidr

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

Re: Post to Facebook

Posted on: 30/08/11 02:49pm
By: webbadass

Quote by: suprsidr

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?


Re: Post to Facebook

Posted on: 30/08/11 04:32pm
By: suprsidr

What's your posting mode? plain text, html or advanced editor?

Re: Post to Facebook

Posted on: 31/08/11 12:18am
By: webbadass

Quote by: suprsidr

What's your posting mode? plain text, html or advanced editor?



Just plain text. Didnt say somewhere that it would not work in anything but plain old text?

Re: Post to Facebook

Posted on: 31/08/11 06:50am
By: suprsidr

I don't think I've ever once used plain text mode.
Try the other modes, I think the text area naming conventions differ between the modes.

It's be hard to pull the text from #introtext if it does not exist.

-s

Re: Post to Facebook

Posted on: 03/09/11 03:30pm
By: webbadass

I tried posting an image to facebook in all 3 modes and it would not go. I was using the IMAGES function under the 'Images' tab. and i got this error in text mode - the others gave me no error and no image on facebook either. The main question this error raises is that it is trying to find an image named "Facebook4_1.jpg" - I had no images named "Facebook4" - Facebook4 is the story name, not the image name - does the facebook post function use the name of the image itself?


Re: Post to Facebook

Posted on: 03/09/11 03:36pm
By: suprsidr

I've already stated the reasons why images are not sent to facebook.
AND what do you think facebook would do with [image1_left] anyways?

-s

Re: Post to Facebook

Posted on: 04/09/11 07:31pm
By: webbadass

Quote by: suprsidr

I've already stated the reasons why images are not sent to facebook.
AND what do you think facebook would do with [image1_left] anyways?

-s



Super - You did not state the reasons why images are not sent to facebook - not in this thread anyways. I do appreciate the help but dont tell me to reread something that was not helpful in solving my ongoing problem. Please, if you are going to take the time to post an answer, take the time to explain it a little differently - more clearly. What is in this thread has not worked. The bottom line is I have no idea how you got your image to post.

I have tried to use the filemanager and the [imagex] methods with all post modes and it doesnt work. It renamed that one image but still would NOT post it. Am i supposed to use a path, use filename that is the same as my article title, what? I have no idea.'

Re: Post to Facebook

Posted on: 04/09/11 10:23pm
By: suprsidr

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.



I have tried to use the filemanager and the [imagex] methods with all post modes and it doesnt work.

I'm simply not attaching images for the reasons quoted above. Still.

Re: Post to Facebook

Posted on: 04/09/11 11:30pm
By: webbadass

Quote by: suprsidr

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.



I have tried to use the filemanager and the [imagex] methods with all post modes and it doesnt work.

I'm simply not attaching images for the reasons quoted above. Still.



Maybe we are both miscommunicating... DID you or did you NOT attach a photo to a geeklog post that you were able to post to Facebook as well... From the post below i understood that you posted an image to Facebook via Geeklog. You did right? Am I wrong? What facebook does with it is not important - they have their own rules - can an image be posted to facebook via your geeklog plug in. Yes or no. And if yes - HOW?

http://www.facebook.com/pages/Flashyourweb/264427206902692?sk=wall

Re: Post to Facebook

Posted on: 05/09/11 12:09am
By: suprsidr

DID you or did you NOT attach a photo to a geeklog post that you were able to post to Facebook

So I attach geeklog's default 1x1px speck.gif to avoid the squeeze.

What facebook does with it is not important

To me it is.
can an image be posted to facebook via your geeklog plug in

if motivated, I could add the functionality.

-s

Re: Post to Facebook

Posted on: 08/09/11 11:01pm
By: webbadass

Quote by: suprsidr

DID you or did you NOT attach a photo to a geeklog post that you were able to post to Facebook

So I attach geeklog's default 1x1px speck.gif to avoid the squeeze.

What facebook does with it is not important

To me it is.
can an image be posted to facebook via your geeklog plug in

if motivated, I could add the functionality.

-s



From our previous exchanges I got the impression that you were able to post an image to facebook via your geeklog function.

Yes or no?

And if no I would really appreciate it if you did add it to the plug-in.

Re: Post to Facebook

Posted on: 16/11/11 11:17am
By: gtgillis

Quote by: Laugh

Displaying Facebook comments would be near the top of my list.



See http://www.geeklog.net/forum/viewtopic.php?showtopic=93600

Sv: Post to Facebook

Posted on: 01/01/14 11:04pm
By: casper

Did this ever end up as a plugin?

Re: Post to Facebook

Posted on: 02/01/14 07:53am
By: gtgillis

Quote by: casper

Did this ever end up as a plugin?



Yes. I am running it on http://www.rudebastard.com but I want to wait to release the new version until GL2.1.0 is released.

Sv: Post to Facebook

Posted on: 02/01/14 11:12am
By: casper

Thanks for your reply Smile

I still run 1.8.2, but will upgrade but not sure if I have time before 2.1 is released.
Gues your current version cannot be run on 1.8.2?

Re: Post to Facebook

Posted on: 19/05/15 12:01pm
By: masodo

Thank you for the code suprsidr!!
I have been using this code reliably for a couple of years now [GL 1.8.1] and in the last month or so I started getting the following error messages whenever I would open submit.php:

In the Facebook Pop-up...

Invalid Scopes: publish_stream, offline_access. This message is only shown to developers. Users of your app will ignore these permissions if present. Please read the documentation for valid permissions at: https://developers.facebook.com/docs/facebook-login/permissions


Followed by...


Given URL is not allowed by the Application configuration: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.


I could still post the story as usual but wanted to get rid of the annoying error messages (plus who knows if this problem would cause it to stop working in the future.)

The fix was pretty simple:

On Line #39 of the code presented by suprsidr in this topic is the following:

FB.login(function(response) {}, {scope: \'publish_stream, offline_access, manage_pages\'});

I had to change it to:

FB.login(function(response) {}, {scope: \'publish_actions, manage_pages\'});

And that seems to have taken care of it.

Geeklog - Forum
https://www.geeklog.net/forum/viewtopic.php?showtopic=93181