Easy Tags

In addition to the optional plugins and modules, the JFBCSystem plugin allows you to embed the social modules into your articles, templates or any other custom content. Custom tags are the most flexible way to add specific widgets in specific positions on your site. However, it requires more configuration and is a more advanced option than using the content plugin or modules.

Once JFBConnect is setup properly, you can add the following tags into any article, module or template files. The parameters should be case-insensitive.

In the "Misc" tab, there is a Social Tag Admin Key option. This is a key to prevent user-entered social tags from rendering. When this value is set, you must add the key to your tags (as shown below). This is useful if you have forums, comments or other user-entered text available on your site. Leave blank to allow users to enter social tags, or if you don't have any user-generated content on your site.

The available tags are described below, along with all of their available options and examples of how to use them.

Facebook - Action

Example: {JFBCAction text=I'm cooking this! inactive=I cooked this!}
Example: {JFBCAction text=I'm cooking this inactive=I cooked this active_image=http://www.sourcecoast.com/images/jfbconnect/logo-jfbconnect.png inactive_image=http://www.sourcecoast.com/images/jlinked/logo-jlinked.png}

ParameterOptionsDescription
id text The ID of the action to display
text text The text of the action when enabled
inactive text The text of the action when disabled
active_image text The image URL of the action when enabled
inactive_image text The image URL of the action when disabled

Facebook - Comments

Example: {JFBCComments}
Example: {JFBCComments href=http://www.sourcecoast.com width=550 num_posts=10 colorscheme=dark mobile=false order_by=time}

ParameterOptionsDescription
num_posts text The number of comments to display
width text The width of the frame, in pixels
colorscheme light, dark Color scheme to use, provided by Facebook
href text The URL for this comments box. If blank, uses current URL
mobile false, 0, true, 1 Whether to show the mobile-optimized version
order_by social, reverse_time, time The order to use when displaying comments

Facebook - Comments Count

Example: {JFBCCommentsCount}
Example: {JFBCCommentsCount href=http://www.sourcecoast.com}

ParameterOptionsDescription
href text Comment URL

Facebook - Embedded Posts

Example: {JFBCEmbeddedPosts}
Example: {JFBCEmbeddedPosts href=https://www.facebook.com/FacebookDevelopers/posts/10151471074398553}

ParameterOptionsDescription
href text The URL for a Page or a person on Facebook. Only public posts from Facebook Pages and profiles can be embedded

Facebook - Facepile

Example: {JFBCFriends}
Example: {JFBCFriends href=http://www.sourcecoast.com max_rows=5 width=400 height=100 colorscheme=dark size=small show_count=true action=vote,comment}

ParameterOptionsDescription
href text If you want to display friends who have liked your page, specify the URL of the page here
max_rows text The maximum number of rows of profile pictures to show
width text The width of the frame, in pixels
height text The height of the frame, in pixels
colorscheme light, dark Color scheme to use, provided by Facebook
size small, large Determines the size of the images and social context in the facepile
show_count false, 0, true, 1 Toggles showing the global count. If set to false, the facepile plugin will only show friends.
action text An action type. The plugin will display photos of users who have connected to your app via this action.

Facebook - Feed

Example: {JFBCFeed}
Example: {JFBCFeed site=http://www.sourcecoast.com height=300 width=300 colorscheme=light recommendations=true header=false link_target=_top}

ParameterOptionsDescription
site text The domain for which to show recommendations. Defaults to the domain the plugin is on
width text The width of the frame, in pixels
height text The height of the frame, in pixels
header false, 0, true, 1 Show the Facebook header
colorscheme light, dark Color scheme to use, provided by Facebook
link_target _blank, _top, _parent The context in which content links are opened
recommendations false, 0, true, 1 Show Recommendations
filter text Allows you to filter which URLs are shown in the plugin
action text A comma separated list of actions to show activities for
ref text A label for tracking referrals. Specifying the ref attribute will add the 'fb_ref' parameter to the referrer URL when a user clicks a link from the plugin.
max_age text A limit on recommendation and creation time of articles that are surfaced in the plugins, the default is 0 (FB doesn’t take age into account). Otherwise the valid values are 1-180, which specifies the number of days.

Facebook - Follow

Example: {JFBCFollow}
Example: {JFBCFollow href=https://www.facebook.com/zuck layout=standard show_faces=true width=300 height=75 colorscheme=light kid_directed_site=true}

ParameterOptionsDescription
layout standard, box_count, button_count, button Determines the size and amount of social context next to the button
href text Profile URL of the user to follow
show_faces false, 0, true, 1 Show profile pictures below the button. This only works with Standard Layout Style
width text The width of the frame, in pixels
height text The height of the frame, in pixels
colorscheme light, dark Color scheme to use, provided by Facebook
kid_directed_site false, 0, true, 1 If your web site or online service, or a portion of your service, is directed to children under 13 you must enable this

Facebook - Like Button

Example: {JFBCLike}
Example: {JFBCLike href=http://www.sourcecoast.com layout=standard show_faces=true share=true width=300 action=like colorscheme=light ref=homepage kid_directed_site=true}

ParameterOptionsDescription
layout standard, box_count, button_count, button Determines the size and amount of social context next to the button
href text The URL to like, defaults to current page
show_faces false, 0, true, 1 Show profile pictures below the button. This only works with Standard Layout Style
width text The width of the frame, in pixels
action like, recommend The verb to display in the button. Currently only like and recommend are supported
colorscheme light, dark Color scheme to use, provided by Facebook
share false, 0, true, 1 Include a Send button
ref text A label for tracking referrals. Specifying the ref attribute will add the 'fb_ref' parameter to the referrer URL when a user clicks a link from the plugin.
kid_directed_site false, 0, true, 1 If your web site or online service, or a portion of your service, is directed to children under 13 you must enable this

Facebook - Like Box

Example: {JFBCFan}
Example: {JFBCFan height=200 width=200 colorscheme=light href=http://www.facebook.com/SourceCoast show_faces=true stream=false header=true show_border=true force_wall=false}

ParameterOptionsDescription
href text The URL of the Facebook Page for this Like box
width text The width of the frame, in pixels
height text The height of the frame, in pixels
colorscheme light, dark Color scheme to use, provided by Facebook
show_border false, 0, true, 1 Show a border around the fan box
show_faces false, 0, true, 1 Show profile pictures of users who are fans
stream false, 0, true, 1 Show the profile stream for the public profile
header false, 0, true, 1 Show the Find Us on Facebook bar at top. Only shown when either stream or connections are present
force_wall false, 0, true, 1 For Places, specifies whether the stream contains posts from the Place's wall or just checkins from friends

Facebook - Recommendations

Example: {JFBCRecommendations}
Example: {JFBCRecommendations site=http://www.sourcecoast.com width=350 height=350 colorscheme=light header=false link_target=_top}

ParameterOptionsDescription
site text The domain for which to show recommendations. Defaults to the domain the plugin is on
width text The width of the frame, in pixels
height text The height of the frame, in pixels
header false, 0, true, 1 Show the Facebook header
colorscheme light, dark Color scheme to use, provided by Facebook
link_target _blank, _top, _parent The context in which content links are opened
action text A comma separated list of actions to show activities for
ref text A label for tracking referrals. Specifying the ref attribute will add the 'fb_ref' parameter to the referrer URL when a user clicks a link from the plugin.
max_age text A limit on recommendation and creation time of articles that are surfaced in the plugins, the default is 0 (FB doesn’t take age into account). Otherwise the valid values are 1-180, which specifies the number of days.

Facebook - Recommendations Bar

Example: {JFBCRecommendationsBar}
Example: {JFBCRecommendationsBar href=http://www.sourcecoast.com trigger=onvisible read_time=30 action=like side=right}

ParameterOptionsDescription
href text The URL of the page. Defaults to the current page.
trigger onvisible, percent, manual Trigger when the plugin expands
trigger_percent text Indicates percent (from 0 to 100) of page scrolled past before read is triggered. Used only if Trigger is set to Percent
read_time text The number of seconds before the plugin will expand. Default is 30 seconds. Minimum is 10 seconds.
action like, recommend The verb to display in the button. Currently only like and recommend are supported
side left, right The side of the screen where the plugin will be displayed
site text A comma separated list of domains to show recommendations for. The default is the domain of the href parameter.
ref text A label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). The ref attribute causes two parameters to be added to the referrer URL when a user clicks a link from a stream story about a Like action
num_recommendations text The number of recommendations to display. By default, this value is 2 and the maximum value is 5.
max_age text A limit on recommendation and creation time of articles that are surfaced in the plugins, the default is 0 (FB doesn’t take age into account). Otherwise the valid values are 1-180, which specifies the number of days.

Facebook - Request

Example: {JFBCRequest request_id=1 link_image=http://www.sourcecoast.com/templates/sourcecoast/images/logo.png}
Example: {JFBCRequest request_id=1 link_text=Invite Friends}

ParameterOptionsDescription
request_id text ID of the request to be sent
link_text text Use this field for a simple text link to open the request window
link_image text Use this field for an image link to open the request window. This should be a URL to the image.

Facebook - Send

Example: {JFBCSend}
Example: {JFBCSend href=http://www.sourcecoast.com width=75 height=50 colorscheme=light ref=homepage kid_directed_site=true}

ParameterOptionsDescription
href text The URL to send, defaults to current page
colorscheme light, dark Color scheme to use, provided by Facebook
width text The width of the frame, in pixels
height text The height of the frame, in pixels
kid_directed_site false, 0, true, 1 If your web site or online service, or a portion of your service, is directed to children under 13 you must enable this
ref text A label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). Specifying the ref attribute will add the 'fb_ref' parameter to the referrer URL when a user clicks a link from the plugin.

Facebook - Share

Example: {JFBCShare}
Example: {JFBCShare href=http://www.sourcecoast.com layout=button width=400}

ParameterOptionsDescription
href text The URL to share, defaults to current page
layout box_count, button_count, button, icon_link, icon, link Determines the size and amount of social context next to the button
width text The width of the frame, in pixels. The layout you choose affects whether the width value will have any effect.

Facebook - Shared Activity

Example: {JFBCSharedActivity}
Example: {JFBCSharedActivity width=300 height=300 font=Arial}

ParameterOptionsDescription
width text The width of the frame, in pixels
height text The height of the frame, in pixels
font arial, lucida grande, segoe ui, tahoma, trebuchet ms, verdana Supported fonts

Google - Embedded Posts

Example: {SCGoogleEmbeddedPosts href=https://plus.google.com/108249232416813189685/posts/9fvJiAJUhd8}

ParameterOptionsDescription
href text Sets the URL to the specific post that you want to embed in your page. The URL must point to a publically shared post.

Google - Follow

Example: {SCGoogleFollow href=https://plus.google.com/110967630299632321627}
Example: {SCGoogleFollow href=https://plus.google.com/110967630299632321627 annotation=bubble height=20 rel=author}

ParameterOptionsDescription
href text The URL of the Google+ page or user profile that the user might choose to follow. The following URL formats are supported:
  • https://plus.google.com/110967630299632321627
  • https://plus.google.com/+LarryPage
annotation none, bubble, vertical-bubble Sets the annotation to display next to the button.

  • none - Do not render additional annotations.
  • bubble - Display the number of users who are following this page or person in a graphic next to the button.
  • vertical-bubble - Display the number of users who are following this page or person in a graphic above to the button.
height 15, 20, 24 The pixel height of the button to render.
This height controls only the height of the button. If you use the vertical annotation, the actual height of the full widget will be larger.
rel -, author, publisher Describes the relationship of the entity defined at the href location to the page the badge is embedded.

Google - Page Badge

Example: {SCGooglePadgeBadge href=https://plus.google.com/+GooglePlusDevelopers}
Example: {SCGooglePadgeBadge href=https://plus.google.com/+GooglePlusDevelopers layout=portrait theme=light showcoverphoto=true showtagline=true width=300}

ParameterOptionsDescription
href text The URL of the Google+ page that is associated with this brand.
layout landscape, portrait Sets the orientation of the badge
theme light, dark The color theme of the badge. Use dark when placing the badge on a page with a dark background.
showcoverphoto false, 0, true, 1 Displays the cover photo in the badge if set to true and the photo exists.
showtagline false, 0, true, 1 Displays the page's tag line if set to true.
width text The pixel width of the badge to render.
The following ranges are valid:
Portrait layout
180-450 pixels
Landscape layout

273-450 pixels

Google - Plus One

Example: {SCGooglePlusOne}
Example: {SCGooglePlusOne href=http://www.sourcecoast.com annotation=inline size=standard width=475 align=left expandTo=top,right recommendations=true}

ParameterOptionsDescription
href text The URL to +1, defaults to current page
size small, medium, standard, tall Sets the +1 button to render
annotation none, bubble, inline Sets the annotation to display next to the button
width text If data-annotation is set to inline, this parameter sets the width in pixels to use for the button and its inline annotation. If the width is omitted, a button and its inline annotation use 450px.
align left, right Sets the horizontal alignment of the button assets within its frame
expandTo text Sets the preferred positions to display hover and confirmation bubbles, which are relative to the button. Set this parameter when your page contains certain elements, such as Flash objects, that might interfere with rendering the bubbles
recommendations false, 0, true, 1 To disable showing recommendations within the +1 hover bubble, set recommendations to No

Linkedin - Apply

Example: {JLinkedApply companyid=365848 email=This email address is being protected from spambots. You need JavaScript enabled to view it. jobid=12345 jobtitle=Software Developer joblocation=Telecommute logo=http://www.sourcecoast.com/templates/sourcecoast/images/logo.png themecolor=#5573b7 phone=hidden coverletter=optional question=Do you know Joomla? question=Do you know PHP? href=http://www.sourcecoast.com/rest/jobPostingXml urlformat=xml meta=source:1,site:2}

ParameterOptionsDescription
jobid text Enter a job reference ID
companyid text Enter a company ID (ID or Name required by LinkedIn)
companyname text Enter a company name (ID or Name required by LinkedIn)
jobtitle text Provide the title for the position you are looking to fill (required by LinkedIn)
joblocation text Provide the geographic location for the position you are looking to fill
email text The destination email for the candidate to submit their application to (Email or URL required by LinkedIn)
href text String for URL to post data payload (Email or URL required by LinkedIn)
urlformat xml, json String controlling whether to post data in xml or json format
logo text Specify the URL to your company logo (appx dimensions 80x40)
phone optional, hidden, required Require Candidate Phone Number
coverletter optional, hidden, required Require Cover Letter
showtext false, 0, true, 1 Show additional help text
meta text Additional tracking text
themecolor text Enter a hexadecimal CSS color value (optional)
question1 text Specialized questions related to position. Will be converted to a checkbox
question2 text Specialized questions related to position. Will be converted to a checkbox
size normal, medium Size of apply button

Linkedin - Company Insider

Example: {JLinkedCompanyInsider companyid=1441}
Example: {JLinkedCompanyInsider companyid=365848}

ParameterOptionsDescription
companyid text Enter a company ID

Linkedin - Company Profile

Example: {JLinkedCompanyProfile}
Example: {JLinkedCompanyProfile companyid=365848 display_mode=inline related=false display_width=300}
Example: {JLinkedCompanyProfile companyid=365848 display_mode=icon_name display_behavior=click display_text=SourceCoast related=true}
Example: {JLinkedCompanyProfile companyid=365848 display_mode=icon display_behavior=hover related=1}

ParameterOptionsDescription
companyid text Enter a company ID
display_mode inline, icon_name, icon How to display the profile
display_behavior hover, click Click or hover over the icon to see the profile. Used for Icon/Name and Icon display mode only.
display_text text Display text for Icon/Name display mode only.
related false, 0, true, 1 Show Connections

Linkedin - Follow Company

Example: {JLinkedFollowCompany companyid=365848}
Example: {JLinkedFollowCompany companyid=365848 counter=right}

ParameterOptionsDescription
companyid text Enter a company ID
counter top, right, none How to display the follow button

Linkedin - Jobs

Example: {JLinkedJobs}
Example: {JLinkedJobs companyid=365848}

ParameterOptionsDescription
companyid text Enter a company ID (optional). Leave blank for ALL jobs

Linkedin - Member Profile

Example: {JLinkedMember}
Example: {JLinkedMember href=http://www.linkedin.com/in/alexandreae display_mode=inline related=false width=300}
Example: {JLinkedMember href=http://www.linkedin.com/in/alexandreae display_mode=icon_name display_behavior=click display_text=Alex Andreae related=true}
Example: {JLinkedMember href=http://www.linkedin.com/in/alexandreae display_mode=icon display_behavior=hover related=1}

ParameterOptionsDescription
href text Don't know your public URL? It's conveniently listed under your LinkedIn profile
display_mode inline, icon_name, icon How to display the profile
display_behavior hover, click Click or hover over the icon to see the profile. Used for Icon/Name and Icon display mode only.
display_text text Display text for Icon/Name display mode only.
related false, 0, true, 1 Show Connections
width text Width in pixels for the inline format only. Minimum value is 300 with smaller values being converted to 300.

Linkedin - Recommend

Example: {JLinkedRecommend}
Example: {JLinkedRecommend companyid=365848 productid=201714 counter=top}

ParameterOptionsDescription
companyid text Enter a company ID
productid text Enter a product ID. You can find the ID for your product as a numeric part of the URL of your product page on linkedin.com
counter top, right, no_count How to display the recommend button

Linkedin - Share

Example: {JLinkedShare}
Example: {JLinkedShare counter=top}
Example: {JLinkedShare href=http://www.sourcecoast.com/jlinked/ counter=right showzero=0}

ParameterOptionsDescription
href text Defaults to current page. If you want to share a specific URL, specify it here
counter top, right, no_count How to display the share button
showzero false, 0, true, 1 Whether to show a zero or a placeholder in the counter if there are no shares. Shows a 0 digit if counter is right. Shows a LinkedIn Icon if counter is top

Pinterest - Share

Example: {SCPinterestShare href=https://www.sourcecoast.com/ image=http://www.sourcecoast.com/images/jfbconnect/logo-jfbconnect.png desc=The best social network integration extension for Joomla}

Please Note: When using the PinIt button, an image must be specified. When using the Content plugin to automatically insert the PinIt button, the Open Graph - Content plugin must be enabled for JFBConnect to properly detect the best image to use. If no image is found, the PinIt button will not display.
ParameterOptionsDescription
href text The URL to pin, defaults to current page
pin_count above, beside, none Location to show the pin count
image text Image to pin
desc text Description for pin

Twitter - Follow

Example: {SCTwitterFollow}
Example: {SCTwitterFollow username=twitterapi lang=fr width=300px align=left show-screen-name=false size=medium dnt=false}

ParameterOptionsDescription
username text The user to follow. For instance, the username will be twitterapi for https://twitter.com/twitterapi.
lang , fr, en, en-ss, en-xx, ar, ja, es, de, it, id, pt, ko, tr, ru, nl, fil, msa, zh-tw, zh-cn, hi, no, sv, fi, da, pl, hu, fa, he, ur, th, uk, ca, el, eu, cs, af, xx-lc, gl, ro, hr, ckb, en-gb To specify the language for the Follow Button
count none, horizontal The count box shows how many times the URL has been Tweeted. You can choose to display or hide the count box, or next to the Tweet Button.
width text You can specify the width in pixels or percentage. For instance, 300px or 30%.
align , left, right You can specify the alignment of the Follow Button either left or right.
show-screen-name false, 0, true, 1 The user's screen name shows up by default, but you can opt not to show the screen name in the button.
size medium, large The size of the button can render in either "medium", which is the default size, or in "large" - which is the larger button.
dnt false, 0, true, 1 Opt Out of tailoring Twitter

Twitter - Hashtag

Example: {SCTwitterHashtag}
Example: {SCTwitterHashtag hashtag=TwitterStories related=twitterapi,twitter lang=fr size=medium dnt=false}

ParameterOptionsDescription
hashtag text Enter hashtag word or phrase
text text Default Tweet Text
related text You can provide multiple related accounts by comma separating entries. Ex. "anywhere:The Javascript API,sitestreams,twitter:The official account" or "twitterapi,twitter".
url text The URL of the page to tweet, defaults to current page
size medium, large The size of the button can render in either "medium", which is the default size, or in "large" - which is the larger button.
dnt false, 0, true, 1 Opt Out of tailoring Twitter
lang , fr, en, en-ss, en-xx, ar, ja, es, de, it, id, pt, ko, tr, ru, nl, fil, msa, zh-tw, zh-cn, hi, no, sv, fi, da, pl, hu, fa, he, ur, th, uk, ca, el, eu, cs, af, xx-lc, gl, ro, hr, ckb, en-gb The language for the Tweet Button

Twitter - Mention

Example: {SCTwitterMention}
Example: {SCTwitterMention screen_name=twitterapi related=twitter lang=fr size=medium dnt=false}

ParameterOptionsDescription
screen_name text The user to mention.
text text Default Tweet text
related text You can provide multiple related accounts by comma separating entries. Ex. "anywhere:The Javascript API,sitestreams,twitter:The official account" or "twitterapi,twitter".
size medium, large The size of the button can render in either "medium", which is the default size, or in "large" - which is the larger button.
dnt false, 0, true, 1 Opt Out of tailoring Twitter
lang , fr, en, en-ss, en-xx, ar, ja, es, de, it, id, pt, ko, tr, ru, nl, fil, msa, zh-tw, zh-cn, hi, no, sv, fi, da, pl, hu, fa, he, ur, th, uk, ca, el, eu, cs, af, xx-lc, gl, ro, hr, ckb, en-gb The language for the Tweet Button

Twitter - Share

Example: {SCTwitterShare}
Example: {SCTwitterShare href=http://www.sourcecoast.com text=SourceCoast makes great Joomla extensions data_count=horizontal via=sourcecoast related=mandreae hashtags=Joomla,Facebook size=medium dnt=false}

ParameterOptionsDescription
href text The URL of the page to share, defaults to current page
via text Screen name of the user to attribute the Tweet to
text text Default Tweet Text
related text Related accounts
data-count none, horizontal, vertical Count box position
lang text The language for the Tweet Button
counturl text URL to which your shared URL resolves, defaults to url being shared
hashtags text Comma separated hashtags appended to tweet text
size medium, large The size of the rendered button
dnt false, 0, true, 1 Opt Out of tailoring Twitter

Graph:

See Facebook Open Graph documentation for a full list of available fields.

Example: {SCOpenGraph url=http://www.sourcecoast.com}
Example: {SCOpenGraph image=http://www.sourcecoast.com/images/stories/extensions/jfbconnect/home_jfbconn.jpg}
Example: {SCOpenGraph description=Facebook connect integration for Joomla! Let users register and log into your site with their Facebook credentials.}

Note: Each Graph tag must only contain one property value. This is different than other JFBConnect tags which allow for multiple fields to be defined within the same {}.

ParameterExample
title title=JFBConnect
type type=company
url url=http://joomla-facebook.com
image image=http://www.sourcecoast.com/images/stories/extensions/jfbconnect/home_jfbconn.jpg
site_name site_name=SourceCoast
description description=Joomla Facebook Connect integration, payment systems, and custom Joomla development based in Austin, TX

 

Social Stream
SourceCoast Joomla Social Extensions
Friday, 25 May 2018
JFBConnect 8.0 Coming Soon! Stay tuned.
Refer and Earn

Like our extensions? You're not alone! That's why they're used on tens of thousands of websites. Now you can earn 20% of any sale you refer to SourceCoast.com.

We provide excellent documentation, well laid out sales pages and great support. All you need to do is spread the word and we'll take care of the rest.

Learn About Our Affiliate Program