Jsocial integration documentation

Jsocial integration includes many social features like Login by facebook, Add open graph protocol tags in website pages, display your facebook home page news feed in your site, 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

-----------------------------------------------------------------------------------------------------------------------------

Facebook home page news feed

You can display your facebook home page news feed using the feed module. It will show your and your friends' statuses and posts from pages/groups you follow in facebook. It can show huge number of posts if you are following lots of pages/groups and have good number of friends else you may see less posts, also news feed doesn't show very old posts. Just try in module demo page about what it shows.

All you need is access token to run the feed mdoule. Follow "how to create facebook application" section at bottom, then go to access token generation page here, and enter you application id and secret key and press submit. this token generation page is also for our a separate module - facebook feed of page/group/profile.

-----------------------------------------------------------------------------------------------------------------------------

Social plugins(facebook)

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" }}
ParameterOptionsDetail
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" }}
ParameterOptionsDetail
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"}}
ParameterOptionsDetail
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" }}
ParameterOptionsDetail
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" }}
ParameterOptionsDetail
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" }}
ParameterOptionsDetail
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 -
register_developer_window_image

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 -

create_app_window_image

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.

app_basic_settings_image

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