Social Stream Designer WordPress Plugin Documentation

Introduction

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

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 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. Now upload the plugin zip file (social-stream-designer.zip) that you have downloaded from your members area at Solwin Infotech website. After upload, install the zip and click on "Activate Plugin".

Plugin Installation

Plugin Upload

Plugin Install

Plugin Activation

2. Installation Via FTP

  1. Step 1. Download Social Stream Designer plugin zip file (social-stream-designer.zip) from your members area at Solwin Infotech website.
  2. Step 2. Extract Zip file. It will create "Social Stream Designer" folder with all plugin files & folder inside it. (Remember the extracted folder path).
  3. Step 3. Using your FTP program, upload the non-zipped plugin folder into the "/wp-content/plugins/" folder on your server.
  4. Step 4. Go to Dashboard » Plugins » Installed Plugins and find Social Stream Designer from plugin list.
  5. Step 5. Click on Activate to activate 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 Layout 3 Layout 4

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.

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

Set Search on the layout.

Note: Display Filter and Display Search option are available only for Listing layouts.

13. Slider Direction

Set slider direction like Horizontal, Vertical.

14. Display Slider Navigation

Click yes to set slider navigation.

15. Display Slider Play/Pause Button

Click yes to set slider play/pause button.

16. Slider Autoplay

Click yes to set the auto play slider.

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

18. Theme Color

Set theme color.

19. Background color

Set background color.

20. Padding

Set padding for layout.

21. Stream Heading

Set stream title. This will display on frontend.

22. Heading color

Set stream heading title font color.

23. Stream Sub-Heading

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

24. Sub-Heading color

Set stream sub-heading title font color.

25. Heading Alignment

Set stream heading alignment like left, right and center.

26. 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 (YouTube)

Share With YouTube

1. YouTube Key

Enter your YouTube key.

Social Authentication Settings (Vimeo)

Share With Vimeo

1. Vimeo User ID

Enter your Vimeo user ID.

2. Vimeo Client ID

Vimeo user authentication client ID.

3. Vimeo Secrets Key

Enter vimeo secret key.

Social Authentication Settings (Flicker)

Share With Flicker

1. Flickr User ID

Enter your flicker ID.

2. Flickr API Key

Enter your flicker API ID.

3. Flickr API Secret

Enter your flicker API secret.

Social Authentication Settings (Instagram)

Share With Instagram

1. Instagram User ID

Enter your instagram user ID.

2. Instagram Access Token

Enter your instagram access token.

Social Authentication Settings (Tumblr)

Share With Tumblr

1. Consumer Key

Enter your Tumblr consumer key.

Social Authentication Settings (Dribbble)

Share With Dribbble

1. Access Token

Enter your dribbble access token.

Social Authentication Settings (Foursquare)

Share With Foursquare

1. Access Token

Enter your foursquare access token.

Social Authentication Settings (Soundcloud)

Share With Soundcloud

1. Your app Client ID

Enter your app client id.

Social Stream Designer Plugin Features

Translation

The 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/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, Social Stream Designer will work with any WordPress setup. If you are facing any compatibility issue with the Social Stream Designer plugin, then please contact for plugin support .

Thanks For Using Social Stream Designer Plugin!

We would like to thank you for using our Social Stream Designer plugin! If you have any difficulties with the 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.