Takanudo

(…because why not)

JSL3 Facebook Wall Feed

Facebook has made a change to their Graph API that breaks this plugin. I do not have time to keep up with the changes Facebook is making. Please look for an alternative plugin.

Displays your Facebook wall as a widget or through shortcode on a post or page.

Menu

Description

Displays your Facebook wall as a widget or through shortcode on a post or page. Makes use of Fedil Grogan’s Facebook Wall Feed for WordPress code and changes suggested by Daniel Westergren and Neil Pie. German translation provided by Remo Fleckinger. Facebook Graph API v2.0 bug fix provided by Andrew Bloom.
Back to the top

Installation

  1. Download the JSL3 Facebook Wall Feed v1.7.4 widget plugin.
  2. Extract the zip file to the ‘/wp-content/plugins/’ directory.
  3. Activate the plugin through the ‘Plugins’ menu in WordPress.

    Activate the plugin through the 'Plugins' menu in WordPress.

    Activate the plugin through the ‘Plugins’ menu in WordPress.

Back to the top

Configuration

  1. Create your Facebook App. NOTE: You cannot use a Facebook Page to create a Facebook App. You must use your personal Facebook profile. However, once you create your Facebook App, you can use its App ID and App Secret along with the Facebook ID of the Facebook Page you want to get the feed from on the settings page for the plugin.
    1. If this is your first time creating a Facebook App, you will need to register. Otherwise, skip to step e.

      If this is your first time creating a Facebook App, you will need to register.

      If this is your first time creating a Facebook App, you will need to register.

    2. Toggle the button to Yes to agree to the Facebook Policies and then click Next.

      Toggle the button to 'Yes' to agree to the Facebook Policies and then click 'Next.'

      Toggle the button to ‘Yes’ to agree to the Facebook Policies and then click ‘Next.’

    3. After you enter the confirmation code that Facebook sent to your phone, click Register.

      After you enter the confirmation code that Facebook sent to your phone, click 'Register.'

      After you enter the confirmation code that Facebook sent to your phone, click ‘Register.’

    4. Click Done to complete the registration.

      Click 'Done' to complete the registration.

      Click ‘Done’ to complete the registration.

    5. When you Add a New App, select the Website option.

      When you 'Add a New App', select the 'Website' option.

      When you ‘Add a New App’, select the ‘Website’ option.

    6. Click Create New Facebook App ID.

      Click 'Create New Facebook App ID.'

      Click ‘Create New Facebook App ID.’

    7. Select a category that best fits your WordPress site and then click Create App ID.

      Select a category that best fits your WordPress site and then click 'Create App ID.'

      Select a category that best fits your WordPress site and then click ‘Create App ID.’

    8. Enter your Site URL and Mobile Site URL in the Tell us about your website section at the bottom of the page. Do not enter www. Then click Next.

      Enter your 'Site URL' and 'Mobile Site URL' in the 'Tell us about your website' section at the bottom of the page.

      Enter your ‘Site URL’ and ‘Mobile Site URL’ in the ‘Tell us about your website’ section at the bottom of the page.

    9. Click the Skip to Developer Dashboard link in the Next Steps section at the bottom of the page.

      Click the 'Skip to Developer Dashboard' link in the 'Next Steps' section at the bottom of the page.

      Click the ‘Skip to Developer Dashboard’ link in the ‘Next Steps’ section at the bottom of the page.

    10. Select the Settings menu option. Enter your App Domain and Contact Email. Then click Save Changes.

      Select the 'Settings' menu option. Enter your 'App Domain' and 'Contact Email.'

      Select the ‘Settings’ menu option. Enter your ‘App Domain’ and ‘Contact Email.’

    11. Click the Show button to reveal your App Secret.

      Click the 'Show' button to reveal your 'App Secret.'

      Click the ‘Show’ button to reveal your ‘App Secret.’

    12. Make note of your App ID and App Secret. You will need them in step 2.

      Make note of your 'App ID' and 'App Secret.'

      Make note of your ‘App ID’ and ‘App Secret.’

    13. Select the Status & Review menu option. Change the toggle button to Yes to make you Facebook App available to the public.

      Select the 'Status & Review' menu option. Change the toggle button to 'Yes' to make you Facebook App available to the public.

      Select the ‘Status & Review’ menu option. Change the toggle button to ‘Yes’ to make you Facebook App available to the public.

    14. Click Confirm to complete the creation of your Facebook App.

      Click 'Confirm' to complete the creation of your Facebook App.

      Click ‘Confirm’ to complete the creation of your Facebook App.

  2. Go to JSL3 Facebook Wall Feed under Settings on your WordPress Administration menu. Enter the App ID and App Secret you recorded earlier. Also, enter your Facebook ID. If you do not know your Facebook ID, you can find it at http://findmyfacebookid.com.

    Go to 'JSL3 Facebook Wall Feed' under 'Settings' on your WordPress Administration menu. Enter the 'App ID' and 'App Secret' you recorded earlier. Also, enter your 'Facebook ID.'

    Go to ‘JSL3 Facebook Wall Feed’ under ‘Settings’ on your WordPress Administration menu. Enter the ‘App ID’ and ‘App Secret’ you recorded earlier. Also, enter your ‘Facebook ID.’

  3. Click the Save Changes button at the bottom of the page. You will be redirected to Facebook. You may be prompted to login a couple of times.

    Click the 'Save Changes' button at the bottom of the page. You will be redirected to Facebook.

    Click the ‘Save Changes’ button at the bottom of the page. You will be redirected to Facebook.

  4. Click Okay to give your Facebook App permission to access your public profile, News Feed, status updates and groups.

    Click 'Okay' to give your Facebook App permission to access your public profile, News Feed, status updates and groups.

    Click ‘Okay’ to give your Facebook App permission to access your public profile, News Feed, status updates and groups.

  5. Click Okay to give your Facebook App permission to manage your Pages.

    Click 'Okay' to give your Facebook App permission to manage your Pages.

    Click ‘Okay’ to give your Facebook App permission to manage your Pages.

  6. You will be returned to the JSL3 Facebook Wall Feed settings page with your Access Token and its expiration date.

    You will be returned to the JSL3 Facebook Wall Feed settings page with your <strong>Access Token</strong> and its expiration date.

    You will be returned to the JSL3 Facebook Wall Feed settings page with your Access Token and its expiration date.

  7. NOTE: Facebook has changed how the Facebook ID is used with new Facebook Apps. If, after adding your widget to your WordPress site, you see that the feed is blank, go back to the settings page for the plugin and check the box below your Facebook ID and then click the Save Changes button. This will tell the plugin to request the App Scoped User ID instead of your Facebook ID.

    If, after adding your widget to your WordPress site, you see that the feed is blank, go back to the settings page for the plugin and check the box below your Facebook ID and then click the 'Save Changes' button.

    If, after adding your widget to your WordPress site, you see that the feed is blank, go back to the settings page for the plugin and check the box below your Facebook ID and then click the ‘Save Changes’ button.

Back to the top

Widget Usage

  1. Go to Widgets under Appearance on your WordPress Administration menu. Drag the JSL3 Facebook Wall Feed widget to the sidebar of your choice.

    Drag the 'SL3 Facebook Wall Feed' widget to the sidebar of your choice.

    Drag the ‘JSL3 Facebook Wall Feed’ widget to the sidebar of your choice.

  2. Give the widget a title (or leave it blank) and enter how many posts you want to get from your wall. You may also enter the Facebook ID of the Facebook page you want to display in the widget. If you leave the Facebook ID blank, the widget will use the Facebook ID entered on the settings page for the plugin. Click Save.

    Give the widget a title (or leave it blank) and enter how many posts you want to get from your wall. You may also enter the Facebook ID of the Facebook page you want to display in the widget.

    Give the widget a title (or leave it blank) and enter how many posts you want to get from your wall. You may also enter the Facebook ID of the Facebook page you want to display in the widget.

  3. Go check out your Facebook Wall Feed on your WordPress site.

    Go check out your Facebook Wall Feed on your WordPress site.

    Go check out your Facebook Wall Feed on your WordPress site.

Back to the top

Shortcode Usage

  1. Add the shortcode [jsl3_fwf] or [jsl3_fwf limit=”1″] or even [jsl3_fwf limit=”1″ fb_id=”1405307559″] to the Text view of a post or page. If you do not enter a Facebook ID, the plugin will use the Facebook ID entered on the settings page for the plugin. If your feed is blank, try setting the fb_id property to your App Scoped User ID. If you do not know your App Scoped User ID, set the app_scoped_user_id property to true like this: [jsl3_fwf limit=”1″ fb_id=”1405307559″ app_scoped_user_id=”true”]
    Add the shortcode [jsl3_fwf] or [jsl3_fwf limit="1"] or even [jsl3_fwf limit="1" fb_id="1405307559"] to the 'Text' view of a post or page.

    Add the shortcode [jsl3_fwf] or [jsl3_fwf limit=”1″] or even [jsl3_fwf limit=”1″ fb_id=”1405307559″] to the ‘Text’ view of a post or page.

  2. View your Facebook Wall Feed on your WordPress post or page.

    View your Facebook Wall Feed on your WordPress post or page.

    View your Facebook Wall Feed on your WordPress post or page.

Back to the top

Frequently Asked Questions


  • Where can I find support for this plugin?Just add a comment and I will do my best to help you.
    Back to the FAQ menu
  • How do I use shortcode to add the Facebook Wall Feed to a post or page?Switch to HTML view and add the following:[jsl3_fwf]To limit the number of posts displayed add the ‘limit’ attribute:[jsl3_fwf limit="1"]To specify a specific feed to display add the ‘fb_id’ attribute and enter the feed’s Facebook ID:

    [jsl3_fwf limit="1" fb_id="1405307559"]

    If you do not enter a Facebook ID in the shortcode, the plugin will use the Facebook ID entered on the settings page for the plugin.
    Back to the FAQ menu

  • Can I translate the plugin?I would be happy if you translated the plugin. You can use the ‘default.po’ file found in the ‘wp-content/plugins/jsl3-facebook-wall-feed/languages’ directory. Use Poedit to translate the plugin into your language and then save the PO file using the text domain (‘jsl3-fwf’), language code and country code as the name. For example, if you translate the plugin into German, you should save the file as ‘jsl3-fwf-de_DE.po’. Finally, place the translated PO file and its corresponding MO file in the ‘wp-content/plugins/jsl3-facebook-wall-feed/languages’ directory.Let me know the URL of the site with the translated plugin by posting a comment on the this page.
    Back to the FAQ menu
  • How do I get rid of the ‘Facebook Status’ box?To remove the ‘Facebook Status’ box add the following to the bottom of the style sheet on the settings page for the plugin:

    /* Remove Facebook Status */
    #facebook_status_box h2
    {
    display: none;
    }

    Back to the FAQ menu
  • How can I adjust the width of the Facebook Wall Feed?To adjust the width of the Facebook Wall Feed add the following to the bottom of the style sheet on the settings page for the plugin:

    /* Adjust width */
    #facebook_status_box
    {
    width: 225px;
    }

    Change the number in front of “px” to one that fits for you.
    Back to the FAQ menu
  • How do I adjust the height of the Facebook Wall Feed?To adjust the height of the Facebook Wall Feed add the following to the bottom of the style sheet on the settings page for the plugin:

    /* Adjust height */
    #facebook_status_box
    {
    height: 500px;
    }
    #facebook_status_box #facebook_canvas
    {
    height: 460px;
    }
    Change the numbers in front of “px” to ones that fits for you. Try to keep the height in #facebook_status_box about 40px greater than the height in #facebook_canvas if you are keeping the ‘Facebook Status’ box at the top of the feed.
    Back to the FAQ menu
  • Why is my token set to expire in less than 24 hours?I am not sure why Facebook will give some users a short-lived token. Facebook will only allow you to attempt to renew your token once per 24 hours. Try waiting 24 hours from the last time you clicked “Save Changes” on the settings page for the plugin, then try again. If you do not get a token that lasts about 60 days, then you may want to try creating a new Facebook App for the plugin.
    Back to the FAQ menu
  • What does the error “OAuthException: Error validating access token: Session has expired at unix time [UNIX TIME]. The current unix time is [UNIX TIME]” mean?It means your access token has expired. Go to the settings page for the plugin and click “Save Changes” to renew your token.
    Back to the FAQ menu
  • What does the error “OAuthException: Error validating access token: The session has been invalidated because the user has changed the password” mean?It usually means you changed your Facebook password recently. Go to the settings page for the plugin and click “Save Changes” to validate your session.
    Back to the FAQ menu
  • What does the error “OAuthException: An access token is required to request this resource” mean?It usually means you do not have an access token. Check that your App ID and App Secret are correct. Then click “Save Changes” on the settings page for the plugin.
    Back to the FAQ menu
  • What does the error “Exception: No node specified” mean?It usually means you have not set your Facebook ID. Check that you have entered your Facebook ID on the settings page for the plugin. Then click “Save Changes” on the settings page for the plugin.
    Back to the FAQ menu
  • What does the error “Exception: SETTINGS: Unrecognized pref_type 0 for NullProfileSettings pref name default_non_connection_tab” mean?It usually means are using an incorrect Facebook ID. Check that your Facebook ID is correct. Then click “Save Changes” on the settings page for the plugin.
    Back to the FAQ menu
  • What does “An error occurred with [Your App Name]. Please try again later” mean?This is a Facebook error and may also include the following message:

    API Error Code: 191
    API Error Description: The specified URL is not owned by the application
    Error Message: Invalid redirect_uri: Given URL is not allowed by the Application configuration.

    This error means that the App Domain and Site URL for your Facebook App do not match the domain of the website where you are using the plugin. Go to https://developers.facebook.com/apps and click “Edit Settings”. Under “Basic”, change your “App Domain” to match the domain of the website where the plugin is located. In the “Select how your app integrates with Facebook” section, under “Website with Facebook Login”, change your “Site URL” to match the URL of the website where the plugin is located. Do not use “www.” in your App Domain or Site URL.
    Back to the FAQ menu

  • Why is my feed blank?First, a blank feed usually indicates an invalid Facebook ID. If you do not know your Facebook ID, then go to https://developers.facebook.com/tools/explorer. Click “Get Access Token”. You may be prompted to log in. If you are prompted to “Select permissions”, click “Get Access Token”. In the text box next to the “Submit” button, enter the “Facebook Username” used in your Facebook URL (for example, my Facebook URL is https://www.facebook.com/takanudo so my Facebook Username is takanudo) followed by “?fields=id”. Click Submit. Your Facebook ID will be in the results.Second, The limit property tells Facebook how many posts to return. Some of those posts could be filtered out depending on how you have configured the plugin. For example, if you set the limit to one, the post returned may be filtered out if you have “Only show posts made by this Facebook ID” checked or “Show all status messages” unchecked or “Privacy” set to “Show only wall posts labeled public”. The thoroughness option forces the plugin to keep making requests to Facebook until the limit number has been reached, but it will slow down the plugin dramatically.
    Back to the FAQ menu

Back to the top

Change Log

1.7.4

  • Added a feature to request your App Scoped User ID if your Facebook ID returns a blank feed.
  • Updated the Facebook App configuration guide.

1.7.3

  • Added the ability to only show posts that were posted to the Facebook ID listed in the plugin’s settings page.
  • Fixed a bug introduced in Facebook Graph v2.0..

1.7.2

  • Fixed a bug with how the access token renew check was scheduled.

1.7.1

  • Added group permissions to the feed.

1.7

  • Added the ability to display multiple feeds.
  • Added a German translation to the plugin.

1.6

  • This update displays the likes count for each post and comment.

1.5.5

  • Updated the help section.

1.5.4

  • This update should send fewer notification emails.
  • Changes all URLs to use https.

1.5.3

  • Fixed a minor bug introduced in v1.5.2

1.5.2

  • Fixed privacy setting to work with the change Facebook made to how they display privacy settings in the feed.
  • Minor change to how the style sheet is enqueued into the header.

1.5.1

  • Fixed a bug in the shortcode introduced in v1.5

1.5

  • Added an option to disable the make_clickable() WordPress function added in v1.4.2
  • The plugin will now notify the WordPress admin that their Facebook access token is about to expire a week from the expiration date.

1.4.2

  • Added an option to disable the make_clickable() WordPress function added in v1.4.2
  • The plugin will now notify the WordPress admin that their Facebook access token is about to expire a week from the expiration date.
  • Added make_clickable() WordPress function to convert plain text URI to HTML links.

1.4.1

  • Added CRON schedule to refresh expired tokens because Facebook no longer allows non-expiring tokens.
  • Fixed 1 pixel images filtered through Facebook’s safe_image.php file.
  • Added ability to turn off displaying Facebook icons.
  • Added additional security features.

1.3.1

  • Made the feed validate XHTML 1.0 Strict.
  • Made a cURL and allow_url_fopen check.
  • Feed will now use the same locale as WordPress.
  • Added ability to turn of SSL certificate verification.
  • Added ability to display profile picture from Facebook pages with demographic restrictions.

1.2

  • Added default.po file to support localization.
  • Added thoroughness check.
  • Added ability to show status messages.
  • Added ability to show post comments.
  • Added ability to open links in a new window or tab.
  • Feed will now display a greater variety of wall posts.
  • Accounted for newline character

1.1

  • Fixed a PHP Notice error when displaying video posts.
  • Added shortcode capability.
  • Added a property to limit posts to only the user (posts by other users are not displayed).
  • Added a privacy setting to limit the feed to only public posts.
  • Added contextual help.
  • Added better error handling.

1.0

  • This is the initial version.

Back to the top

Upgrade Notice

1.7.4

Added a feature to request your App Scoped User ID if your Facebook ID returns a blank feed. Also, I finally updated the Facebook App configuration guide.

1.7.3

Added a feature to limit the posts displayed in the feed to only posts that were directly posted to the timeline associated with the Facebook ID you assign to the plugin. Also, fixed a incompatibility bug introduced with the latest Facebook Graph API.

1.7.2

Fixed a timing bug where the access token renew check would be scheduled to run before the expiration date was stored in the database.

1.7.1

A minor update to add group permissions to the feed.

1.7

The plugin now has the ability to display feeds from different Facebook pages. Also, a German translation of the plugin has been provided.

1.6

Facebook removed the likes count from the feed. This update uses a different method to get the likes count for each post. The plugin also displays the likes count for each comment.

1.5.5

The help section has been updated.

1.5.4

Hopefully this update will send fewer email notifications when your token is about to expire. Also, changed all URLs to use https.

1.5.3

Fixed a minor bug introduced in v1.5.2.

1.5.2

Facebook changed public privacy setting to be a blank entry, so I have adjusted the plugin to account for that. Also, for some users, the style sheet would be embedded more than once. This update should fix that.

1.5.1

This is a minor shortcode bug fix.

1.5

This update adds an option to disable the make_clickable() WordPress function added in v1.4.2. Also, the automatic Facebook access token renewal added in v1.4.1 never worked properly. So now the plugin will now notify the WordPress admin that their Facebook access token is about to expire a week from the expiration date. Renewing the token should simply be a matter of clicking “Save Changes” on the settings page for the plugin.

1.4.2

This is a minor update that adds the make_clickable() WordPress function to convert plain text URI to HTML links.

1.4.1

This update adds additional security features. It also adds a CRON schedule to refresh expired tokens because Facebook no longer allows non-expiring tokens.

1.3.1

This update should validate under XHTML 1.0 Strict. It also checks to see if cURL is loaded or allow_url_fopen is on. The feed will now use the same locale setting that WordPress is using.

1.2

This upgrade provides support for localization. Feel free to use the ‘default.po’ file in the ‘languages’ directory to create a translation of the plugin.

1.1

This upgrade provides added security measures and better error handling.

1.0

This is the initial version.
Back to the top

1,629 thoughts on “JSL3 Facebook Wall Feed

  • pxpadmin says:

    Great plugin!!

    It would be great if it could show the feeds in rows and columns. ie 3 columns and rows depending on number of feeds.

    thanks

  • Seth says:

    I have uninstalled your plugin and I am still getting expiration emails. It appears they are coming from your side. Please delete us. Thanks.

    • Takanudo says:

      I do not send any expiration emails. They are generated by the plugin installed on your WordPress site. If you are still getting emails, then something may have gone wrong when you tried to uninstall the plugin. You might want to delete the /wp-content/plugins/jsl3-facebook-wall-feed directory if it still exists.

  • pxpadmin says:

    How do I make the post photo image slightly larger?
    I have tried changing a couple of values in the CSS but it keeps messing up the whole layout.
    thanks

    • Takanudo says:

      You can modify the php to grab a larger image from Facebook by doing the following:

      1. Open ‘/wp-content/plugins/jsl3-facebook-wall-feed/php/class-uki-facebook-wall-feed.php’
      2. Line 851 is the following:
      return $result;
      3. Change it to the following
      return str_replace('_s', '_a', $result);
      4. Save the file

      Usually, Facebook sends images with the _s suffix in the feed. This will resize images up to 130 pixels on the longest side. Replacing _s with _a should resize images up to 180 pixels on the longest side. Other suffix options that Facebook provides include _t (75 pixels) and _b (960 pixels).

      • Antti says:

        Hello, I tried this but it didn’t work. I’ve tried:
        return str_replace(‘_a’, ‘_a’, $result);
        return str_replace(‘_s’, ‘_a’, $result);
        but neither did work. The picture is 130px wide and 97px high.

        • Takanudo says:

          What is the actual size of the image? If it was posted to Facebook as 130 x 97 pixels, it won’t get any bigger.

          Usually, Facebook sends images with the _s suffix in the feed. This will resize images up to 130 pixels on the longest side. Replacing _s with _a should resize images up to 180 pixels on the longest side. Other suffix options that Facebook provides include _t (75 pixels) and _b (960 pixels).

          For up to 75 pixels on the longest side, try the following:
          return str_replace('_s', '_t', $result);

          For up to 130 pixels on the longest side, try the following:
          return $result;

          For up to 180 pixels on the longest side, try one of the following:
          return str_replace('_s', '_a', $result);
          return str_replace('_s', '_q', $result);
          return str_replace('_s', '_x', $result);

          For up to 960 pixels on the longest side, try one of the following:
          return str_replace('_s', '_b', $result);
          return str_replace('_s', '_n', $result);
          return str_replace('_s', '_o', $result);

          • Antti says:

            Hello,

            I tried all of those but nothing changed. The picture stayed in same size. When I open it from the link it goes to facebook and there the image is 720×540 px.

          • Takanudo says:

            Would you mind giving me a link to the page on your WordPress site where the plugin is running so I can see if there is anything else going on?

          • Antti says:

            Hello,

            The server isn’t yet in production so there is no outside access. With firebug console I could insert corret px:s for image and could load all sizes. It seems that the modified PHP won’t get loaded at all.

          • Takanudo says:

            Is the the “_s” at the end of the image file name being replaced by “_a” (or whatever you chose to replace it with) in the html that is generated by the plugin? Do you have any css that could be setting the height and width on images?

          • Antti says:

            Hello,

            I think the _s won’t be replaced as in the html it in includes the URL for 130×130 image. I’ve checked the css and there is nothing that could cause this, and I doubt that since the html itself has incorrect picture size.

          • Takanudo says:

            I’m not sure what you mean by “the _s won’t be replaced”. If you modified the plugin correctly, all pictures in the feed should have the “_s” in the file name replaced with your choice when the html is rendered. What version of the plugin are you using? Can you copy the entire body of the fb_fix function you modified in ‘/wp-content/plugins/jsl3-facebook-wall-feed/php/class-uki-facebook-wall-feed.php’ and paste it in your next reply?

          • Antti says:

            Hello,

            fb_fix function is as follows:

            function fb_fix( $str ) {
            $pos = strpos( $str, ‘safe_image.php’ );
            if ( $pos !== FALSE ) {
            parse_str( $str );
            $str = $url;
            }

            $result = ”;

            return str_replace(‘_s’, ‘_o’, $result);
            }

          • Takanudo says:

            The lines preceding the return statement may have been filtered out when you made your post. Can you confirm that the following lines are in the function instead of $result = '';

            $result = '<img src="' . htmlentities( $str, ENT_QUOTES, 'UTF-8' ) . '" alt="' . __( 'Facebook Picture', JSL3_FWF_TEXT_DOMAIN );
            if ( isset( $w ) && isset( $h ) )
                $result .= '" width="' . $w . '" height="' . $h;
            $result .= '" />';

          • Antti says:

            Yes, that is correct. It is inside the function.

          • Takanudo says:

            Can you try commenting out the “if” statement that sets the height and width?

            Change the following:

            $result = '<img src="' . htmlentities( $str, ENT_QUOTES, 'UTF-8' ) . '" alt="' . __( 'Facebook Picture', JSL3_FWF_TEXT_DOMAIN );
            if ( isset( $w ) && isset( $h ) )
                $result .= '" width="' . $w . '" height="' . $h;
            $result .= '" />';

            to the following:

            $result = '<img src="' . htmlentities( $str, ENT_QUOTES, 'UTF-8' ) . '" alt="' . __( 'Facebook Picture', JSL3_FWF_TEXT_DOMAIN );
            //if ( isset( $w ) && isset( $h ) )
            //    $result .= '" width="' . $w . '" height="' . $h;
            $result .= '" />';

            If that doesn’t work, could you give me a link to an image that isn’t resizing?

          • Takanudo says:

            I think I see what is going on. Facebook changed the URL for images. Try this:

            Replace the following line:

            return str_replace('_s', '_o', $result);

            with the following three lines:

            $search = array('_s', '_n');
            $result = str_replace($search, '_o', $result);
            return str_replace('s130x130', 'o960x960', $result);

          • Antti says:

            Hello,

            thanks for your patience! This solved it.

          • Toryn says:

            I ran into the same problem and switched to using:

            $search = array(‘_s’, ‘_n’);
            $result = str_replace($search, ‘_o’, $result);
            return str_replace(‘s130x130’, ‘o960x960’, $result);

            I’m running into an issue though where some images are being displayed in the Facebook wall feed on my site and others are not.

            Any ideas?

            I compared the resolution of an image that isn’t displaying with one that is.

            Photo not displayed: 662 x 960 72 dpi
            Photo properly displayed: 640 x 960 x 72 dpi

            http://livybearphotography.com

          • Takanudo says:

            Try replacing those three lines with the following:

            $search = array('_s', '_n');
            $result = str_replace($search, '_b', $result);
            $result = str_replace('s130x130', 'b960x960', $result);
            $result = str_replace('/v/', '/', $result);
            return $result;

          • Toryn says:

            I tested with a few more photos… it’s definitely not due to the resolution. Two photos of exactly the same height and width and DPI and displays and the other doesn’t.

          • Toryn says:

            That fixed it! Thanks so much!

          • Toryn says:

            I think Facebook changed things again regarding how/where the photos are pulled from.

            The code:

            $search = array(‘_s’, ‘_n’);
            $result = str_replace($search, ‘_b’, $result);
            $result = str_replace(‘s130x130’, ‘b960x960’, $result);
            $result = str_replace(‘/v/’, ‘/’, $result);
            return $result;

            … stopped working yesterday and now just displays empty placeholders instead of the photos.

            If I revert code back to just:

            return str_replace(‘_s’, ‘_n’, $result);

            The pictures are displayed, but it’s back to pulling in very low resolution images (130×85).

            I’ve also tried:

            return str_replace(‘_s’, ‘_n’, $result);

          • Takanudo says:

            Give this a try:

            NOTE: These instructions are for the unmodified 1.7.2 version of the plugin.

            1. Open ‘/wp-content/plugins/jsl3-facebook-wall-feed/php/class-uki-facebook-wall-feed.php’
            2. Line 308 is the following:
            $fb_url .= "&fields=from.fields(id,name),privacy,message,name,caption,description,id,created_time,picture,source,link,likes.limit(1).summary(true),properties,icon,story,comments";
            3. Replace it with the following:
            $fb_url .= "&fields=from.fields(id,name),privacy,message,name,caption,description,id,created_time,picture,source,link,likes.limit(1).summary(true),properties,icon,story,comments,object_id";
            4. Lines 535 to 537 are the following:
            if ( isset( $fb_feed[ $i ][ 'picture' ] ) )
                $fb_picture =
                    $this->fb_fix( $fb_feed[ $i ][ 'picture' ] );
            5. Replace them with the following:
            if ( isset( $fb_feed[ $i ][ 'object_id' ] ) )
                $fb_picture =
                    $this->fb_fix( 'https://graph.facebook.com/' . $fb_feed[ $i ][ 'object_id' ] . '/picture?type=normal' );
            elseif ( isset( $fb_feed[ $i ][ 'picture' ] ) )
                $fb_picture =
                    $this->fb_fix( $fb_feed[ $i ][ 'picture' ] );
            6. Save the file

            Let me know how it goes.

          • Toryn says:

            That didn’t seem to have an impact. Photos are still being pulled in at 130×85.

          • Takanudo says:

            I don’t think you did step 3 correctly. The code got truncated in the reply because the box is so narrow. Right now line 308 probably ends with

            ,comments";

            Append ,object_id so that the end of line 308 looks like

            ,comments,object_id";

          • Toryn says:

            I adjusted line 308 so that it ends in ,comments,object_id”; as follows:

            $fb_url .= "&fields=from.fields(id,name),privacy,message,name,caption,description,id,created_time,picture,source,link,likes.limit(1).summary(true),properties,icon,story,comments,object_id”;

            That causes an error message when the page is displayed which reads:

            Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting T_STRING or T_VARIABLE or T_NUM_STRING in /home/content/38/9445538/html/wp-content/plugins/jsl3-facebook-wall-feed/php/class-uki-facebook-wall-feed.php on line 314

          • Takanudo says:

            This a subtle problem. If you look closely, you will notice that the double-quotes at the end of the line () are not the type of double-quotes that php needs ("). Try copying the double-quotes at the beginning of the string and replacing it with the ones you have at the end.

          • Toryn says:

            That did the trick! Thanks!!

            So strange that the quotes got messed up like that (as I added the object_id without deleting the quotes that were already there. I think it was because I copied the text from the php file and pasted into a text editor so that I could easily jump to specific line numbers.

            Anyways thanks again! It’s working perfectly now!

            http://livybearphotography.com

  • I receive the following error and i dont understand what to do!

    “Given URL is not permitted 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.”

    Thank you!

  • Problem solved by adding platform in the basic info of the app! You only add the URL of your site! 🙂

    SOLVED

  • Lee says:

    Great plugin!! Few questions:

    1. Is it possible to remove photo – links. All photos link to their source
    2. Is it possible to change photo – links to open in a new tab instead of redirecting the current tab
    3. Is it possible to center photos in the feed
    4. In the comments, there is no space between the time stamp and last character of the comment. is there a way to add one?

    Thanks again!

    • Takanudo says:

      1. There is not an easy way to remove the photo-links. Sorry.

      2. Check the “Open links in a new window or tab” option on the settings page for the plugin.

      3. To center photos, try adding the following to the bottom of the style sheet on the settings page for the plugin:

      #facebook_status_box .fb_msg img
      {
      float: none;
      display: block;
      margin-left: auto;
      margin-right: auto;
      }

      4. To add some padding in front of the time stamp, try adding the following to the bottom of the style sheet on the settings page for the plugin:

      #facebook_status_box .fb_post .fb_comments .fb_time
      {
      padding-left: 5px;
      }

    • Takanudo says:

      Another option for your 4th question is to add padding after the comment, instead of in front of the time stamp:

      #facebook_status_box .fb_post .fb_comments .fb_photo_content p
      {
      padding-right: 5px;
      }

  • Lee says:

    Thanks kindly Takanudo
    I should have seen number 2 for myself! Thanks again

    Lastly, I’m actually having problems centering the whole feed on the page. Ie, when I instantiate the plugin I do so as follows:
    [jsl3_fwf]

    But it always appears left aligned. Is that a seemingy a big with my theme or something in the plugin perhaps?

    • Takanudo says:

      It is just a matter of adjusting the style sheet. One of the “tricks” to centering a block element using CSS is to set the left and right margins to “auto”. Try adding the following to the bottom of the style sheet on the settings page for the plugin:

      #facebook_status_box
      {
      margin-left: auto;
      margin-right: auto;
      }

  • Lee says:

    Hello again
    A further question on images in the feed

    Is it possible to set their maximum display size to 600px wide?
    I’m aware of manipulating the size they’re grabbed at from facebook, but it’s either too big or too small for my liking unfortunately

    Furthermore, is it possible to add border code to images?

    Thanks!

    • Takanudo says:

      Try adding the following to the bottom of the style sheet on the settings page for the plugin:

      #facebook_status_box .fb_msg img
      {
      max-width: 600px;
      height: auto;
      border: 2px solid #ff0000;
      }

      I added a solid red border that is 2px wide, so change it to whatever works best for you.

  • Lee says:

    perfect!! Thanks

  • Guto says:

    Hi there,
    I have 2 questions…
    How can I change the title of the Facebook box “Facebook Status” to “Facebook Feed”?
    And how do I change the color of the scrolling bar?
    I didn’t find in the css style sheet…
    Thanks!

    • Takanudo says:

      In order to change the title you will need to modify the PHP by doing the following:

      1. Open ‘/wp-content/plugins/jsl3-facebook-wall-feed/php/class-uki-facebook-wall-feed.php’
      2. Line 289 is the following:
      __( 'Facebook Status', JSL3_FWF_TEXT_DOMAIN ) . '</h2>' .
      3. Change it to the following
      __( 'Facebook Feed', JSL3_FWF_TEXT_DOMAIN ) . '</h2>' .
      4. Save the file

      For better or worse, there is no CSS standard for customizing scroll bars. Some browsers have their own proprietary CSS for modifying scroll bars, while other browsers do not allow it at all. Take a look at this Code Mug post to learn more about styling scroll bars in the various browsers that allow it.

  • Ivan Pazvantov says:

    Hello, very nice plugin, but I have one little question 😉 It’s possible to show only EVENTS from FB wall (including events from fan pages)

    Thanks in advance!
    Ivan Pazvantov

    • Takanudo says:

      First, let me make the caveat that the plugin was specifically designed to work with the Facebook feed. I make no guarantees that trying the following suggestion will work. With that out of the way, you can try to point the plugin to Facebook events only by doing the following:

      1. Open ‘/wp-content/plugins/jsl3-facebook-wall-feed/php/class-uki-facebook-wall-feed.php’
      2. Lines 302 to 307 are the following:

      if ( $this->thorough )
      $fb_url = "https://graph.facebook.com/$id/feed?" .
      "locale=$locale&limit=100&$token";
      else
      $fb_url = "https://graph.facebook.com/$id/feed?" .
      "locale=$locale&limit=$limit&$token";

      3. Change them to the following:

      if ( $this->thorough )
      $fb_url = "https://graph.facebook.com/$id/events?" .
      "locale=$locale&limit=100&$token";
      else
      $fb_url = "https://graph.facebook.com/$id/events?" .
      "locale=$locale&limit=$limit&$token";

      4. Line 308 is the following:
      $fb_url .= "&fields=from.fields(id,name),privacy,message,name,caption,description,id,created_time,picture,source,link,likes.limit(1).summary(true),properties,icon,story,comments";
      5. Change it to the following:
      // $fb_url .= "&fields=from.fields(id,name),privacy,message,name,caption,description,id,created_time,picture,source,link,likes.limit(1).summary(true),properties,icon,story,comments";
      6. Save the file

      NOTE: Steps 4 and 5 may not be necessary.

      If you decide to try this, I would appreciate it if you would reply back with your results.

      • Ivan Pazvantov says:

        Thanks for quick reply!

        It worked with some problems:

        First, one 3 times repeat error message, before result :
        _________________________________________
        Warning: mktime() expects parameter 6 to be long, string given in ********/wp-content/plugins/jsl3-facebook-wall-feed/php/class-uki-facebook-wall-feed.php on line 818

        Warning: mktime() expects parameter 6 to be long, string given in ********/wp-content/plugins/jsl3-facebook-wall-feed/php/class-uki-facebook-wall-feed.php on line 818

        Warning: mktime() expects parameter 6 to be long, string given in ********/wp-content/plugins/jsl3-facebook-wall-feed/php/class-uki-facebook-wall-feed.php on line 818
        _________________________________________________________

        Second, there are no images to event. Result HTML is:

        And third: events are only 3,

        The result can be seen on temporary (test) address: ******** on sidebar.

        • Takanudo says:

          I did some research on events in the Facebook Graph API. I was hoping that an event would share some common properties with posts, but this does not appear to be the case. For example, the plugin is expecting the created_time property, but events do not include that which is why you are seeing the mktime() errors.

          The fact that there are only three events might be due to not having the user_events permission set. To add this permission to the plugin, do the following:

          1. Open ‘/wp-content/plugins/jsl3-facebook-wall-feed/php/class-jsl3-facebook-wall-feed.php’
          2. Lines 746 is the following:
          "scope=user_groups,friends_groups,read_stream,offline_access,manage_pages,user_status&s;" .
          3. Change it to the following:
          "scope=user_events,friends_events,user_groups,friends_groups,read_stream,offline_access,manage_pages,user_status&s;" .
          4. Save the file
          5. Click “Save Changes” on the settings page for the plugin. You should be prompted to give the user and friends events permission to your Facebook App.

          If by “there are no images to events” you mean your profile picture, this is because events store the Facebook ID of the owner in a different property. As far as I am aware, you can only add a cover image to an event. You can add images to an event post. Is that what you were referring to?

          About the only thing I can help you with is limiting the plugin to display only event posts (as opposed to the event itself). Let me know if you want instructions on how to do this.

  • Guto says:

    Thanks a lot for your help Takanudo!!
    Cheers!

  • Keith says:

    Hello,

    Great plug in.

    Since the latest update, the token expires every day – any way to fix this?

    Thanks,
    Keith

  • brett says:

    hello! we’ve been super happy with this plugin. then suddenly, it stopped working. where the feed is embedded we get this error: [60] SSL certificate problem: unable to get local issuer certificate

    when i try to update through the settings in wordpress, after submit i received this error: The state does not match. You may be a victim of CSRF.

    i’ve tried turning off ‘Verify SSL Peer’, deactivating and reactivating the plugin, and even creating a new app on facebook to hook it up to. When i uncheck ‘Verify SSL Peer’ or try to change to a new duplicate of the facebhook app, i get the same CSRF error., and no change shows in plugin settings deactivating and reactivating the plugin seems to have no effect whatever. any thoughts on this would be most helpful.

    • Takanudo says:

      In addition to turning off “Verify SSL Peer”, try doing the following:

      1. Open ‘/wp-content/plugins/jsl3-facebook-wall-feed/php/class-jsl3-facebook-wall-feed.php’
      2. Line 794 is the following:
      curl_setopt( $ch, CURLOPT_RETURNTRANSFER, TRUE );
      3. Insert a new line after line 794 and add the following:
      curl_setopt( $ch, CURLOPT_SSL_VERIFYHOST, 1 );
      4. Save the file
      5. Open ‘/wp-content/plugins/jsl3-facebook-wall-feed/php/class-uki-facebook-wall-feed.php’
      6. Line 417 is the following:
      curl_setopt( $ch, CURLOPT_RETURNTRANSFER, TRUE );
      7. Insert a new line after line 417 and add the following:
      curl_setopt( $ch, CURLOPT_SSL_VERIFYHOST, 1 );
      8. Save the file
      9. Click “Save Changes” on the settings page for the plugin.

      Let me know what happens.

      • brett says:

        thanks for the reply. unfortunately, no change. the same errors appear both on the blog and in the wordpress interface

        • Takanudo says:

          Well, I am not optimistic about this, but lets try seeing if downloading the latest Certificate Authorities will help:

          1. Right click on the following link and save the file to your computer: Current Certificate Authorities Bundle
          2. Copy the cacert.pem file you just downloaded to the ‘/wp-content/plugins/jsl3-facebook-wall-feed/php’ directory on the server hosting your WordPress site.
          3. Above the lines you added in steps 3 and 7 of the previous instructions, insert the following:
          curl_setopt( $ch, CURLOPT_CAINFO, JSL3_FWF_PLUGIN_DIR . '/php/cacert.pem' );
          4. Modify the lines you added in steps 3 and 7 of the previous instructions to the following:
          curl_setopt( $ch, CURLOPT_SSL_VERIFYHOST, 2 );
          5. Once you have saved the changes to those two files, go the setting page for the plugin and check ‘Verify SSL Peer’.
          6. Click “Save Changes”.

          If that doesn’t work, then leave the adjustments you just made except for the following:

          7. Undo the changes you just made in step 4, so that the lines are now the following:
          curl_setopt( $ch, CURLOPT_SSL_VERIFYHOST, 1 );
          8. Once you have saved the changes to those two files, go the setting page for the plugin and uncheck ‘Verify SSL Peer’.
          9. Click “Save Changes”.

          And if that doesn’t work, I’ve got one more thing for you to try:

          10. Once again, modify the lines you just changed in step 7 to the following:
          curl_setopt( $ch, CURLOPT_SSL_VERIFYHOST, 0 );
          11. Save the files and leave ‘Verify SSL Peer’ unchecked.
          12. Click “Save Changes”.

          I hope this works.

  • Sergio says:

    Hi. I’m using JSL3 Facebook Wall Feed and I’m getting this error:
    OAuthException: Error validating access token: You cannot access the app till you log in to http://www.facebook.com and follow the instructions given.

    I really would appreciate any help!

    Thanks and regards!

  • Alex says:

    Hey!

    Great Plugin! Is it also possible to show comments posted on a Facebook Event?

    Regards,
    Alex

    • Takanudo says:

      Posts that are made to an event (and comments to those posts) should be displayed by the plugin. Unfortunately, the actual event itself does not. However, I have learned that posts that are made on an event include the event data (event name, start time, end time, location, etc). I will include that data with the post in the next version of the plugin. Hopefully, I will have the next version out in a few weeks.

      • Marz says:

        You are an Absolute champ! Question, the events are all showing with todays date instead of the actual event date and no other data or comments beyond the event title is showing ( no comments, date, etc). Any chance you can tell me how to fix this? Happy to make a reasonable donation as this would allow me to make use of it.

        • Takanudo says:

          I will include event data with the post in the next version of the plugin. Hopefully, I will have the next version out in a few weeks.

  • Laurence says:

    I would like to show the feed of our non-profit organisation on the website. Under my own account, I created a seperate Facebook page.

    How can I connect the plugin to this seperate Facebook page?

    • Takanudo says:

      Create a Facebook App for the plugin using your personal account. On the settings page for the plugin on your WordPress site, enter the App ID and App Secret from the Facebook App you created, but enter the Facebook ID of the page you want to display in the plugin.

  • Joan says:

    hey hi
    I’d like to know how should i do that plugin searchs large size of image of the orginal post
    because now its searchs small size of image and it looks pixelize
    plugin is on homepage of the company sonica
    here is web address to see
    sonica.cat

    for example : i would like to change this image

    https://fbcdn-photos-b-a.akamaihd.net/hphotos-ak-xap1/t1.0-0/10439429_766847996693139_3479091843640691671_s.jpg

    on this one

    https://fbcdn-photos-b-a.akamaihd.net/hphotos-ak-xap1/t1.0-0/10439429_766847996693139_3479091843640691671_b.jpg

    • Takanudo says:

      You can modify the php to grab a larger image from Facebook by doing the following:

      1. Open ‘/wp-content/plugins/jsl3-facebook-wall-feed/php/class-uki-facebook-wall-feed.php’
      2. Line 851 is the following:
      return $result;
      3. Change it to the following
      return str_replace('_s', '_b', $result);
      4. Save the file

      Usually, Facebook sends images with the _s suffix in the feed. This will resize images up to 130 pixels on the longest side. Replacing _s with _b should resize images up to 960 pixels on the longest side. Other suffix options that Facebook provides include _t (75 pixels) and _a (180 pixels).

  • Lee says:

    Hello
    Love this plugin, working great!

    My facebook feed is coming from a page.
    Is it possible to limit the feed to only what the admins of the page post, and not what other people post on the page?

    Thanks
    -Lee

    • Takanudo says:

      Unfortunately, I’m not sure how to limit the feed to posts made by page admins. Have you tried checking the “only show posts made by this Facebook ID” option on the settings page for the plugin on your WordPress site?

  • Lee says:

    uhhh thankyou :–/
    sorry, I’ve been in CSS land, completely forgot to even check the basic settings !
    Thanks

  • Andre says:

    Hi,

    Facebook is asking me for a mobile phone number or credit card number to validate my account. I’m testing the plugin for a client. Is there any other way to post our FB feeds on a WP install?

    Thanks!

    Andre

    • Takanudo says:

      Is this happening when you try to create a Facebook App? Usually there is an option that allows you to submit a non-mobile phone number for Facebook to call you with a recorded voice message that gives you a confirmation number.

  • Do i have to get my application approved for it to work with your plugin?

    • Takanudo says:

      I don’t think so. I know Facebook has changed some of their policies regarding app permissions, but I think the basic functionality should still work.

  • Lee says:

    Hi Takanudo
    I’m wondering if you’re aware of any recent changes made by facebook that could affect the size of images?

    I’ve modified the file class-uki-facebook-wall-feed.php at line 851 to:
    return str_replace(‘_s’, ‘_b’, $result);

    And it has been working perfectly but now all images are small again..

    Any assistance would be greatly appreciated
    Kind regards
    -Lee

    • Takanudo says:

      Yes. It looks like Facebook did make a change in the URL for images. Try the following:

      Replace the following line:

      return str_replace('_s', '_b', $result);

      with the following three lines:

      $search = array('_s', '_n');
      $result = str_replace($search, '_b', $result);
      return str_replace('s130x130', 'b960x960', $result);

      • Lee says:

        That’s the one! Thanks Takanudo

        Also one final question
        On mobile the images remain large, even on the responsive version of the theme

        Would it be possible to display a smaller version on the mobile version? In fact, the non-modified class-uki-facebook-wall-feed.php size is perfect for mobile….

        • Takanudo says:

          Replace those three lines I gave you in the last post with the following:

          if ( ! wp_is_mobile() ) {
              $search = array('_s', '_n');
              $result = str_replace($search, '_b', $result);
              $result = str_replace('s130x130', 'b960x960', $result);
          }
          return $result;

  • Lee says:

    perfect!
    Many thanks again

  • Elin Olsson says:

    Hi Takanudo,
    What a great job you’re doing! I feel a bit foolish but I can’t figure out why my feed is still blank.. I’ve followed the instructions on FAQ but it is still blank 🙁 The only thing I can come up with is that when I did my app on facebook it looked different than in your instructions on 1.d and 6. Did facebook change something or did I miss something along the way you think.. I would much appreciate your help!

    Best regards /Elin

    • Takanudo says:

      Facebook has changed quite a bit recently. Unfortunately, I haven’t had the time to catch up. I apologize that my instructions are out-of-date. Was an access token returned after your clicked “Save Changes” on the settings page for the plugin on your WordPress site? Could you let me know what you entered in the Facebook ID text box? What do you have the limit set to on the widget or short code? Finally, when you look at your Facebook App at https://developers.facebook.com/apps, does it have a green dot next to the name?

      • Elin Olsson says:

        Hmm no luck still – I tried with both limits 250 and 1000 but no differens. So greatful for your help and support! /Elin

        • Takanudo says:

          Try using the following Facebook ID: 540776635

          • Elin Olsson says:

            So greatful for your help but this didn’t help either 🙁 Got: “OAuthException: The global ID 540776635 is not allowed. Please use the application specific ID instead.”

          • Takanudo says:

            1. Go to the Facebook Graph API Explorer
            2. If the “Access Token” text box has an access token in it, then clear it.
            3. Copy the access token listed on the settings page for the plugin on your WordPress site and paste it into the empty “Access Token” text box on the Facebook Graph API Explorer.
            4. In the upper right of the Facebook Graph API Explorer is an “API Version” drop down list; select “Unversioned”.
            5. In the text box to the left of the “Submit” button, enter “me?fields=id,name” if it does not already exist.
            6. Click the “Submit” button.

            What is the “id” listed in the results?

          • Elin Olsson says:

            It works!!! Thank you ever so much <3
            All the best!
            /Elin

1 22 23 24 25 26 27

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.