Jsocial integration documentation
Jsocial integration includes many social features like Login by facebook, Add open graph protocol tags in website pages, add many social plugins(FB like button, comments..) using tag anywher in page, templates, articles...
All these described below -
Login by facebook
Jsocial integration brings login module which is same as joomla default login module but facebook login button and fb profile pic display
and more settings added to make login by facebook. Also main plugin injects facebook login/logout button if you add {{jsi_login_button}} tag anywhere
in page, articles, templates..to ease login by facebook.
1. To make login work facebook application must be created, follow "how to create facebook application" section at the bottom of this page.
2. Place that application id in component's setting page by clicking "options" at top right corner in component page in admin side, also enable "Add facebook Sdk initialization script for login"
setting to inject FB javascript sdk init codes with the application and save your component settings.
3. Make sure jsocial integration plugin is enabled as it injects all those fb sdk initialization and other required scripts codes in page where login module or FB login tag present to make login by FB work.
When user first time clicks login by facebook button, he is authenticated by facebook & facebook asks some permissions to be granted your FB application, then
he is redirected to jsocialintegration component page where user can login with his existing account to connect his account with facebook account or create a
new account to connect with facebook. If this complete, next time he can login by facebook on one click.
Make sure you always use one facebook application for login by FB because from FB Api version 2.0, user id is different per FB application. to make
things proper your that app scoped user id is stored and matched to make login instead variable email, name. Although FB never deletes any app unless severe
reasons, don't use your that app to do FB developments improperly.
All connected social users are listed in component's social-users page in admin panel. You can open user in seperate window by username and see their FB profile image. Here "user status" column shows whether the user is deleted from your
site or not. Even if the user is deleted from site, but record remains in jsocial integration table unless you enabled jsocial user plugin which only deletes records from jsocial table upon userr deletion.
-----------------------------------------------------------------------------------------------------------------------------
Open graph meta tags
Facebook Open Graph tags are required to describe your page to facebook. by jsocial integration plugin you can easily add title, description, image,
and other information which are shown anywhere in facebook when your page is liked, shared, or commented on. This ensures your branding and social presence
& it is must needed to present your content efficiently across social medias like FB, twitter, google+...It also adds twitter meta tags separately(you need to enable twitter
cards for your website in twitter.com to display these content)
You can specify default og meta tags in plugin settings for all your website pages which will be used if there are no corresponding tag data. Plugin also sets image tag
by joomla default article intro image or K2 image if present in current page.
In individual pages, you can also specify a unique title, description, image or other information about your page by adding following tags anywhere in page
to override corresponding default og meta tags -
{{JSIOpenGraph title=my site title }} {{JSIOpenGraph description=my site long description }} {{JSIOpenGraph type=article }}
{{JSIOpenGraph image=http://yoursite.com/images/elegant.png }} {{JSIOpenGraph appid=34234555878 }}
You can see if those meta tags injected right or not and how it look like by submitting and checking any of your page url here - https://developers.facebook.com/tools/debug/
if you are using Gzip Page Compression in your site, tag data may not appear instantly. K2 extension have their own og meta tag injected in their item pages so conflicts may arise, but
it's easy to remove those from k2 php codes, just comment those k2 og tags as shown here - HERE
-----------------------------------------------------------------------------------------------------------------------------
You can add facebook social plugins like like button, comments, share button, follow button, send button, embed any FB post by putting Jsocial integration social tags with different parameters as follows anywhere in page, templates, articles....
Jsocial like button tag parameters
Example: {{JSISC_Like}} or {{JSISC_Like href="https://developers.facebook.com/docs/plugins/" data-width="300" layout="standard" share="true" }}
| Parameter | Options | Detail |
|---|---|---|
| href | text | any url or fb page url or empty for current page to like |
| width | numbers | the width in pixels |
| layout | standard, box_count, button_count, button | the layout |
| share | true, false | whether to show share button too |
Jsocial comments tag parameters
Example: {{JSISC_Comments}} or {{JSISC_Comments width="500" numposts="5" colorscheme="light" }}
| Parameter | Options | Detail |
|---|---|---|
| numposts | numbers | number of comments to show |
| width | numbers | the width in pixels |
| colorscheme | light, dark | color scheme |
Jsocial share button tag parameters
Example: {{JSISC_Share}} or {{JSISC_Share width="100" layout="button"}}
| Parameter | Options | Detail |
|---|---|---|
| href | text | any url that will be shared, default is current url |
| layout | button, box_count, button_count, icon_link | layout |
| width | numbers | the width in pixels |
Jsocial follow button tag parameters
Example: {{JSISC_Follow}} or {{JSISC_Follow href="https://www.facebook.com/zuck" width="200" colorscheme="light" layout="standard" }}
| Parameter | Options | Detail |
|---|---|---|
| href | text | any profile url that will be followed |
| layout | standard, button, box_count, button_count | layout |
| width | numbers | the width in pixels |
| colorscheme | light, dark | colorscheme |
Jsocial embed post tag parameters
Example: {{JSISC_Post}} or {{JSISC_Post href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" width="500" }}
| Parameter | Options | Detail |
|---|---|---|
| href | text | any public post url that will be shown |
| width | numbers | the width in pixels(between 350 and 750) |
Jsocial Send button tag parameters
Example: {JSISC_Send} or {{JSISC_Send href="https://developers.facebook.com/docs/plugins/" colorscheme="light" }}
| Parameter | Options | Detail |
|---|---|---|
| href | text | the url that will be send, default is current |
| width | numbers | the width in pixels |
| colorscheme | light, dark | colorscheme |
-----------------------------------------------------------------------------------------------------------------------------
How to create facebook application
If you have not created facebook apps before or have not registerd as a developer then follow from step-1 below Else
if you created apps or registered as developer before then start from step-3 -
step-1: go to this link - https://developers.facebook.com/apps
step-2: click "Register as a Developer"/"Register now" button.A popup will
appear as shown below.There check the policy acceptance check box and
click continue.
In the next step you will be prompted to verify your account by entering mobile phone number, following image shows that -
enter your mobile number and verify and clicking continue buttons complete rest of the steps by entering compulsory inputs.
step-3: If you completed step-2, you will see a "developer" section there at left side in home page of your facebook account.
click developer link or https://developers.facebook.com/apps to go to your apps page.
there you will be seeing your created apps listed,
click 'Create a new app' button which is located under "Apps" menu item dropdown (Apps->Create a New App), following window will appear -
Enter display name(app name) and category only and leave other fields blank, then
click "create app".Next you will be prompted to enter captcha as
security check and if you complete this, your app creation is complete
and you will see that application's dashboard page as shown below.
this page also reachable from your account's home page under developer
section by clicking on that app.
Now you have to do the real part.Click "settings" from app's left hand menu to go it's settings page, there in basic settings tab, click
"+ Add Platform" button at bottom and a pop up window comes up where a lot of platforms listed.Click "Website" in that popup then a website section will be added
as shown in the final picture below.After that in that section enter the site url in "Site URL" field from where you will generate access token.In that
case it will be my token generation site.So enter that address - http://extensions.techhelpsource.com/ and click "save changes" at bottom to save changes for your app.
Finally, you need to make your app live so that it is accessible from anywhere to make feed display work.To do that click "Status & Review" link from left
hand menu of the app.After that chose "Yes" option for the field says - "Do you want to make this app and all its live features available to the general public?"
then confirm to make your app live and public.
That completes applicaton creation and configuring.
-----------------------------------------------------------------------------------------------------------------------------
Errors may arise -
i) both component and login module will throw errors if anything goes wrong. Like you may get errors that your account not exists and redirected to "connect your existing account or create new account to connect with facebook" page
if your previous connected user account was deleted.
ii) if you ever get access token related errors use this link -
access token generation link to generate your access
token
Access token will expire if you change something in your account
setting e.g password.so you will need to generate token again.
For facebook page or group any access token will work , its not important that profile amdin need to generate the access token
iii) If you get errors related application like "Error validating application. Application has been deleted" - That's because the facebook,
application by which you generated access token is deleted. There are many reasons why app deleted like
1. facebook bugs
2. using the app to do facebook development not following policy - https://developers.facebook.com/policy/ properly like if you post or
comment by same text( like "test comment") to a facebook page by graph api again and again in a short time, then it look like spammy to facebook,
these kind of violations written indirectly in policy.
to be sure facebook application will not be deleted, don't use ur application (by which you making login/generated token) for other developments improperly.
for more help email at - mridulcs2012@gmail.com, mridulcs@yahoo.com or use contact page of extension website
for chat skype/yahoo messanger id - mridulcs