Social Links Guide
Table of Contents
- Overview
- Component Guide
- Social Links [M]
- Social Tabs [M] [Pro]
- Page [M]
- Google Plus [M] [Pro]
- Tweet [M]
- Plugins
- Need More Help?
Overview
CoalaWeb Social Links is a complete social media package to help your site visitors share content, follow you through a variety of social networks and vote for particular content with social buttons. There are two versions available a Core (Free) and Pro (Paid Subscription) version that comes with extend functionality.
Component
Control Panel
The Control Panel as seen below it is designed to be an easy starting point, think of it as the components head quarters. While carrying out tasks you can easily jump from the Control Panel to the different sections and then return before moving onto the next one. [Figure-1]
Counts
Counts [List]
If you have chosen to turn on share counts in the component options then you will start to see the Counts list view fill up with your pages and their related social counts. This will vary based on what social networks you have chosen to count and each count will be displayed in its own column. [Figure-31a]
Columns Name Reference
- FC = Facebook Comments
- FL = Facebook Likes
- FS = Facebook Share
- FT = Facebook Total
- G = Google +
- L = Linkedin
- P = Pinterest
- R = Reddit
- S = Stumbleupon
If you are familiar with the latest versions of Joomla you will already know what features are avaliable in the Counts view and how to use them but if your not read on to get a brief summary.
In the Counts view you can filter by any column and search by title and published state. From this view you can also change an items published state by using an individual items Status button or multiple items by selecting them and using the buttons at the top. You can also directly delete an item rather than send it to the Trash by hovering over it's name and using the drop down selector.
One last cool feature is the Magnifying Glass next to an item's name which provides a quick way to see the exact page URL that the counts relate too. [Figure-31b]
One thing to note is if you send items to the Trash remember to Empty Trash to stop them from interfering with new counts. You can do this by clicking the Search Tools button and then filtering by Trashed in the drop down selector. Next select all the items and click the Empty Trash button from the top. [Figure-31c]
Count [Edit]
To edit an item you can click on it's Linked Title or select it and then click the Edit button from the top or hover over the title and the use the drop down and select Edit.
Once in the edit screen you can see all the information related to a particular URL including it's Individual Counts, Time, URL and Title. You can give it an Alias which will make identifying it in the list view much easier or let the system add one when you save the item.
You can also make changes to the counts but keep in mind that any changes you make will get updated when the Locktime has elapsed. You can also change an items Status and check or update the last person that Modified the item and the time it was modified. [Figure-31d]
Purge [Pro]
Pro subscribers also get a Purge button will delete all of the count records current stored in the Social Links database tables. To make sure you haven't accidentally press it you will get a popup asking you to confirm your choice. [Figure-32b]
After it has completed you get a confirmation message or an error message if it was unable to carry out the task. [Figure-32c]
Optimize and Repair [Pro]
Pro subscribers also get an Optimize button will attempt to repair and optimize all the Social Links database tables. To make sure you haven't accidentally press it you will get a popup asking you to confirm your choice. [Figure-33b]
After it has completed you get a confirmation message or an error message if it was unable to carry out the task. [Figure-32c]
Inbuilt Help
In the control panel or the tool menu you have a help icon that when clicked will open a pop up wrapper of this specific guide. This gives you an easy way of checking the functionality of a particular item with out leaving the control panel. [Figure-2]
Extension Options
1. General
The first option in this section allows you to load the Facebook JavaScript library through a specifically designed plugin that will ensure it's only loaded once and can be used by all the parts of the Social Links system. [Figure-26]
The next option is the Facebook Application ID which will be used through out the Social Links system both by it's associated Modules and Plugins. This is a centralized location making it quick and easy to add the ID once and have the whole system use it. This can be overridden in some cases such as the Social Links module if needed. [Figure-26a]
The next option allows you to choose which method you wish to use when sharing with Facebook. This option will affect the sharing of the Social Links and Tabs modules as well as the Share content plugin. You can choose between the new Share Dialog (Official but requires an App ID ) or the old Sharer (Depreciated but more features). [Figure-26b]
If you want a Twitter username to be added to the end of Tweets generated by the Social Links system with the pre text via add it here in the following format @username otherwise leave this option blank. [Figure-26c]
URL Shortener
To check if you have cURL installed open up your PHP Information page found under
System → System Information → PHP Information
and scroll down or search the page looking for something similar to [Figure-24]
Now that we have made sure cURL is installed lets move onto the configuration options. The first option is whether to turn on the shortening system and which service you wish to use (Currently only Google is available).
Next enter the API Key your received from your shortening service provider making sure to not leave any extra spaces.
Next you can choose which URL's you wish to have shortened keeping in mind that the system will alter URLs so in some cases the current votes will disappear. Don't worry they aren't lost you can turn off the system and they will return but it works both ways votes counted while using the shortening service in some cases will disappear when changing back. The decision to turn on URL shortening and where will ultimately depend on your circumstances. [Figure-24a]
How do I get an API Key? (Google)
Steps for creating API key for Google URL Shortening.
- Firstly log into your Google account and then go to the Google Developers Console using this link
- Select a project, or create a new one.
- Now from the left menu select APIs and auth → APIs
- Scroll down until you find URL Shortener API and select it.
- In the next window click the Enable API button at the top.
- Next select Credentials from the left menu.
- Next select Add credentials → API Key from the top drop down menu. [Figure-24b]
- Lastly select Server Key from the popup window. [Figure-24c]
- When the window closes you should now have your new API Key displayed in the list of keys. [Figure-24d]
2. Like Plugin Options [Pro Version]
Part 1 - Display Where
The first option is to turn on or off the display of the like social buttons. This option does in essence the same thing as unpublishing the associated plugin with out the hassle of searching through the plugins.
The next option allows you to choose if you want the social buttons to be displayed everywhere for example in each of the articles displayed in a blog layout or only when you have selected a particular article. This will affect the display of the buttons in both Joomla and K2. [Figure-3]
Next you have an opportunity to select which categories you wish the buttons to be displayed in. If you wish to select more than one just hold down Shift on your keyboard and select the categories with your mouse. If you want to exclude any articles use the last input field by entering their IDs one per line. [Figure-3a]
Part 2 - Layout
Next are the Layout Options here you can choose to display the buttons above the content, below the content or both. The buttons also have style options associated with them, you can display them in Vertical [Bubble], Horizontal or with No Count. The Mail and Twitter buttons are only avaliable in the Horizontal layout so they don't appear in the list. [Figure-3b]
Part 3 - Social
Next are the Social Options here you can chose which social networks you wish to display. These options will affect the display of the buttons in Joomla, K2 and Zoo. [Figure-3c]
3. Share Plugin Options [Pro Version]
Part 1 - Display Where
The first option is to turn on or off the display of the share social buttons. This option does in essence the same thing as unpublishing the associated plugin with out the hassle of searching through the plugins.
The next option allows you to choose if you want the social buttons to be displayed everywhere for example in each of the articles displayed in a blog layout or only when you have selected a particular article. This will affect the display of the buttons in both Joomla and K2. [Figure-27]
Next you have an opportunity to select which categories you wish the buttons to be displayed in. If you wish to select more than one just hold down Shift on your keyboard and select the categories with your mouse. If you want to exclude any articles use the last input field by entering their IDs one per line. [Figure-27a]
Part 2 - General
Next are the General Options here you can choose to display the buttons above the content, below the content or both depending on the current layout. If you want the links to be set to No Follow select Yes for the next option. Lastly if you want them to be opened in a popup window select Yes for the Use Popup option. [Figure-27b]
Part 3 - Button Style
Next are the Button Style Options here you can choose to the icon/button style it's size and if it should have a count or not. Depending on which style you choose you have a few specific options such as Labels for the UIkit style.[Figure-27d]
Part 4 - Social
Next are the Social Options here you can chose which social networks you wish to display. These options will affect the display of both the buttons in Joomla and K2. If you plan to display the Facebook button you will need to create a Facebook application first and then copy and paste the ID into the Component options under the General tab. [Figure-27c]
Create Facebook Application
To get a Facebook App ID requires you to first create a Facebook Application but don’t worry it’s an easy process which we will walk your through in this GUIDE.
4. Panel Plugin Options [Pro Version]
Part 1 - Display Where
To make it easy to turn on or off the Social Panel plugin completely I have included a Load Panel option this will save you having to open up the plugin manager to disable it. Next you have an opportunity to select which categories you wish the buttons to be displayed in. If you wish to select more than one just hold down Shift on your keyboard and select the categories with your mouse. If you want to exclude any articles use the last input field by entering their IDs one per line. [Figure-23a]
Part 2 - Layout & Style
Next are the Layout & Style Options these options will affect both the Fixed and Collapse style layouts. First you can choose if you want the panel to be visible all the time displayed to the side of the article content or Collapse which will hide the panel off the side of the page. The Collapse option becomes visible by clicking a tab that extends from the side of the page.
The next option allows you to choose which side you want the panel displayed on.
The next option allows you to choose a Theme for the panel. I have included a few and will expand it over time but if you want to create your own have a look below.
The buttons also have style options associated with them, you can display them in Vertical [Bubble], or with No Count. The Mail and Twitter buttons are only avaliable in the No Count layout so they don't appear in the list.
Creating your own theme
Creating a theme is easy, just copy the default folder found in:
media → coalawebsocial → plugins → content → socialpanel → themes
Give the theme a different name and edit the files as needed. All the folders located in the themes directory will automatically be listed in the Form Theme select list.
The last option listed under Layout and Style is Top Space this is theamount of space above the panel and will affect both panel styles. The top space is measure in % so just enter a number, 15 is the default and works well in most situations. [Figure-23b]
Part 3 - Fixed Style
The next couple of option only affect the Fixed panel style. First you can choose the Convert Width if the page is reduced smaller than the width entered here it will automatically convert to the Collapse style. The last option in this section is the side space this is the amount of space between the side of the page and the panel it is measured in % so just enter a number, 5 is the default and works well in most situations. [Figure-23c]
Part 4 - Collapse Style
The next couple of option only affect the Collapse panel style. First you can choose the type of button(tab) to want to use to trigger the display of the panel. If you choose Text in the next option you can decide to have the text/button displayed vertically or horizontal. If you choose Icon you will have to fill in three of the next four options. First choose the icon you wish to use it can be stored locally or you can use an external URL for the image. Next set the width and height of the icon in pixels. Note: Just enter a number here with out the px. If you choose to use text which is a a great option for multilingual sites you can change the displayed text here. The default text is Share but if you do plan to use it on a multilingual site it would be better to use the language files or an override to manipulate this text.
The next few options control the slide effect of the panel. The first two options control the amount of time the panel takes to open and close. Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The default duration is 400 milliseconds. The last two options affect the animation style, you have a lot to choose from so experiment until you find the ones you like. [Figure-23d]
Part 5 - Social Options
Next are the Social Options here you can chose which social networks you wish to display. These options will affect the display of both the buttons in Joomla and K2. [Figure-23e]
5. Metadata Plugin Options [Pro Version]
The CoalaWeb Metadata system will help generate meta data in the Open Graph, Twitter Card and Schema.org formats and then place it in the head of your web pages. This information will then be used by elements such as the Facebook, Twitter and Google + vote and share buttons to get the best representation of the content being shared or voted on.
Part 1 - Display Where
The first option Only Articles allows you to choose if you want to add Metadata information to only the article views or to Category Blog and Featured views as well. If you select No for Only Articles you will also have the option for Featured layout to use the CoalaWeb menu editor tab to assign tags or to use the first article displayed. [Figure-4]
Part 2 - CDN
This section allows you to use a CDN when generating the image URLs. You have three options the first is to turn it on or off the second controls the CDN root and the last option is the CDN domain for example cdn.coalaweb.com. [Figure-4f]
Part 3 - Meta Selection
Type
- 1st attempt: The first place the system will look is the CoalaWeb tab displayed in the Category, Article and Menu editors. This will always take priority over any other possible setting. If you set a type using the category editor tab this will be used in a category blog layout as there are multiple articles on the page. If you have set a type using the article editor tab then it will be used when viewing that specific article. For non content type items like a contact page the CoalaWeb menu editor tab can be used.
- 2nd attempt: If you haven’t used a CoalaWeb override tab the system will fall back to the Default Type input field. [Figure 4a]
Title
- 1st attempt: The first place the system will look is the CoalaWeb tab displayed in the both the Category and Article editors. This will always take priority over any other possible setting. If you set a title using the category editor tab this will be used in a category blog layout as there are multiple articles on the page. If you have set a title using the article editor tab then it will be used when viewing that specific article. For non content type items like a contact page the CoalaWeb menu editor tab can be used.
- 2nd attempt: If you have set a Default Title this will be next in line to be used for the title. [Figure 4a]
- 3rd attempt: If you haven’t used either a CoalaWeb override tab or the default title field then the title will be populated in the following way:
- Category View = The category title.
- Featured View = The title of the first article.
- Article View = The title of the article being viewed.
- 4th attempt: If a title still hasn't been found and you have added a Fallback title it will be used as the last resort.
Site Name
- 1st attempt: If you have set a Default Site Name this will be used for the site name tag. [Figure 4a]
- 2nd attempt: If you haven’t chosen a Default Site Name the system will use the Site Name set in your website's Global Configuration. [Figure-4a]
Description
A page description expands on the page title by including additional details typically used as a document preview. The description should provide a concise summary of the page in approximately 200 characters or fewer.
- 1st attempt: The first place the system will look is the CoalaWeb tab displayed in the both the Category and Article editors. This will always take priority over any other possible setting. If you set a description using the category editor tab this will be used in a category blog layout as there are multiple articles on the page. If you have set a description using the article editor tab then it will be used when viewing that specific article. For non content type items like a contact page the CoalaWeb menu editor tab can be used.
- 2nd attempt: If you have set a Default Description this will be next in line to be used for the description. [Figure 4a]
- 3rd Attempt: If you haven’t chosen a default description the system will move onto the meta description of the article being viewed or of the first one displayed in Blog or Featured view.
- 4th attempt: If the first three options return no description its on to the intro text of the article being viewed or of the first one displayed in Blog or Featured view. The plugin will attempt to extract the first 300 words of the intro text and use those as your description.
- 5th attempt: If a description still hasn't been found and you have added a Fallback description it will be used as the last resort.
Image
Let's face it the image is very important and I'm confident using the options below you can get the image you prefer to be used. [Figure-4a]
- 1st attempt: The first place the system will look to is the CoalaWeb tab displayed in the both the Category and Article editors. This will always take priority over any other possible setting. If you set an image using the category editor tab this will be used in a category blog layout as there are multiple articles on the page. If you have set an image using the article editor tab then it will be used when viewing that specific article. For non content type items like a contact page the CoalaWeb menu editor tab can be used.
- 2nd attempt: If you have set a Default Image this will be next in line to be used for the image. [Figure 4a]
- 3rd attempt: If you haven’t used either a CoalaWeb override tab or the default image field then the system move on to searching the cwopengraph folder [images/cwopengraph] for an image that matches the id of the current article. For example you want a specific image for your latest article which has an ID of 1 then rename the image you want to use to 1.jpg and upload it to the image/cwopengraph folder. The plugin will search in this folder for matching images and if it finds one it will be add to the og:image and twitter:image meta tags. Supported image types are jpg, png and gif.
- 4th attempt: If the previous options have failed to return an image the system will next look to the articles Intro Image and if it finds one it will be used.
- 5th attempt: The next thing the system will do is search through the article content to find an image and if it does that image will be used.
- 6th attempt: If an image still hasn't been found and you have added a Fallback image it will be used as the last resort.
Part 3 - Facebook [Open Graph]
Add Open Graph
Turn on or off the inclusion of Open Graph meta tags. [Figure-4b]
Application ID and Administrators
Here you can enter your Facebook Application ID (optional) and or Administrators (optional). [Figure-4b]
Add Namespace
This option allows you to add the Open Graph protocol namespaces to our tag. [Figure-4b]
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://ogp.me/ns/fb#"
Part 4 - Twitter [Twitter Card]
Add Twitter Card
Turn on or off the inclusion of Twitter Card meta tags. [Figure-4c]
Website @username
Here you can enter the Twitter @username for the website used in the card footer.[Figure-4c]
Content @username
Here you can enter the Twitter @username for the content author. [Figure-4c]
Part 5 Google [Schema.org]
The first option is to turn on or off the inclusion of Schema (microdata) meta tags. The next two options are for a fallback image for when no other image is avaliable as Google expects one. Two more things that Google expects are a Publisher and Publisher Logo so the next three options cover these. If they are left blank the system will resort to using a generic image and the site name as the publisher. [Figure-4d]
Part 6 Fallback
The options in this section will be used when no other data is available so consider them Fallback options. This is very handy for example to assign a logo image that can be used when an article doesn't have one. They will automatically be used for Native Joomla and Zoo content
The Fallback (Everywhere) option gives you the ability to use the fallback system everywhere that isn't Native Joomla and Zoo content. Note: For menu items this can still be overridden on a per menu bases using the CoalaWeb tab in the menu editor.
If you have choose yes to fallback everywhere and you want to exclude certain extensions from using the fallback settings you can add them into the Fallback Exclude field separated by a comma. For example: com_k2,com_contact [Figure-4e]
Part 7 Default
If you want certain information to always be used within the meta tags set it below. This can still be overridden by the settings in the CoalaWeb editor tabs. [Figure-4a]
6. Count
CoalaWeb Social links has a count system builtin that can check a page's social counts based on it's URL and then store the information in the database. This allows the counts to be retrieved from the database when displaying the buttons removing the need to check each social network on every page load. [Figure-30]
The count system currently supports Joomla, K2 and Zoo content to varying degrees. You can choose to check an individual page's count with the Check Count(Article) option for all three while Joomla and K2 give you the option to Check Count (Category/Featured/List) which will check all the articles on the page at once. Joomla and K2 also have a few more options to exclude individual articles/items or categories from being counted. [Figure-30a]
The next group of options are what to check which give you option to choose which social networks to check so if you only plan to display a Facebook and Google button you could just turn those two on. Keep in mind the counts are independent of the displayed buttons in the front end so you could display no buttons and turn on the counts here to monitor from the Social Links control panel what your page counts are. [Figure-30b]
The last option in this section is when to check which controls how long a page's information is stored before it is checked again. The locktime is set in minutes and the default is 1440 which is one day. [Figure-30c]
7. Update
The CoalaWeb Social Links extension integrates with the inbuilt Joomla Update system so both Core and Pro users can keep their extension up to date. For Core users when you see updates listed in the Joomla update manager feel free to select it and update.
For Pro subscribers you will need to make sure you still have a valid subscription and that you have entered your Download ID in either the Control Panel input field. [Figure-28]
Or through the component configuration options under Updates. [Figure-28a]
Where can I find my Download ID?
To see your Download ID you will need to log into coalaweb.com and then go to:
Members -> My Subscriptions
You will then see the ID displayed in the module titled Download ID. [Figure-28b]
8. Component Permissions
The last tab contains the permission settings for the CoalaWeb Social Links component. [Figure-8]
Social Links [M]
General Display
Part 1
In this section you can choose the icon style, size and alignment, title alignment as well as the title format. [Figure-9]
Part 2
You also have the option to turn on or off the display of the Share This or Follow Us sections. Note: individual items are controlled in later sections. You can also choose if you want borders around the different sections of the module as well as their width, the modules overall width as a percentage and for the PRO users you can also select the module layout. [Figure-9a]
Creating a Custom Theme
Creating a theme is easy, just copy the custom-example-v2 folder found in:
media → coalawebsocial → components → sociallinks → themes-icon
Give the theme a different name, edit the files as needed and of course add your custom icons. All the folders located in the themes-icon directory will automatically be listed in the Icon Styles select list.
Part 3
The last General Display options control if the buttons should be opened in a Popup Window. I recommend having it on for the Share buttons and off for the Follow Us buttons. [Figure-9b]
Share This General
Part 1 - Default
If you want the same title to be used for all of the Share This icons all of the time add it here. If have chosen a default link I recommend you add a default title as well. If left blank the current title will be used.
If you want the same link to be used for all of the Share This icons all of the time add it here. If left blank the current URL will be used. - Note: When adding your link use the domain minus the http:// only add the link in the following format www.socialmedia.com. You can also add a default description that will be used in the email produced by the Share This email button. [Figure-10]
Part 2 - Display
This section controls what is displayed in the Share This part of the module. You can choose to display a title including what text will be displayed.
You can also choose the color of the title and the border color but only if you selected yes to Display Borders in the General Display Options section. This border will surround the Share This part of the module. You can enter a # followed by a color reference code such as #000000 for black or you can use the color chooser box to the right of the input field. The last option is used to display some text above the Share This section of the module. [Figure-10a]
Share This Social
Part 1 - Facebook
Facebook has announced that they have deprecated the Sharer code in preference of their new Share Dialog system, which requires a Facebook App ID. If you plan to use the new Share Dialog you will need to create a Facebook application first and then copy and paste the ID into the Component options under the General tab. The option below will override the component if needed. For more info on how this is done read below.
If you don't want to create a Facebook application you can set the component option Share System to (Old) Sharer but keep in mind that Facbook could completely remove support for Sharer system in the future. [Figure-10b]
Create Facebook Application
To get a Facebook App ID requires you to first create a Facebook Application but don’t worry it’s an easy process which we will walk your through in this GUIDE.
Part 2 - Social A - Z
For the social bookmark options themselves, scroll down the list ticking the ones you want to display and that's it for the Share This section.[Figure-10c]
Follow Us General
This section controls what is displayed in the Follow Us part of the module. You can choose to display a title including what text will be displayed.
You can also choose the color of the title and the border color but only if you selected yes to Display Borders in the General Display Options section. This border will surround the Follow Us part of the module. You can enter a # followed by a color reference code such as #000000 for black or you can use the color chooser box to the right of the input field. The last option is used to display some text above the Follow Us section of the module. [Figure-11]
Follow Us A-Z
To make finding the social media icons easier I have broken them up into groups of 5 letters organized alphabetically. For example if you are look for Facebook just select the F -J group. Just work your way through the groups ticking the ones you want to display and adding their corresponding links. [Figure-11a]
Follow Us Custom
Due to popular demand there is now a Custom Option and for PRO users Three Custom Options to help with those situation where only a custom icon will do. To add a custom icon is very similar to a standard Follow Us option you have to chose to display it, add a link and a few more options.
First lets decided if we want a custom button to display at all. Next is the Hover Text this displays when the icon is hovered over by a mouse. Now we have an important one the link to the place you want the user to visit if they click the button. The next options allows you to choose it you want the link to open in the same window maybe for a contact form on your site or in a new window if they are leaving your site.
The next couple of options help you get the all important icon displaying, you can select the Custom Icon that you want to display from your local images directory or use an external one by entering in the complete URL for example https://coalaweb.com/images/example.png. [Figure-11b]
Tips
- When adding your link use the domain without the http:// for example www.facebook.com
- When using an external icon use the complete URL for example https://coalaweb.com/images/example.png
- When choosing a icon keep in mind what size you selected in the General Options section.
Advanced
The CoalaWeb Social Links module also has a few of what I consider Advanced Options such as the option to assign a Module Class Suffix or choose whether to use Cache including the Cache Time.
There is also an option to turn off the Module CSS if you want to add your own styling. Turn on Link Text if you want to have text appear where buttons normally would on screen readers and or systems that don't load CSS. Lastly is the NoFollow option that provides a way to tell search engines not to follow a particular link. [Figure-12]
Social Tabs [M] [Pro]
First Thing
The first thing you will need to do to ensure that the Social Tabs module functions correctly is to publish it to the correct Position. I recommend using debug as it won't affect the display of your other content and it's an available in the majority of templates. If you are using a RocketTheme template I have had success using the utility-a position. [Figure-25]
General Display
Part 1
In this section you can choose which Side you want the module to display on, the Offset (the amount of space from the top or bottom of the page) and either Top or Bottom. [Figure-25a]
Part 2
This section covers Waypoints which allow you to use HTML elements on the page to trigger the appearance and disappearance of the tabs. With the first option you can turn this feature on or off. For the next two options you have to enter the waypoints that you want to use to trigger Tabs. can be any HTML element's an ID #example or a Class .example I recommend using an ID as it's unique. [Figure-25j]
Part 3
In this section you can choose to disable Tabs on either Mobiles or Mobiles and Tablets. Then if you want to keep displaying Tabs on mobiles device you also have the option to move them to the bottom and if you want then to expand to the full width of the page. [Figure-25b]
Part 4
The last General Display options control if the buttons should be opened in a Popup Window. I recommend having it on for the Share buttons and off for the Follow Us buttons. [Figure-25c]
General Share
If you want the same title to be used for all of the Share This icons all of the time add it here. If have chosen a default link I recommend you add a default title as well. If left blank the current title will be used.
If you want the same link to be used for all of the Share This icons all of the time add it here. If left blank the current URL will be used. - Note: When adding your link use the domain minus the http:// only add the link in the following format www.socialmedia.com. You can also add a default description that will be used in the email produced by the Share This email button. [Figure-25c]
Share A-Z
Part 1 - Facebook
Facebook has announced that they have deprecated the Sharer code in preference of their new Share Dialog system, which requires a Facebook App ID. If you plan to use the new Share Dialog you will need to create a Facebook application first and then copy and paste the ID into the Component options under the General tab. The option below will override the component if needed. For more info on how this is done read below.
If you don't want to create a Facebook application you can set the component option Share System to (Old) Sharer but keep in mind that Facbook could completely remove support for Sharer system in the future. [Figure-25d]
Create Facebook Application
To get a Facebook App ID requires you to first create a Facebook Application but don’t worry it’s an easy process which we will walk your through in this GUIDE.
Part 2 - Social A - Z
For the social share options themselves, scroll down the list ticking the ones you want to display and that's it for the Share section.[Figure-25e]
Follow Us A-Z
To make finding the social media icons easier I have broken them up into groups of 5 letters organized alphabetically. For example if you are look for Facebook just select the F - J group. Just work your way through the groups ticking the ones you want to display and adding their corresponding links. [Figure-25f]
Follow Us Custom
Due to popular demand there are now two Custom Option to help with those situation where only a custom tab will do. To add a custom tab is very similar to a standard Follow Us option you have to chose to display it, add a link and a few more options.
First lets decided if we want a custom tab to display at all. Now we have an important one the link to the place you want the user to visit if they click the tab. The next options allows you to choose it you want the link to open in the same window maybe for a contact form on your site or in a new window if they are leaving your site.
The next couple of options help you get the all important icon displaying, you can select the Custom Icon that you want to display from your local images directory or use an external one by entering in the complete URL for example https://coalaweb.com/images/example.png. [Figure-25g]
Tips
- When adding your link use the domain without the http:// for example www.facebook.com
- When using an external icon use the complete URL for example https://coalaweb.com/images/example.png
- When choosing a icon keep in mind the standard icons are 48px png images with a clear background.
Tab Colors
In this section you have two option to choose for each of the tabs including the custom ones. The first one is the default background color of a particular tab and the second one is the hover color that the tab will change to when hovered over. You can click the input to use a popup color selector or enter the colors Hex code minus the #. [Figure-25h]
Tab Order
In this section you can choose the order you want the tabs to be displayed in. To reorder the tabs just drag and drop them to the location you want them displayed its that simple. [Figure-25i]
To make it easy to identify which tab is which I have added a key letter to the end of each of their names for more details see below.
Tab Key:
- [S]=Share
- [F]=Follow
- [C]=Custom
Advanced
First you get the choice to use CSS for the rendering of the module or jQuery. [Figure-25d]
Next you have the option to assign a Unique Module ID to stop conflicts. You can also give the it a Module Class Suffix or choose whether to use Cache including the Cache Time. The last option is NoFollow that provides a way to tell search engines not to follow a particular link. [Figure-25d]
Page [M]
Page is a social module that enables Facebook Page owners to attract and gain likes from their own website. It enables people using your website to do the following:
- See how many people like the Page, and which of their friends like it, too.
- Read recent posts from the Page.
- Share the Page with one click.
- Like the Page with one click.
General
The first option in this section allows you to add your Facebook page. The easiest way to do that is open up your page and copy and paste the link in the box. [Figure-29]
Layout
The first option in this section is what default width you want to set for the widget. The Page Widget will automatically adapt to the width of its parent element on page load (min. 280px / max. 500px). If the width of the parent element is bigger than the Page Widget width it will maintain the value defined in Widget Width.
The next option allows you to set the default height for the widget. The minimum pixel height of the Page Widget is 280 and the maximum is 500. The next option is for the widget alignment which is handy for when you have a large space and you want the widget aligned to the center of it.
The next option is the Module Width not to be confused with the Widget Width this is the surrounding Joomla module. You might want to reduce this width if for example you only have two modules displayed at the bottom of your page and you want the Page to be a bit more compact. Don't forget the Page Widget will automatically adapt to the width of its parent element on page load as I mentioned at the start of this section.
Set the last option to Yes if your template is having trouble configuring the right height for the content. [Figure 29a]
Style
In the this section you have three options the first gives you the choice of displaying the Profile Photos of people who have liked this particular page. The second option allows you to turn on or off the display of the page's Header Image in the background. The last option is the choice of turning on or off the display of a Stream of the latest posts from your Page's wall. [Figure-29b]
Advanced
The Page module also has a few of what I consider Advanced Options such as the option to assign a Module Class Suffix or whether to use Cache including the Cache Time. There is also an option to turn off the Module css if you want to add your own styling. [Figure-29c]
Google Plus [M][Pro]
CoalaWeb G Plus is a social module that helps you link your Google+ page to your site. Get more recommendations for your site in Google search and grow your audience on Google+.
You have a choice of the following badge types:
- Page
- Profile
- Community
General
The first thing you will need to decide is what type of badge you want to display. You have the option to display a Profile, Page or Community depending on your needs. You will only need to fill in one of the next three options based on your type choice. [Figure-18]
Layout & Style
Part 1
The options found here will affect all the badge types. The first one is Layout, you can choose to display the badge in Portrait [Vertical] or Landscape [Horizontal].
Next you have the option to choose the width of the badge in pixels. The following ranges are valid: Portrait layout 180-450 pixels Landscape layout 273-450 pixels. Next you have a choice of Light or Dark.
The next option specifies whether or not to show the tag line and the last option is whether or not to display the cover photo in the badge. Note: Only if the photo exists. [Figure-18a]
Part 2
The next option is to Display Owners this is only aplicable to the Community type badge. The last option is the Module Alignment here you can choose one of three options Left, Right or Center. [Figure-18b]
Advanced
The CoalaWeb G Plus module also has a few of what I consider Advanced Options such as the option to assign a Module Class Suffix or choose whether to use Cache including the Cache Time. There is also options to turn on or off the Module CSS and Google JSif you want. [Figure-18c]
Tweet [M]
CoalaWeb Tweet is a social module designed to display a particular Twitter users feed. It has a long list of options from controlling how many tweets are displayed to their format and style.
General
The fist option in the section is the most important one and it's your Twitter username. For Pro subscriber that also get a variety of Panel Styles to choose from. The last option is how many tweets to display. [Figure-34]
Tweet
In this section you will be able to control the look and feel of each of the displayed Tweets.
Part 1 - Title
This section contains all the options that control the look and layout of the Title part of each tweet. You can choose to display a Title or not, it's Format and Alignment. You can turn the Text on or off which is handy for Pro subscribers if they want to only display an Icon which leads me to the last two options the display and size of the Icon. [Figure-34a]
Part 2 - Date [Pro]
This section is for Pro subscribers and contains all the options that control the look and layout of the Date part of each tweet. You can choose to display a Date or not, it's Prefix, Icon and Alignment. [Figure-34b]
Part 3 - Content
In this section you can choose the Format and Alignment of the Tweet's text. If you have limited space or you have chosen to use a large format you may have to employ the last option in this section Break Links to to break any content links. [Figure-34c]
Part 4 - Links [Pro]
This section is for Pro subscribers and contains all the options that control the look and layout of the Links part of each tweet. You can choose to display the Links or not and their Alignment. The links include Reply, Retweet and Favorite. [Figure-34d]
Footer [Pro]
This section is for Pro subscribers and allows the display of a module Footer with the username of the Twitter feed and an editable Subtitle. [Figure-34e]
Advanced
The CoalaWeb Tweet module also has a few of what I consider Advanced Options such as the UIkit Prefix option for when you are using a YooTheme template you can set it to UK otherwise I recommend leaving it with the default CW. In this section you can also choose to not load the module's CSS as well as the option to assign a Module Class Suffix and choose whether to use Cache including the Cache Time. [Figure-34d]
Plugins
Social Likes [Pc][Pro]
The CoalaWeb Social Likes plugin is a content plugin designed to display all of the popular social networking vote buttons in several formats and locations within your Joomla and K2 content.
All of the configuration options for this particular plugin can be found in the accompanying component under Extension Options. If you can't see the buttons make sure you have the plugin installed and published and that you have selected the appropriate configuration options. [Figure-19]
Social Share [Pc][Pro]
The CoalaWeb Social Share plugin is a content plugin designed to display all of the popular social networking share buttons with several icon themes and locations within your Joomla and K2 content.
All of the configuration options for this particular plugin can be found in the accompanying component under Extension Options. If you can't see the buttons make sure you have the plugin installed and published and that you have selected the appropriate configuration options. [Figure-19a]
Social Panel [Pc][Pro]
The CoalaWeb Social Panel is a content plugin designed to display a variety of social network vote buttons in your Joomla and K2 article views. They will be displayed in a vertical collapsible bar to the side of the article content.
All of the configuration options for this particular plugin can be found in the accompanying component under Extension Options. If you can't see the buttons make sure you have the plugin installed and published and that you have selected the appropriate configuration options. [Figure-20]
Open Graph [Pc][Pro]
The CoalaWeb Metadata system will help generate meta data in the Open Graph, Twitter Card and Schema.org formats and then place it in the head of your web pages. This information will then be used by elements such as the Facebook, Twitter and Google + vote and share buttons to get the best representation of the content being shared or voted on.
Part 1 - Open Graph
What is Open Graph?
An Open Graph object is a regular web page with additional structured data marked up using RDFa Core 1.1 syntax placed in your HTML document's element. A Facebook server downloads a copy of your web page, extracts relevant data, and stores an object representation for future use. Facebook attempts to extract relevant data from links shared on Facebook as well as URL properties passed as part of an Open Graph action.
Facebook Open Graph objects are marked up using Open Graph protocol,properties specific to Facebook, and properties specific to your Facebook application.
The CoalaWeb Metadata plugin allows you to add default values for the parameters outlined below or dynamically populates them in a variety of different ways see Social Metadata Options for more details. [Figure-21]
Open Graph Parameters
- og:url
- og:type
- og:title
- og:image
- og:description
- og:site_name
- fb:app_id (Optional)
- fb:admins (Optional)
Part 2 - Twitter Card
What is a Twitter Card?
With Twitter Cards, you can attach rich photos, videos and media experience to Tweets that drive traffic to your website. Simply add a >few lines of HTML to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that's visible to >all of their followers.
The CoalaWeb Metadata system allows you to add default values for the parameters outlined below or dynamically populates them in a variety of different ways see Social Metadata Options for more details. [Figure-21a]
Twitter Card Parameters
- twitter:url
- twitter:title
- twitter:image
- twitter:description
- twitter:creator
- twitter:site
- twitter:card
Part 3 - Schema.org
What is Schema.org?
Schema.org provides a collection of shared vocabularies webmasters can use to mark up their pages in ways that can be understood by the major search engines: Google, Microsoft, Yandex and Yahoo!
When you share something through Google the information that is included in the accompanying window (rich snippet) can be more accurately chosen using schema.org tags.
The CoalaWeb Metadata system dynamically populates a series of JSON-LD [JavaScript Object Notation for Linked Data] encoded elements to meet Google's Structured Data Test criteria. [Figure-21c]
Schema.org Parameters
"@context": "http://schema.org",
"@type": "Article",
"inLanguage" : "",
"headline" : "",
"datePublished" : "",
"dateModified" : "",
"articleBody" : "",
"mainEntityOfPage" : {
"@type": "WebPage",
"url" : ""
},
"author" : {
"@type": "Person",
"name" : ""
},
"publisher" : {
"@type": "Organization",
"name" : "",
"logo" : {
"@type": "ImageObject",
"url" : ""
}
},
"image" : {
"@type": "ImageObject",
"url" : "",
"width" : "",
"height" : ""
}
Meta Fields [Pc][Pro & J3.+]
The CoalaWeb Meta Fields content plugin helps add Open Graph and Twitter meta information to your Joomla content while using the Article and or Category editors.
Part 1 - Article Editor
When using your article editor you will now have a new tab available called CoalaWeb. This new tab contains Metadata input fields that will override all other settings you have chosen and are specific to the article currently being edited.
The first section gives you the opportunity to add a specific Type, Title, Description and or Image for the article being edited. Depending on what you have chosen in the Component options these setting will potential affect the display of both Open Graph and Twitter meta tags.
Keep in mind that all these settings are optional and you can feel free to leave one or all of them blank to let the system decide for you. Example use would be setting the Type in the component or your categories options to Blog and for your articles to Article. [Figure-28]
The second section gives you the opportunity to add Open Graph Video tags to your articles. If you want to add video tags please fill in all the options which included Type, URL, Secure URL, Width and Height. [Figure-28a]
Typical video settings would look something like this:
- Type: Flash
- URL: http://www.youtube.com/example
- Secure URL: https://www.youtube.com/example
- Width: 1280
- Height: 720
Part 2 - Category Editor
When using your category editor you will now have a new tab available called CoalaWeb. This new tab contains Metadata input fields that will override all other settings you have chosen and are specific to the category currently being edited.
You will have the opportunity to add a specific Type, Title, Description and or Image for the category being edited. Depending on what you have chosen in the Component options these setting will potential affect the display of both Open Graph and Twitter meta tags.
Keep in mind that all these settings are optional and you can feel free to leave one or all of them blank to let the system decide for you. Example use would be setting the Type in the component or your categories options to Blog and for your articles to Article. [Figure-28b]
Menu Meta [Ps][Pro & J3.+]
The CoalaWeb Menu Meta system plugin allows you to add Open Graph and Twitter Card tags to basically any menu item. To stop conflicts with the other CoalaWeb content meta data plugins these tags will not be displayed for regular Joomla content items such as Categories and or Articles. If you want to override the automatic creation of meta tags for a Joomla Article or Category please use the CoalaWeb tab displayed in their respective editors. [Figure-29]
Facebook JS [Ps]
This plugin has been specifically designed to load the Facebook JavaScript library making it available to all the parts of the Social Links system while ensuring it is only loaded once. It also incorporates the Facebook Application ID entered in the component configuration options. [Figure-21b]
Zoo Elements [Ps][Pro]
The CoalaWeb Zoo plugin is a system plugin designed to integrate custom elements & layouts into your Zoo applications. Currently there are two custom elements created by this plugin and they are explained in detail below.
Custom Element - Social Likes
This custom element integrates a variety of popular social vote and or share buttons into your zoo applications. Once the plugin is installed and publish you will be able to carry out the following steps to get them displaying through out your Zoo content.
Step 1
Open up Zoo and click the small Gear Icon. [Figure-22]
Step 2
Now select the App you want to add the CoalaWeb Social Likes button too for this example we will choose Blog so click Blog and then select Article > Edit Elements. [Figure-22a]
Step 3
If the plugin was installed and published properly you should now have a new element available under Social called CoalaWeb Social Likes click it once to add it to your Article layout. [Figure-22b]
Step 4
Now give your new element a Name, Description and choose the appropriate settings for the other options, when you are ready click Save & Close. [Figure-22c]
Step 5
Now we need to add the newly available element to our Template for this example we are using the Default template and the Full Layout. [Figure-22d]
Step 6
Once the new window has opened you can drag and drop the CoalaWeb Social Custom element over to your desired location in this example I have chosen Bottom. Feel free to turn on or off the Label or even give it an Alternative Label. When you are happy click Save & Close. [Figure-22e]
Step 7
Now in each of your Articles you will have a new option named what you chose back at the start in our case CoalaWeb Social. Just set it to Yes and the buttons will magically appear. [Figure-22f]
Custom Layout - Open Graph
This custom layout integrates Open Graph metadata into your Zoo content which makes sharing and voting much more accurate and professional.
The Open Graph tags added to your Zoo content will come from two sources which are explained in detail below.
Source 1
The first source is the Component Configuration Options and they cover the follow Open Graph tags. - og:type - fb:app_id (Optional) - fb:admins (Optional)
Source 2
The second source is the CW Open Graph Extension Layout which covers the following Open Graph tags.
- og:url
- og:title
- og:image
- og:image:width
- og:image:height
- og:description
The next three positions are specifically used for Schema (microdata) so if you have turn this option on make sure to assign items to all of the avaliable positions. This will ensure that you pages pass Google's Structured Data Test.
- og:author
- og:creation:date
- og:modification:date
Setting up the CW Open Graph Extension Layout is easy just follow the steps outlined below.
Step 1
Open up Zoo and click the small Gear Icon. [Figure-22g]
Step 2
Now select the App you want to add the Open Graph tags too for this example we will be using Blog. In the next screen you should now see a new Article Extension Layout called CW Open Graph select it to move onto the next step. [Figure-22h]
Step 3
In this step you will need to Drag and Drop the relevant Core and Custom items over to their Open Graph Positions. If you are not sure what to place where use the image below as a guide. [Figure-22i]
Now if you check the source code of one of your Zoo Content Items you should now see Open Graph tags and depending on your other setting Twitter Card tags as well. [Figure-22j]
If you have chosen to display Schema (microdata) you will also be able to see it displayed in your page's source code. [Figure-22k]
