WP Social Pro Usage Instructions

Configuration and Basic Options (All Versions)

Pro Options (WP Social Pro only)

How To Output The Feed

How To Output a Photo Gallery

How To Output an Event Feed

Before You Begin: Make Your Facebook Page Public

In order to display your Facebook posts on your website, you’ll need to be sure that your Facebook page is Public. If its not, you won’t be able to see any Facebook posts on your website, and this plugin will not work.

The best way to check if your Facebook page is public is to first log out of Facebook, and then visit your Facebook Page. If you can still see all the posts, your page is public. If on the other hand you only see some or none of your posts, your Facebook Page is still private and you’ll need to make it Public before using this plugin.

This is generally not a problem for Companies and Organizations, but it does mean that you won’t be able to use it to display your Personal Facebook Profile.

Finally, you should double check your Facebook Page’s settings to be sure you don’t have any settings enabled which will require a login, such as Privacy Settings or Age Restrictions.

How To Configure the WP Social Plugin for First Use

These are you basic Configuration Options.  These settings enable the plugin to interface with your Facebook Page
These are you basic Configuration Options. These settings enable the plugin to interface with your Facebook Page
  1. Navigate to WP Social Settings and click on the Configuration Options tab
  2. There are several fields to set here:
    1. Page ID: This is the ID of your Facebook page. This should be the integer ID in your page URL, or the username at the end of the Page URL (e.g., ours is ‘GoldPlugins’).
    2. Facebook App ID: This is the App ID you received when you setup your Facebook App
    3. Facebook Secret Key: This is the App Secret you received when you setup your Facebook App

Using the information gathered when you setup your Facebook App, fill out the fields on the screen and click Save. Now you can use any of the below instructions to output your Facebook Feed on your website!

How To Use The Plugin Status & Help Tab

This is the Plugin Status & Help Tab.  Here, you can find some useful information to assist in getting the plugin working with your setup.
This is the Plugin Status & Help Tab. Here, you can find some useful information to assist in getting the plugin working with your setup.
  1. Navigate to WP Social Settings and click on the Plugin Status & Help Tab.
  2. On this tab, you will find regularly updated instructions, tips, and troubleshooting advice for getting your Facebook Feed to load on your website.

How To Configure WP Social Style Options

These are the Style Options that are included in WP Social. These options allow you to change the look and feel of your feed, without knowing CSS.  You can also use Custom CSS, if you want advanced control!
These are the Style Options that are included in WP Social. These options allow you to change the look and feel of your feed, without knowing CSS. You can also use Custom CSS, if you want advanced control!
  1. Feed Theme: This will allow you to choose from some pre-styled Feed Themes, if desired.
  2. Custom CSS: Any custom CSS you want to input can go here.
  3. Feed Images

    Use these options to control the size and shape of images that are displayed in your Facebook feed.

    1. Fix Feed Image Width: If checked, images inside the feed will all be displayed at the width set in the Feed Image Width box. If unchecked, feed will display thumbnails.
    2. Feed Image Width: The width of the images displayed in the feed, if Fix Feed Image Width is set.
    3. Fix Feed Image Height: If checked, images inside the feed will all be displayed at the heightset in the Feed Image Heightbox. If unchecked, feed will display thumbnails.
    4. Feed Image Height: The heightof the images displayed in the feed, if Fix Feed Image Height is set.
  4. Feed Window Color and Dimensions

    Use these options to control the size and shape of the window that surrounds your Facebook feed.

    1. Feed Header Background Color: Use the colorpicker to choose a color or type in a hex color code.
    2. Feed Window Background Color: Use the colorpicker to choose a color or type in a hex color code.
    3. Feed Window Height: Input a pixel size to use.
    4. Feed Window Width: Input a pixel size to use.
    5. Sidebar Feed Window Height: Input a pixel size to use or choose one of the available options.
    6. Sidebar Feed Window Width: Input a pixel size to use or choose one of the available options.
  5. Font Styling

    Use these options to control the color and size of the various text items that appear in the Facebook feed.

    1. Description Font Color: Use the colorpicker to choose a color or type in a hex color code.
    2. Description Font Size: Input a pixel size to use. Integer only.
    3. Message Font Color: Use the colorpicker to choose a color or type in a hex color code.
    4. Message Font Size: Input a pixel size to use. Integer only.
    5. Link Font Color: Use the colorpicker to choose a color or type in a hex color code.
    6. Link Font Size: Input a pixel size to use. Integer only.
    7. Date Font Color: Use the colorpicker to choose a color or type in a hex color code.
    8. Date Font Size: Input a pixel size to use. Integer only.
    9. Posted By Font Color: Use the colorpicker to choose a color or type in a hex color code.
    10. Posted By Font Size: Input a pixel size to use. Integer only.
    11. Powered By Font Color: Use the colorpicker to choose a color or type in a hex color code.
    12. Powered By Font Size: Input a pixel size to use. Integer only.

How To Configure WP Social Display Options

This is the Display Options Tab. Here, you can control whether or not various elements are displayed.
This is the Display Options Tab. Here, you can control whether or not various elements are displayed.
  • Show Like Button: If checked, the Like Button will appear at the top of the feed.
  • Show Profile Picture: If checked, the Profile Picture will appear next to the Feed Title.
  • Number of Feed Items: If set, the feed will be limited to this number of items.
  • Show Posted By: If checked, the text Posted By PosterName will be displayed in the feed.
  • Show Posted Date: If checked, date of the Post will be displayed in the feed.
  • Show “Powered By WP Social”: If checked, the text Powered By WP Social will be displayed in your footer.

Pro Display Options

These are the Pro Display Options.  These are great for showing more of Facebook's content on your site, such as the Avatars of Users who are commenting, and their Comments!
These are the Pro Display Options. These are great for showing more of Facebook’s content on your site, such as the Avatars of Users who are commenting, and their Comments!
  1. Show Avatars: If checked, user avatars will be shown in the feed.
  2. Show Comment Counts: If checked, user comment counts will be shown in the feed, with a link to the Facebook page.
  3. Show Comments: If checked, user comments will be shown in the feed. If Show Avatars is also checked, user avatars will be shown in the replies. If Show Date is is also checked, the comment date will be shown in the replies. If Show Likes is also checked, the number of likes for each comment will be displayed.
  4. Show Likes: If checked, user like counts will be shown in the feed, with a link to the Facebook page.

Pro Custom HTML Options

These are the Custom HTML Options.  These options give power users the ability to customize the markup that is being output by the plugin.  This is great for upfitting the plugin to drop into your highly custom WordPress theme.
These are the Custom HTML Options. These options give power users the ability to customize the markup that is being output by the plugin. This is great for upfitting the plugin to drop into your highly custom WordPress theme.
  1. Use Custom HTML: If checked, this will disable the Style Options in the first tab and will instead use the Custom HTML
  2. Custom Feed Item HTML: Input any Custom HTML you want used here, following this example: <li class="ik_fb_feed_item">{ikfb:feed_item}</li>
  3. Custom Feed Message HTML: Input any Custom HTML you want used here, following this example: <p>{ikfb:feed_item:message}</p>
  4. Custom Feed Image HTML: Input any Custom HTML you want used here, following this example: <p>{ikfb:feed_item:image}</p>
  5. Custom Feed Description HTML: Input any Custom HTML you want used here, following this example: <p>{ikfb:feed_item:description}</p>
  6. Custom Feed Caption HTML: Input any Custom HTML you want used here, following this example: <p>{ikfb:feed_item:link}</p>
  7. Custom Feed Wrapper HTML: Input any Custom HTML you want used here, following this example: <div id="ik_fb_widget"><div>{ikfb:image}{ikfb:link}</div>{ikfb:like_button}<ul>{ikfb:feed}</ul></div>

Pro Branding Options

These are the Branding Options included in WP Social Pro. These options allow you to hide our branding from your admin and also allow you to hide 3rd party posters from showing up in the feed.
These are the Branding Options included in WP Social Pro. These options allow you to hide our branding from your admin and also allow you to hide 3rd party posters from showing up in the feed.
  1. Only Show Page Owner’s Posts: If checked, the only posts shown will be those made by the Page Owner. This is a good way to prevent random users from posting things to your FB Wall that will then show up on your website
  2. Hide Branding: If checked, our branding will be hidden from the WordPress admin

How to Output the Sidebar Widget

The widget can be found on the Appearance -> Widgets screen.
  1. Navigate to Appearance -> Widgets
  2. Drag the WP Social Widget to the widget area you want it to appear
  3. That’s it!

How to Output the Feed in a Page or Post

  1. Go to the Edit Screen of the desired Page or Post
  2. Input the shortcode [ik_fb_feed] where you want it to appear. There are several optional attributes you can set on the shortcode, to override the global settings: colorscheme="light or dark" use_thumb="true or false" width="250" num_posts="5" id="123456789". If ‘use_thumb’ is set to true, the value of ‘width’ will be ignored. If ‘use_thumb’ or ‘width’ are not set, the values from the Options page will be used. If id is not set, the shortcode will use the Page ID from your Settings page. All of the options on the widget will use the defaults, drawn from the Settings page, if they aren’t passed via the widget
  3. That’s it!

How to Output the Feed in a Theme file

  1. Open up the file you want to output the feed in
  2. Use the PHP function ik_fb_display_feed($colorscheme,$use_thumb,$width); where you want the feed to appear
  3. That’s it!

How to Add the Like Button to a Page or Post

  1. Go to the Edit Screen of the desired Page or Post
  2. Input the shortcode [ik_fb_like_button] where you want it to appear. There are several attributes you can set, including: url="https://some_url" height"desired_iframe_height" colorscheme="light or dark". If you don’t set a URL, the button will like the current page being viewed. Values for height must be integers.
  3. That’s it!

Click here to see an example Facebook feed.

How to Add the Like Button to a Theme file

  1. Open up the file you want to output the Like Button in
  2. Use the PHP function ik_fb_display_like_button($url_to_like,$height_of_iframe,$colorscheme); where you want the Like Button to appear
  3. That’s it!
  1. Go to the Edit Screen of the desired Page or Post
  2. Input the shortcode [ik_fb_gallery id="539627829386059" num_photos="25" size="130x73" title="Hello World!"] in the body of a post.
  3. Change “Hello World!” in the example above to whatever text you want to appear above your gallery.
  4. If no size is passed, it will default to 320 x 180. Size options are “2048×1152”, “960×540”, “720×405”, “600×337”, “480×270”, “320×180”, and “130×73”.
  5. If num_photos is not set, the Gallery will default to the amount set on the Dashboard – if no amount is set there, it will display up to 25 photos.
  6. The ID number is found by looking at the URL of the link to the Album on Facebook. For example, when looking at the following URL, you want to grab the number that appears directly after “set=a.” and before the next period – facebook.com/media/set/?set=a.539627829386059.148135.322657451083099&type=3

    In this case, the Facebook Album ID is ‘539627829386059’.

Click here to see an example photo gallery.

How to Output a Facebook Event Feed

  1. Outputting an event feed is the same as outputting a Page Feed. The difference is the ID that you pass to the shortcode – you will want to use the ID of the event (found by looking at the number in the URL of the event on Facebook.) Our software will automatically detect that you are displaying an event and will take care of the rest!

Click here to see an example Facebook event feed.