Welcome to Geeklog, Anonymous Thursday, March 28 2024 @ 05:35 pm EDT

Geeklog Forums

Post to Facebook

Page navigation


Status: offline

webbadass

Forum User
Chatty
Registered: 05/20/03
Posts: 49
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
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
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
Text 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
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

::Ben

Forum User
Full Member
Registered: 01/14/05
Posts: 1569
Location:la rochelle, France
:shakehands: Nice piece of code.

Thanks,

Ben
I'm available to customise your themes or plugins for your Geeklog CMS
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
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
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

Laugh

Site Admin
Admin
Registered: 09/27/05
Posts: 1468
Location:Canada
Displaying Facebook comments would be near the top of my list.
One of the Geeklog Core Developers.
 Quote

Status: offline

Laugh

Site Admin
Admin
Registered: 09/27/05
Posts: 1468
Location:Canada
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.
One of the Geeklog Core Developers.
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
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
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

webbadass

Forum User
Chatty
Registered: 05/20/03
Posts: 49
: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...
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
https://developers.facebook.com/apps

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
 Quote

Status: offline

webbadass

Forum User
Chatty
Registered: 05/20/03
Posts: 49
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?
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
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
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

webbadass

Forum User
Chatty
Registered: 05/20/03
Posts: 49
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.

 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
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
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

webbadass

Forum User
Chatty
Registered: 05/20/03
Posts: 49
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?
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
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
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

webbadass

Forum User
Chatty
Registered: 05/20/03
Posts: 49
caffeinated
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?
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
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
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

webbadass

Forum User
Chatty
Registered: 05/20/03
Posts: 49
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?

 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
What's your posting mode? plain text, html or advanced editor?
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

webbadass

Forum User
Chatty
Registered: 05/20/03
Posts: 49
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?
 Quote

Page navigation

All times are EDT. The time is now 05:35 pm.

  • 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