Easy Social Feed

Concrete5 Add-on

• created: 02/04/2017
• latest update: 11/17/2018
• by: Dovydas Kukalis
• email: dovydas@kukalis.com

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

• Minimum Concrete5 version - 5.7.0.4
• PHP cURL. It should be installed by default in most servers however in some cases you might need to install it manually. If you are using Ubuntu, connect ot SSH and run 'sudo apt-get install php5-curl'

Plugin is wrapped inside a class '.social-feed' and has a unique ID 'social-feed-{ID}' so it should not interfere with your website's styling. Inside there is a list of posts/tweets in a simple unordered list format. Classes are prefixed with 'social-feed-'.

You can easily customize colours from a plugin's edit window (see below) however if you want to further customise it to match your website, you can simply override styling in your CSS file:

.social-feed ul li{ background-color: blue; }

There is only 1 CSS file used (view.css) located in /packages/social_feed/blocks/social_feed/view.css. It is not recommended to edit any of plugin's files as it may be overwritten after each update. However you can override a styling in your theme CSS file.

Scripts required by the plugin:

• jQuery - reusing same version which comes with your Concrete5 installation
• timeago - plugin to convert a date to a more familiar format. More info: http://timeago.yarp.com
• masonry - grid layout library. More info: http://masonry.desandro.com
• imagesloaded - detecting when images are loaded. More info: http://imagesloaded.desandro.com

• Unzip the folder "charts" in your site's packages/ directory
• Login to your site as an administrator
• Find the Extend concrete5 -> Add Functionality page in your dashboard
• Find this package in the list of packages awaiting installation
• Click the "install" button

A new block called "Easy Social Feed" will be created. You will see it in the list of all blocks installed on your website, in the section "Social Networking".
 

Posts to display - how many posts are loaded initially

Width - width of plugin view

Height - height of plugin view. Adds a scrollbar if there are more posts than available space

I am using an automated job to update data- select this checkbox if you are using a cron job to fetch new posts. More info

Update every (minutes) - option only available if automated job is not selected. Once user loads your website, a plugin will automatically check if it's time to fetch new data from social websites

Display load more button - if you select this option, user will be able to load more posts than it is loaded on initial load (Posts to display)

Display images - whether to also load images or show a text only

There are 3 templates: default, tabs and masonry. You can customize base colors.

Templates:

• Default
  
  
• Masonry
  
  
• Tabs
  
  

1. Apply for a Twitter developers account at https://developer.twitter.com/en/apply/account if you haven't got one already.
2. Create a new app.
3. Go to "Keys and  tokens" tab.
4. Create access token & access token secret keys.
5. Copy the keys into plugin settings.

1. Go to https://developers.facebook.com/ and login with your Facebook account
2. Click "My Apps" on the right of top menu and then click "Add a new app"
3. Fill in required fields
4. Go to Settings->basic to find your App ID and App Secret keys 
   
   
5. App must be approved by Facebook before we can use it. Go to "App Review" page.
6. Click "Start submission" and choose "Page Public Content Access" from permissions list.
7. Click "Add 1 item". When popup closes, fill in all required details and submit app.
8. App Access Token can be found on https://developers.facebook.com/tools/access_token/. Find the row with your recently created app and copy App Token
9. To find your Page ID you can use any free online tool like http://findmyfbid.com/ or you can follow official or follow the steps here https://www.facebook.com/help/community/question/?id=10209246525787871

1. Go to https://www.instagram.com/developer/ and login with your Instagram account
2. Create a new client and fill in all required fields
3. Click "Manage Client" and you will find your Client ID and Client Secret keys 
   
   
4. To get an Access Token you can use any free online tool like http://instagram.pixelunion.net/
5. To find your User ID, you can use any free online tool like https://smashballoon.com/instagram-feed/find-instagram-user-id

1. Go to https://console.developers.google.com/ and login with your Google account
2. Go to Credentials tab https://console.developers.google.com/projectselector/apis/credentials and create a new project
3. Fill in all required fields
4. Click "Create credentials" and select "API Key" from a dropdown 
   
   
5. A modal will popup with your generated key
6. To find your Channel ID, follow these steps https://support.google.com/youtube/answer/3250431

It is recommended to set up an automatic job to fetch new posts. Automatic job periodically executes a script which fetches new social media posts. However even if you don't set up an automatic job, a plugin will still work. Just specify the value in "Update every (minutes)" field. Then basically with every request to get feed data, a plugin checks if it's time to update the feed. Updating can take up to 5 seconds so the user will need to wait. In order to avoid it you need to use an automated job. 

When you installed this package, a new job named "Update Social Feed Data" was created. You can find it System & Settings -> Optimization -> Automated Jobs or by going to this link in your website /index.php/dashboard/system/optimization/jobs. 

You will see a new job added and clicking on the "clock" icon, will open a modal with a few options.

The first option is easier to set up but the second one is recommended. If you run your website on private server with SSH access on Ubuntu, you can follow this tutorial how to set it up https://help.ubuntu.com/community/CronHowto. If you are using shared hosting, cron jobs should be in your control panel.

I recommend to set it run every 2-3 minutes as it's designed to update 1 block at a time (always update the oldest block) so you will not exceed API calls limit and update the blocks quite frequently.