WP Social Stream Designer WordPress Plugin Documentation

Introduction

Thank you for the using Wp Social Stream Designer Plugin. We are glad that you have chosen our plugin for your website.

Wp Social Stream Designer is a WordPress plugin to generate social feeds. This plugin is fully responsive and mobile-friendly with powerful backend options.

This document is written very carefully by keeping the mindset that it should be easily understood for beginner to advanced user or developers.

1) Getting Started: This section will very helpful for quick start and understand how the plugin works.
2) Detailed Document: This section explains everything about Wp Social Stream Designer plugin with every setting.
3) Other: This section provides information about miscellaneous items like plugin features, FAQ, License Key etc.

If you have any query that is beyond the scope of the document, please feel free to contact us at support@solwininfotech.com

Social Stream Designer
We offer plugin customization. Get in touch for a quote.
Quick Search Tip: Access your browser search with keyboard shortcut "Crtl + F" (for: Windows) or "CD + F" ( for: OSX) for instant results.

Installation

1. Installation Via WordPress Admin area

  1. Step 1. Log into your WordPress admin area.
  2. Step 2. Click on the left side plugin menu.
  3. Step 3. Now at the top you can see the Add New button, click the button.
  4. Step 4. Again at the top you can see/view Upload Plugin button, click the button.
  5. Step 5. Extract that wp-social-stream-designer.zip file in your local pc and find there another plugin file (wp-social-stream-designer.zip) that you have downloaded from wordpress.org.
  6. Step 5. Now upload the plugin zip file (wp-social-stream-designer.zip). After upload, click on "Install" button and click on "Activate Plugin".

Plugin Installation

Plugin Upload

Plugin Install

Plugin Activation

2. Installation Via FTP

  1. Step 1. Extract the above selected zip file (wp-social-stream-designer.zip). It will create 'wp-social-stream-designer' folder with all plugin files & folder inside it. (Remember this extracted folder path)
  2. Step 2. Using your FTP program, upload the non-zipped plugin folder into the "/wp-content/plugins/" folder on your server.
  3. Step 3. Go to Dashboard » Plugins » Installed Plugins and find WP Social Stream Designer from plugin list.
  4. Step 4. Click on Activate to activate Wp Social Stream Designer.
Note: Before going to the detail document, preview the "Quick Guide" of the "Social Stream Designer".

Social Stream Layouts

Share With Setting

It's a simple view of created and share possible options.

Add New Layout (General Settings)

Share With Setting

1. Social Stream

Select a social platform to stream from the drop-down.

2. Title

Set layout title.

3. Select Page for Stream

Select page for setting social stream.

4. Order By

Set social feed order by Date, Random, Social Media default order.

5. Order

Set feeds short order by Ascending and Descending.

6. Private Stream 

Set Stream only for logged in users.

7. Hide Stream on a Desktop 

Set hide stream on desktop device.

8. Hide Stream on a Mobile 

Set hide stream on mobile device.

9. Display Stream Meta

Display stream meta in each post.

10. Custom CSS

Set Custom css for feeds.

Select Card Layout

Share With Setting

1. Select Layout

Select social stream layout type of given layouts like below.

Layout 1 Layout 2
Note: WP Social Stream Designer provide you 2 layouts in free version.

2. Drag & Drop Builder

Arrange section position using drag and drop.

Layout Settings

Share With Setting

1. Layout Type

Set stream layout type like Listing, Slider, Timeline.

Note: WP Social Stream Designer provide you Listing layout in free version.

2. Listing Style 

Set listing style like Masonry, Justify.

Note: This option is only available for layout type 4.

3. Justify Grid Image Height 

Set justify grid image height.

Note: This option is only available for layout type 4 and listing style is justify.

4. Number of Feeds in One Row (Desktop)

Set number of feed in on row for desktop device.

5. Number of Feeds in One Row(Laptop)

Set number of feed in on row for Laptop device.

6. Number of Feeds in One Row(Rotated Tablet)

Set number of feed in on row for Rotated Tablet device.

7. Number of Feeds in One Row(Tablet)

Set number of feed in on row for Tablet device.

8. Number of Feeds in One Row(Rotated Mobile)

Set number of feed in on row for Rotated Mobile device.

9. Number of Feeds in One Row(Mobile)

Set number of feed in on row for Rotated Mobile device.

10. Display Share Icon

Set share icon on the layout.

11. Display Filter 

Click yes to set social stream filters for all feed based on selected social button.

12. Slider Direction 

Set slider direction like Horizontal, Vertical.

13. Display Slider Navigation 

Click yes to set slider navigation.

14. Display Slider Play/Pause Button 

Click yes to set slider play/pause button.

15. Slider Autoplay 

Click yes to set the auto play slider.

16. Display Slider intervals 

Set slider autoplay time interval.

Note: Slider Direction, Display Slider Navigation, Display Slider Play/Pause Button, Slider Autoplay, Display Slider intervals option are only available for slider layout.

17. Theme Color

Set theme color.

18. Background color

Set background color.

19. Padding

Set padding for layout.

20. Stream Heading

Set stream title. This will display on frontend.

21. Heading color

Set stream heading title font color.

22. Stream Sub-Heading

Set stream Sub-title. This will display on frontend.

23. Sub-Heading color

Set stream sub-heading title font color.

24. Heading Alignment

Set stream heading alignment like left, right and center.

25. Heading Background color 

Set stream heading background color.

Card Settings

Share With Setting

1. Card Border 

Set Border type, size and color for social cards.

2. Card Border Radius 

Set border radius for social cards.

3. Card Background Color 

Set card backgound color.

4. Card Box Shadow 

Set box shadow for card.

5. Card Extra Class

Set class for custom css.

Share Icon Settings

Share With Setting

1. Display Social Icon

Click yes to set social icon.

2. Social Share Type

Select social icon type from drop-down.

3. Social Share Icon Style

Set social icon style like default and custom.

4. Select Image Layout

Select social icon layout from list.

Social Icon type
Note: This option are only available for Social Share Icon Style is custom.

5. Display Sticky

Set sticky icon on the layout.

6. Display Sticky On

Set sticky icon place like media or author section.

7. Text Border Radius

Set border radius for text content.

8. Icon Border Radius

Set border radius for icon content.

Note: This option are only available for Social Share Type is icon/icon + text.

7. Alignment

Select text alignment for content.

9. Position

Select a social icon position.

10. color

Set share icon/text color.

11. Background color

Set share icon/text background color.

Title Settings

Share With Setting

1. Display Title

Click yes to set title.

2. Display Title Link

Click yes to set title link.

3. Title font size

Set title font size.

4. Title Color

Set title font color.

5. Title Hover Color

Set title font hover color.

6. Title Background Color 

Set title background color.

7. Title Padding 

Set padding for the title.

8. Title Margin 

Set margin for title.

9. Title Font Weight 

Set font weight for title.

Content Settings

Share With Setting

1. Display Content

Click yes to set content.

2. Content Word Limit

Set content word limit.

3. Content Font Size

Set content font size.

4. Content Color

Set color for content.

5. Content Link Color

Set link color for content.

6. Content Background Color 

Set background color for content.

7. Content Padding 

Set padding for the content.

8. Content Margin 

Set margin for content.

Media Settings

Share With Setting

1. Display Feeds Without Media

Click to yes to set feeds Without media.

2. Display Default Image

Click to yes to set default image.

Note: This option are only available for Social Share Type set icon/icon + text.

3. Upload Default Image

Set Default image on the feed.

Note: This option are only available for Display Default Image set yes.

4. Margin 

Set margin for media

5. Display Gallery Slider Arrows 

Set gallery slider arrows for media.

6. Gallery Slider Autoplay 

Set gallery slider autoplay.

5. Gallery Slider Speed (ms) 

Set gallery slider speed.

Author Content Settings

Share With Setting

1. Display Author Box

Click to set author box.

2. Author Image Border Radius

Set border radius for author box.

3. Author Box margin 

Set margin for author box.

4. Author Box Padding 

Set the padding in the author box.

5. Author Box Background Color 

Set author box background color.

6. Author Title Color

Set title color for author box.

7. Author Hover Color

Set author box hover color.

8. Author Meta Color

Set author box meta color.

9. Display Screen Author Name

Click to set author name in the author box.

10. Display Time

Click to set time for author box.

Count Bar Settings

Share With Setting

1. Color

Set color of count bar.

2. Background Color 

Set background color of count bar.

3. Hover Color 

Set hover color of count bar.

4. Border 

Set border size, type and color of count bar.

5. Bar Padding 

Set padding for count bar.

6. Bar Margin 

Set margin for count bar.

Pagination Settings 

Share With Setting

1. Pagination Type

Select pagination type from drop-down.

2. Maximum Posts to Display

Set maximum post limit for pagination.

3. Pagination Layout 

Select pagination layout from drop-down.

4. Load More Button Layout 

Select load more button layout type.

Note: This option available only for load more option from "Pagination Layout" setting.

5. Load More Effect 

Select load more content animation effect.

6. No. of Posts To Display Per Page

Set a post limit for the page.

Pagination Paged Settings 

Share With Setting

1. Pagination Type

Select pagination type paged from the drop-down.

2. Pagination Layout

Select pagination layout from drop-down.

3. Number Of Posts To Display Per Page

Set the number of pages to display per page.

4. Maximum Posts To Display

Set number of posts display.

Note: Select '-1' if you want to display all the feeds..

Pagination Load More Button Settings

Share With Setting

1. Pagination Type

Select pagination type load more button from the drop-down.

2. Load More Button Layout 

Select load more button from the drop-down.

3. Load More Effect 

Select load more effect from drop-down.

4. Number Of Posts To Display Per Page

Set the number of pages to display per page.

Note: This option available only for load more option from Pagination Layout setting.

5. Maximum Posts To Display

Set number of posts display.

Note: Select '-1' if you want to display all the feeds..

Pagination Load On Page Scroll Settings 

Share With Setting

1. Pagination Type

Select pagination type on page scroll from the drop-down.

2. Load More Effect

Select load more effect from the drop-down.

3. Number Of Posts To Display Per Page

Set the number of pages to display per page.

Note: Select number of feeds you want to display in single page.

5. Maximum Posts To Display

Set number of posts display.

Note: Select '-1' if you want to display all the feeds.

Social Feeds Settings

Share With Setting

List of all create social feeds.

Add Social Feeds

Share With Setting

1. Add Feed Name

Set feed name.

2. Select Feed

Select social platform to make feeds.

3. Select Feed Type

Select feed type from the time line.

4. Feed Limit

Set feed limit.

5. Refresh Feeds On

Set feed refresh time interval.

Social Authentication Settings (Twitter)

Share With Twitter

1. Twitter Consumer Key

Enter your twitter consumer key.

2. Twitter Consumer Secret

Enter your twitter consumer secret key.

2. Twitter Access Token

Enter your twitter access token key.

4. Twitter Access Token Secret

Enter your twitter access token key.

5. Twitter Screen Name

Enter your twitter screen key.

Social Authentication Settings (Facebook)

Share With Facebook

1. Facebook Page ID

Enter your Facebook page id.

2. Consumer Secret

Enter your customer secret code.

3. Facebook ID

Enter your Facebook ID.

4. User Access Token

Enter your user access token.

Social Authentication Settings (Instagram)

Share With Instagram

1. Instagram Access Token

Enter your instagram access token.

Wp Social Stream Designer Plugin Features

Translation

The Wp Social Stream Designer is language compatible, thus can be translated into multiple languages. You can use POEdit plugin for translation.

  1. Step 1. Install Poedit tool and open it.
  2. Step 2. Open .POT file from /wp-content/plugins/wp-social-stream-designer/languages/ that you want to translate.
    .pot file editin in Poedit tool
  3. Step 3. Now, click on "Save".
  4. Step 4. A popup will appear, enter your Language code ( Ex :- "ca_CA" for English (Canada)) in language option.
  5. Step 5. Then select source path tab and you have to modify this path to the full path of your plugin that you want to translate.
  6. Step 6. Then press ok button.
  7. Step 7. Then gives the file name like this social-stream-designer-ca_CA.po for English (Canada) language.
  8. Step 8. Then save file in the language folder in plugin that you want to translate and all strings appear in your Poedit editor. POT file
  9. Step 9. Select your string that you want to translate and in bottom side there are two options, one is Source Text and another one is Translation. Translate string
  10. Step 10. Source Text keep as it is and in the Translation section, enter your translated string of selected string that you want to translate and then save it.
  11. Step 11. Repeat step 10 untill your all strings to be translate.
  12. Step 12. Now you will get two separate files – a .po file and a .mo file.

    Note : When you save the files, you must name them according to your language code. Find a list of language codes at WordPress in your Language. For example, the language code for English (Canada) is ca_CA, so you would save the translated files as ca_CA.po and ca_CA.mo.

    PO MO file
  13. Step 13. Then go to wp-config.php file then enter the below code.
    define('WPLANG', 'Your language code'); for Ex.(ca_CA for English (Canada)) then save it.
  14. Step 14. Select language from admin side, Go to Dashboard » Settings » General in that check Site Language options.

    Select language
  15. Step 15. Check language prefix in front end, view HTML.

    Language prefix
Note: For more about translating WordPress themes please visit the following link : https://developer.wordpress.org/themes/functionality/localization/

FAQ

1. Will Social Stream Designer work with my theme?

Yes, Wp Social Stream Designer will work with any WordPress setup. If you are facing any compatibility issue with the Wp Social Stream Designer plugin, then please contact for plugin support .

Thanks For Using Wp Social Stream Designer Plugin!

We would like to thank you for using our Wp Social Stream Designer plugin! If you have any difficulties with the Wp Social Stream Designer plugin or need any additional service, do not hesitate to contact us.

Just contact us on support.solwininfotech.com

We are very happy to assist you!

Credits

I've used the following jQuery Plugins as listed.