JA Social Feed Plugin

Imports content automatically from popular social channels: Facebook, Twitter, Youtube ...

Download the latest version of JA Social Feed plugin

Download Now

From your back-end setting panel, go to: "Extensions > Extension Manager", browse the extension installation files then hit the "Upload and Install"

Joomla 4 extension installation

Joomla 4 extension installation

The plugin allows you to import content automatically from popular social channels: Facebook, Twitter, Youtube, Vimeo, Instagram Flickr and Pinterest then save the content as Joomla articles or K2 articles. To import content, you have to follow the steps below.

Workflow of JA social plugin

Step 1: enable the plugin

In order to import content, you have to enable JA Social plugin

enable Joomla 4 extension

Step 2: Configure the Global settings

In the Global setting panel, you will see settings for import content settings

joomla social feed plugin settings

Parameter explanation:

  • Enable the social channels that you want to import content from. In each enabled social channel, it will import content from enabled profiles only.
  • URL converter services: select service to import content (http://untiny.com/ or http://realurl.org/).
  • Cron Interval: set the duration to import content AUTOMATICALLY from enabled social channels, click "Run Now" to import content immediately.

Sources

JA Social Feeds plugin allows you to import content from many social channels and RSS. Enable the social channels you want to import.

joomla social feed plugin social settings

Note: The plugin will import from enabled profiles only.

Item Settings: configure to import intro text.

joomla social feed plugin item settings

API settings

To import content from a social channel, you may need to provide API required by the social. Following is the social that requires API and Acess Token. The detailed guide to get the API, Access token is provided in the settings for each social.

Facebook: Access token setting

joomla social feed plugin facebook api settings

Instagram: Access token setting

joomla social feed plugin instagram settings

Twitter: Oauth Settings

joomla social feed plugin twitter api settings

Youtube: API key

joomla social feed plugin youtube api settings


Step 3: create profiles for social channel

Once you install the plugin, you will see numbers of profiles in each supported social channel, these profiles settings are valid so you can use the profiles to import content to your site.

joomla social feed plugin profile settings

You can also create new or customize the default profiles

Create new profile

joomla social feed plugin create new profile

Delete a profile

joomla social feed plugin profile settings

Article settings: save imported content

You can save the imported content as Joomla articles or K2 articles to selected category. You can also configure other information for the imported content - depends on each social and profile.

joomla social feed plugin profile settings

Parameter explanation:

  • Author: select the author from the user list for articles imported from the profile
  • Target Component: you can save the imported content as Joomla article for K2 articles. Incase you want to save as K2 articles, your site must have K2 installed.
  • Category: select the category corresponding to select "Target Component" to save the imported content to
  • Title Type: you can set the title for articles imported by Author name or custom text. When you select Custom Text, add the text that will be article title imported from the profile.
  • Alias Type: Select Alias Type for the Articles URL
  • Maximum Length: Define the no. for Title length
  • Source Text: add the text that will be displayed as source

Advance settings: save image, import limit

joomla social feed plugin image settings

Parameters explanation:

  • Update Article: if Yes, when content from source is changed, it will be updated to your site when you import content.
  • Use Image: if Yes, the plugin will automatically extract image from the URL that user shares then add it into article for displaying. If No, it will import text only.
  • Minium | Maximum Image Width: set the minimum size for image to be used in articles for displaying
  • Save Image: you can select to saved the qualified image to your site hosting. The images will saved in folder: images/jasocial_feed.
  • Import Limit: set the maximum items to be imported from the profile each time you import content.

Save Image: You can select to save images to your site hosting. In profile setting of each social channel, you will see field Save image under Advanced settings, enable this option so when you import content, images will be saved to your site hosting. The images are located in images/jasocial_feed.

Saved images
Note: after you work with a profile, you have to save the profile. The saving button for the plugin (on top right corner) is not applied for saving the profile. Your work with the profile will be lost if you use the saving button of plugin.

joomla social feed plugin save profile

Step 4: display content in your site

When you have content stored in your site, you can now display them in your site. The way you display them is up to you.

In each profile of any social channel, it includes setting of: Account settings, Article settings, and Advanced settings

Get Facebook API

Facebook updated Graph API v13.0

Things to Note :

  • Your site must support https as a request of Facebook to get the data.
  • Account Login to Facebook must be Admin of the Page you want to get the data.
  • The Facebook profile must be verified at the first time Cron.
  • Facebook profile use Facebook fan page ID, Fanpage Name no longer supported.

1. Create Facebook Application ID

Step 1: access and create account: https://developers.facebook.com/async/registration/

Step 2: create an application https://developers.facebook.com/apps/create/.

Please make sure an application type is Type > Consumer.

joomla social feed facebook app id

Step 3 - In the Left menu section, access Settings >> Basic, enter the info and save the settings. And take a note on App ID, App Secret. These will be used in the backend Joomla setting.

joomla social feed facebook app id

Next, go to Settings > Advanced: API versionAdd product Login must be v13.0

joomla social feed facebook app id

2. Product settings

Add product Login: click the plus icon to add New Product and choose Facebook Login then set it up.

Then add your site URL: Save and Click Next.

Next, access Settings and enter

  • Redirect URIs,
  • Domains for the JavaScript SDK,
  • Turn on Login with JavaScript SDK

joomla social feed facebook app id

2.1 Get Facebook Fan Page ID

Access Facebook Graph API Explorer https://developers.facebook.com/tools/explorer?method=GET&path=me&version=v13.0.

And follow steps through the image in order to get Page ID.

joomla social feed facebook app id

Then add permissions for pages

joomla social feed facebook app id

3. Import content

Back to JA Social Feed plugin setting on your site and paste the ID you get to Facebook Settings fields.

On the Facebook profile, enter Facebook fan page ID (must be ID), and change the setting as you want then save the settings.

Before Verifying Fanpage ID, you should make sure your site are running on https://

joomla social feed facebook app id

Next step: Click to Login with Facebook to get the account set with plugin.

joomla social feed facebook app id

In case the permissions: read content posted, read user content, show a list,... enable these.

After that, select pages

joomla social feed facebook app id

Successfully verify

joomla social feed facebook app id

Allow Social feed to manager your facebook pages to fetech the content

verify facebook app

Now you can run the Cron to fetech the latest content


Instagram Access Token

Instagram no longer supports free API to get other accounts not belonging to the specific user.

Create account and login to create app https://developers.facebook.com/apps/create/

1.1 Choose Consumer

joomla social feed instagram access token settings

1.2 Click next and filling the information

Then add Instagram Basic Display https://developers.facebook.com/apps/your-app-id/dashboard/

joomla social feed instagram access token settings

3. In Basic Display, create a new app.

joomla social feed instagram access token settings

3.1 Set Valid OAuth Redirect URIs

joomla social feed instagram access token settings

The URLs need to be the same in Plugin setting

joomla social feed instagram access token settings

Your-app-id

joomla social feed instagram access token settings

3.2 Choose Add or Remove Instagram Testers, scroll down and add your IG account https://developers.facebook.com/apps/your-app-id/roles/roles/

joomla social feed instagram access token settings

Then access https://www.instagram.com/accounts/manage_access/

joomla social feed instagram access token settings

3.3 Add permissions: instagram_graph_user_profile, instagram_graph_user_media https://developers.facebook.com/apps/your-app-id/instagram-basic-display/basic-display/

joomla social feed instagram access token settings

Remember to Save Changes after all actions

Take note these information: IG App ID, IG App Secret, Valid OAuth Redirects URIs. These are going to be used in the plugin setting.

joomla social feed instagram access token settings

Section Plugin setting

Filling the fields with your information in the IG basic display app. Then Click to this link to get Access token key.

joomla social feed instagram access token settings

The result will be displayed as a token and a long live token. These tokens still work well.

joomla social feed instagram access token settings

Take note on profile Status & Category section

joomla social feed instagram access token settings

Twitter profile settings

Twitter profile settings are almost same as Facebook profile settings, just make sure you add valid Twitter Search


Youtube profile settings

You can import videos from a youtube account or a playlist.

joomla social feed youtube settings

Youtube account

joomla social feed youtube settings

Youtube playlist

joomla social feed youtube settings

Youtube account and article settings

Enter the youtube username that you want to import content from. Other settings are the same as settings in Facebook profile settings.

Video settings

joomla social feed youtube settings

Parameters explanation:

  • Width | Height: set the size of the video to be saved in an article for displaying.
  • Show Suggested Videos: if Yes, the suggested videos will be displayed when the video finishes.
  • Use HTTPS: the secure counterpart to HTTP, wraps a layer of encryption around the information traveling between your computer and a web server.T his is typically used to provide enhanced privacy and security for services like web browsing, email and instant messaging.
    Many sites that offer HTTPS support including content from other sites. When some parts of the site do not access using HTTPS, browsers generate a "mixed content" warning since not all items on this page are secure. Sites that use HTTPS and add default Youtube video embeds could generate this warning. To avoid that, and to allow your site to support HTTPS more consistently, you can choose the new Use HTTPS embed option.
    It is important to note that while embed components are all supported using HTTPS and do not generate the mixed content error, we do not yet support video streams over HTTPS.
  • Enable privacy-enhanced mode: Like most web properties, YouTube uses what are known as cookies to collect information. Cookies can be used to store data about the user's computer or the user watching a video. YouTube uses cookies to help maintain the integrity of video statistics, prevent fraud and to improve the site experience, among other things. We use cookies on both youtube.com and on videos embedded from youtube.com.
    We've been working to give our users more options and control over these cookies. One such option is the privacy-enhanced mode for our embed player. This mode restricts YouTube's ability to set cookies for a user who views a web page that contains a privacy-enhanced YouTube embed video player, but does not click on the video to begin playback. YouTube may still set cookies on the user's computer once the visitor clicks on the YouTube video player, but YouTube will not store personally-identifiable cookie information for playbacks of embedded videos using the privacy-enhanced mode.
  • Use old embed code:There are two styles of embed codes that are available for YouTube videos. The new embed code begins with "_QQ_"<iframe..."_QQ_" and supports both Flash and HTML5 video. The older style of embed code begins with "_QQ_"<object..."_QQ_" and only support Flash playback.
    Some services only support the older "_QQ_"<object..."_QQ_" embeds. If you do encounter a site that rejects your "_QQ_"<iframe..."_QQ_" embed code, the recommended course of action is that you use the older "_QQ_"<object..."_QQ_" code for the time being.

Twitter profile settings

1. Get Twitter OAuth information

Since 2013-06-11, Twitter has stopped supporting API v1 and fully moved to API v1.1

In API v1.1, Twitter deny non-Authorized request, that means you need to provide the information below to authorize your request.

To get content from Twitter, we need to get OAuth information. The OAuth includes: Consumer key, Consumer secret, Access token, Access token secret.

Step 1: create new application

#1: Login the site: https://developer.twitter.com/apps/with your twitter account, if you do not have a twitter account yet, please register one.

#2: Now Click on button: Create a new application

create new application

#3: Add all requred information in this form then creat the twitter application

add required information

Step 2: Create my access token

When application is created successfully, open the Keys and Access Tokens tab and hit the buttons: Regenerate Consumer Key and Secret to generate consumer key then hit the button: Create my access token to create access token.

create access token

Step 3: Add OAuth information to the JA Social Feed plugin setting

After access token is created, copy the info to add to the Twitter: OAuth settings setting panel under the Global tab of JA Social feed plugin setting.

Get OAuth information

3.1 Get Tweet timelines:

Twitter introduced tweets timeline option that allow to get a list of tweets for aggregated stream of Tweets. To use this option you musth change the name of API Endpoint.

Here is list of supported Endpoints :

  • GET statuses / home_timeline
  • GET statuses / user_timeline
  • GET statuses/mentions_timeline

GET statuses / home_timeline :It allows you to show tweets only from the authenticated user and the user he is following. It allow upto 800 tweets on timeline. More infromation here

GET statuses / user_timeline :It allows you to show tweets only from the authenticated user with screen_name or user_id parameters. It returns up to 3200 tweets from a user. The screen_name is the screen name of the user for whom to return results. The user_id is the ID of the user for whom to return results. More infromation here

GET statuses/mentions_timeline :It allows you to show tweets only from the authenticated user (20 most recent mentions). The tweets will contain @screen_name) More infromation here

Note : If config are home_timeline, user_timeline or mentions_timeline, plugin will fetch data of user that already config on Twitter: OAuth settings

3.2 Support advanced search api

JA Social feed extension support standard search API it allows simple queries against the indices of recent or popular Tweets. Here is list of Twitter search API.

joomla social feed youtube settings

2. Twitter profile settings

Twitter profile settings are almost same as Facebook profile settings, just make sure you add valid Twitter Search

joomla social feed twitter settings


Vimeo profile settings

joomla social feed youtube settings

1. Vimeo account and article settings

joomla social feed youtube settings

Parameters explanation:

  • Type: supported vimeo types (Username, Album, Group or Chanel)
  • Username or ID: add the correct Vimeo Username or ID to import content from.
  • Target Component: select to save imported content as Joomla articles or K2 articles.
  • Category: select category where imported content will be saved to.

2. Video and advanced settings

joomla social feed youtube settings

Parameters explanation

  • Width | Height: set the size of video to be saved in article for displaying.
  • Show Suggested Videos: if Yes, the suggested videos will be display when the video finishes.
  • Auto play: select Yes if you want video to auto play when user open article contain the video in front-page.
  • Loop: loop video or not.
  • Use old embed code:There are two styles of embed codes that are available for YouTube videos. The new embed code begins with "_QQ_"<iframe..."_QQ_" and supports both Flash and HTML5 video. The older style of embed code begins with "_QQ_"<object..."_QQ_" and only support Flash playback.
  • Some services only support the older "_QQ_"<object..."_QQ_" embeds. If you do encounter a site that rejects your "_QQ_"<iframe..."_QQ_" embed code, the recommended course of action is that you use the older "_QQ_"<object..."_QQ_" code for the time being.

  • In the advanced setting pannel, you can select to use image in imported content or not, update article and set limitation for number of items to be imported.

Flickr profile settings

joomla social feed youtube settings

You can display Flickr photos from specific user or a tag.

If your type of photo is :

  • ID - You must enter the ID of your flickr account
  • Tags - You can enter name of tags you want
  • Favorite - You must enter the ID of your flickr account
  • Album - You must enter the ID of your flickr account and the id of the album you want

Pinterest profile settings

You can import feeds from one or multiple Pinterest usernames

joomla social feed youtube settings

Parameters explanation:

  • Pinterest Username: add Pinterest username that you want to import content from
  • Pinterest board: add the pinterest board that you want to import content from. Leave it blank if you want import LATEST PINS.
  • Target component: select to save imported as Joomla articles or K2 items
  • Category: select category that imported content will be saved to

RSS settings

JA Social Feed Plugin allows you to import data automatically from RSS feeds channels.

General Settings

In the plugin configuration page, open the tab "RSS", create profile, add RSS feed link to get data from.

joomla social feed rss settings

RSS Advanced Settings

joomla social feed rss settings

You can customize RSS item element to get data. To view this, you can check RSS feeds page you want to get data from. For example, I want to get RSS feeds from JoomlArt blog, I will:

#1: View rss feed page: http://feeds.feedburner.com/joomlart/blog

#2: View source of the page: view-source:http://feeds.feedburner.com/joomlart/blog and copy the souce code.

#3:Open http://www.xmlviewer.org/, paste the source code here and check the Tree View.

Rss article setting

Now, for each item, you will see list of content type and the tag title: title, link, description, dc:creator, pubDate, guid, eedburner:origLink. Those elelements can be different from other RSS feed page. Update the tag title for corresponding field in the JA Social Feed - RSS Advance Settings panel.

Rss article setting

Advanced Settings

Rss advanced setting

  • Update Article: Enable this option if you want imported articles can get updated content if the source content is updated. Articles will be updated when you import again.
  • Save Image: Enable this option so images will be saved to your site folder instead of loading it from source.
  • Import Limit: set maximum number of posts to be imported each time.

Crawler Settings

JA Social Feed Plugin support Crawler, that allow you to fetch the article content from list articles in RSS feed or from an HTML page. If you have a list of articles/posts on RSS feed and you would like to import them on your Joomla articles this option is the best choice.

Identity Code Settings

An Identity code is required to fetch the data from list of feeds. It has 3 parts: [selector], [type], [attribute]. Each part will be separated by vertical bar ( | ).

The [attribute] has 2 parts: [name], [value]. They are separated by colon ( : ). The final code will look like below:

selector | type | name:value

  • [selector] : is css selector. Ex: #content, .kcn-content. Crawler can find elements by using this.
  • [type]: support 3 types: [text], [attr], [html], [outerhtml]. If the [type] is empty, Crawler will see it as [text]. This helps Crawler know which value type do you want to get from elements.
  • [attribute] with [name] is attribute name, [value] is attribute value.

Crawl example

Lets take some example .

  • if you want to find element has id “content”, and use its html, just put this code #content | html
  • if you want to find element has class “kcn-content”, and use its text, just put this code .kcn-content | text
  • if you want to find list link that has class “related-item” and use its href attribute, see this code a.related-item | attr | href

If you want to add class “center” to images that has class “content-image”, just use this code ( note: use this code outside of “Classes to Remove” setting won’t add any class) img.content-image | attr | class : center

Setup Crawler Url

crawl article setting

  • Crawler Url: Put the url you want to scan articles. Support rss, html.
  • Uri Root: Root url of the site that you fetch content from.
  • Item Element: your identity code that helps to find list link on Crawl Url

For example view source feed of Joomlart see the link wrap in item > guide

crawl article view source

Now Click to Verify button to know which links Crawler’s gonna get content.

Please note In Verify page, it will show the demo result of one article.

crawl data view source

Note: better to check those links works or not. If not work, check the “Item Element” config.

Article settings

Now you got a collection of article links. This section will only apply for content fetched from those links.

  1. Target Component
  2. Category
  3. Author
  4. Author alias
  5. Title:
    • (i) From HTML: add HTML markup code like Identify Code part where title is stored.
    • (ii)Custom: insert custom text
  6. crawl html view source

    If value field is wrong, or leave blank,You will get the URL to Title

  7. Alias:
    • From title: base on title get in above setting
    • Custom: insert custom text
  8. Meta Description
    • From HTML: add HTML markup code like Identify Code part where the meta description is stored
    • Custom: insert custom text
  9. Full Text Element
  10. Links in Full Text: removed or kept in article
  11. Published Date:
    • From HTML: add HTML markup code like Identify Code part where time published is stored, time will be convert to timestamp of Server
    • Leave blank: get time added article to system Time added.
  12. Intro Image:
    • From HTML: add HTML markup code like Identify Code part where image is stored
    • Custom: user load custom image. Leave blank or get wrong HTML Markup: No image is inserted.
  13. Elements to Remove: add HTML markup code like Identify Code part where element need to be removed, is stored Each Element in one line.

    crawl html element to remove

    All HTML markup code insert to field (expect Item Element) must be unique to get the right content. If not unique, if will combine all value of all element

Special Settings

There are 5 special settings: Elements to Remove, Classes to Remove, Attributes to Remove, Classes, to Add, Attributes to Add.

Those settings are using textarea, in order to define multiple elements. Each line is an element.

Plugin Engine

For some reason, all the settings are not enough for you. You may need some extra works on data.

1. You can create a plugin in the group “jacrawler” and use Crawler events.

2. Crawler provides some events that help you handle the data manually.

3. onCrawlerBeforePrepareDom: trigger before prepare dom for each item.

Params: dom: the DomQuery object of item HTML. Check how to use DomQuery here

4. onCrawlerAfterPrepareDom: trigger after prepare dom for each item.

Params: - dom: the DomQuery object of item HTML. Check how to use DomQuery here

5. onCrawlerBeforeSaveItem: trigger before store item on database.

Params: - table: JTable object of item

6. onCrawlerBeforeSaveItem: trigger after store item on database.

Params: - table: JTable object of item

7. onCrawlerBeforeSaveItem: trigger after store item on database.

Params: - table: JTable object of item

oncrawl data test

If you still have trouble or you want to suggest to improve the documentation, feel free to raise a ticket in JA Social feed forum

Support forum