CoalaWeb Social Links is a complete social media package to help your site visitors bookmark content, follow you through a variety of social networks and vote for particular content with social buttons.
Parts of the system
The Component makes setting up the content plugins a breeze as well as making updating to a new version a one click procedure.
The Social Module gives you the option to choose which bookmarks and follow us links to display including the ability to create custom ones plus it's packed full of other configuration options to make it as flexible as possible.
The Facebook Like Box Module is a social module that enables Facebook Page owners to attract and gain likes. The like box enables people using your website to see how many people like the Page, read recent posts from the Page and like the Page with one click, without needing to visit the Page.
For content such as articles there are several Plugins to make adding and displaying vote buttons in your Joomla, K2 or Zoo content a five minute job. CoalaWeb Social Links also comes with a plugin to take care of adding Open Graph data to your website to make sure those vote and share buttons grab the right information ready to share.
This guide will help you set up this CoalaWeb extension quickly and easily taking full advantage of its features.When you install CoalaWeb Social Links all the parts of the system will be installed at the same time making installing, upgrading and uninstalling a breeze.
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]
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]
Some of the options selected here will affect the display of the buttons in Joomla, K2 and Zoo.
The first tab contains the Content Plugin settings. The first option allows you to choose if you want the social buttons to be displayed everywhere for example in all items displayed in a blog layout or only when you have selected a particlar article. This will affect the display of the buttons in both Joomla and K2.
The next two options give you an opportunity to select which categories you wish the buttons to be displayed in for both Joomla and K2. If you wish to select more than one just hold down Shift on your keyboard and select the categories with your mouse. [Figure 3]
When you scroll down the page you find the Layout Options here you can choose to display the buttons above or below the content and also the button style either Vertical [Bubble] or Horizontal.
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 4a]
Below is an outline of the Open Graph setting available in the CoalaWeb Open Graph plugin. This plugin will help generate meta data in the Open Graph format and then place it in the head of your web pages. This information will then be used by elements such as the Facebook vote and share buttons to get the best representation of the content being shared or voted on.
The first option Only Articles allows you to choose if you want to add Open Graph information to only the article views or to Category Blog and Featured views as well. [Figure 4b]
If you have chosen a Default Title this will always display next to og:title meta tag. [It's recommended to leave this parameter blank] [Figure 4b] If you haven’t chosen a default title the title will be populated like this:
Category View = The category title.
Featured View = The title of the first article.
Article View = The title of the article being viewed.
If you have chosen a Default URL this will always displayed next to og:url meta tag. [It's recommended to leave this parameter blank] If you haven’t chosen a default URL the plugin will use the current URL of the page being viewed. [Figure 4b]
If you have chosen a Default Site Name this will always displayed next to og:site_name meta tag. [It's recommended to leave this parameter blank] If you haven’t chosen a default Site Name the plugin will use the Site Name set in your websites Global Configuration. [Figure 4b]
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. [Figure 4b]
1st attempt: If you have chosen a Default Description this will always displayed next to og:description meta tag. [It's recommended to leave this parameter blank]
2nd Attempt: If you haven’t chosen a default description the plugin will move onto the meta description of the article being viewed or of the first one displayed in Blog or Featured view.
3rd attempt: If the first two 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.
Choose one of the option from the drop down list. Article is the default choice. [Figure 4b]
Let's face it the image is very important so I have put a bit more time into how it will be found. [Figure 4b]
1st attempt: If you have chosen a Default Image this will always be displayed next to og:image meta tag. [It's recommended to leave this parameter blank]
2nd attempt: If you haven’t chosen a default image the plugin will move onto 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 meta tag. Supported image types are jpg, png and gif.
Last attempt: The last thing the plugin will do is search through the article content to find an image and if it does that image will be add to the og:image meta tag.
Note: Facebook will only use images that are at least 200x200 px. Generally, FB's parser prefers images that are (1) measured in multiples of 100 and (2) square format.
Here you can enter your Facebook Application ID. [Figure 4b]
The CoalaWeb Social Links extension comes with a Quick Icon module and plugin to help you know if you have the most up to date version of the extension. They work together to display an update icon in the Joomla Control Panel under the title CoalaWeb Quick Icons but if you prefer to have the icon display within the default Joomla Quick Icons module use mod_quickicon in this field.[Figure 5]
The CoalaWeb Social Links extension comes with a built in one click Live Update system so both Core and Pro users can keep their extension up to date. For the Pro users you will have to copy and paste your Download ID into this field to allow the update system to work. Once you have added your Download ID the message displayed in the Control Panel will disappear. If you try to update and it fails make sure you still have a valid subscription and the ID is correct. [Figure 6]
To find your Download ID log into coalaweb.com and from the top menu select Members > My Subscriptions scroll down and under My Subscriptions there is a Module called Download ID now copy the code and paste it back in your component configuration making sure not to include any spaces. [Figure 7]
In this section you can choose the icon style, size and alignment, title alignment as well as the title format. You also have the option to turn on or off the display of the Bookmark 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 9]
This section controls what is displayed in the Bookmark This part of the module. You can choose to display a title including what text will be displayed. Note: If your site is multilingual leave blank and use the language files. 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 Bookmark 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. For the social bookmark options themselves, scroll down the list ticking the ones you want to display and that's it for the Bookmark This section. [Figure 10]
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. Note: If your site is multilingual leave blank and use the language files. 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. Now for your social links, scroll down the list ticking the ones you want to display and adding their corresponding links and that's it for the Follow Us section. [Figure 11]
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 then two more options. First is the Hover Text this displays when the icon is hovered over by a mouse. Secondly and more importantly is the ability to select the Custom Icon you want to display keeping in mind what size you selected in the General Options and that's it you now have a custom icon. [Figure 12]
When adding links use the domain without the http:// for example www.facebook.com.
The CoalaWeb Social Links module also has a few of what I consider Advanced Options such as the option to assign a Unique Module ID to stop conflicts, 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. Next is the NoFollow option this provides a way to tell search engines don't follow a particular link. The last option is whether to display a Link Back to CoalaWeb as always it's appreciated but its up to you plus you can choose what text to display next to the link. Note: If your site is multilingual leave blank and use the language files. [Figure 13]
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. Note: The URL should be in the following format https://www.facebook.com/CoalaWeb. The next option is for you to add your Facebook Application ID if you have created one. The last option is to select what format you want the widget to display in you have a choice of HTML5, XFBML and IFRAME. [Figure 21]
A word on Responsiveness I have tried to make the CoalaWeb Like Box Module as responsive as possible with in the limitations enforced by Facebook. To get the best results I recommend leaving the Widget Min Width small, no FB Root Div and just adjust the height to get the best result possible.
This brings me to the actual options available in this section the first one is the Widget Min Width set this to something small as some responsive template frameworks will try to shrink down a module before moving it entirely as the page width decreases. Next is the Widget Height here I recommend testing a few different heights with the other setting you have chosen I find 500 quite good if for example you are displayingfaces and the Stream. Note: If you do not see the faces, please set a bigger height (e.g. 630). 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 Like Box to be a bit more compact. The last option in this section is the FB Root Div I recommend leaving this option set to No unless you have a very specific reason and especially if you are look for the best responsive results.[Figure 22]
This section contains some style options the first one is the Color Style you have a choice of Light or Dark. Note: These widget color styles are controlled by Facebook. The next option allows you to turn on or off a Border around the widget. The next one allows to chose if you want the small Face boxes to be displayed in the module. The last one gives you the option to turn on or off the Facebook Header at the top of the module. [Figure 23]
In the this section you have two option the first one is the choice of turning on or off the display of a Stream of the latest posts from your Page's wall. The second option is Force Wall this is for Places, specifies whether the stream contains posts from the Place's wall or just checkins from friends.[Figure 24]
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.
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 Open Graph plugin allows you to add default values for the parameters outlined below or dynamically populates them in a variety of different ways see Open Graph Plugin Options [Pro] for more details.
The CoalaWeb Zoo Elements plugin is a system plugin designed to integrate custom elements and in this case a variety of popular social vote buttons into your zoo applications. Once the plugin is installed and publish you will be able to carry out the following steps and display them where ever you want through out your Zoo content.
The first step is to open up Zoo and click the small Gear Icon. Figure 14
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 15
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 16
Now give your new element a Name, Description and choose the appropriate settings for the other options and when you are ready click Save & Close. Figure 17
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 18
Once the new window has opened you can drag and drop the CoalaWeb Social Custom element over to your desired location 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 19
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 20