Pro Modules
SocialDo you use social media? Perhaps to promote your site? Or may you just want to encourage sharing by members on your site? It can be a powerful medium. And the accelerator platform gives you several tools to help you take advantage of it.
Basically, it include a built in "social" module that extends your basic functionality in several ways. This module cannot be loaded dynamically, so if you want to use it, be sure to enable it on site.config:
enableSocial
It consists of three simple functions: Sharing, Tweet, and Meta. Here's what they do:
Share
The share function takes advantage of the free add2any sharing service to put sharing buttons on your site. To make it work, simply put this function on a page and specify a link, title, and hashtag parameter. If no link is used, the current page will be used. If no title is used, the current page title will be used. And if no hashtag is used, a hashtag generated from your site name will be used. Here's an example:
<(share link='offer.premium' title='My special class' hashtag='#MySpecialClass')>
In most cases, the best place to put this code is in the footer of a section of your site that is likely to be shared--rather than putting it on each page individually. By simply putting <(share)> in blog.footer, every page will have it's own custom sharing buttons, as the title and link will be drawn from the page. If you wanted to allow for custom hashtag, you could do this: <(sharing hashtag='{:hashtag}')>. Set a hashtag data variable, and it will be used. If not found, the default site hashtag will be used, which converts a name like "Demo Site" to the hashtag #DemoSite.
You may want to think through where you put these sharing invitations. You could, for example, put one on your code.offer.class-congrats page, along with text to encourage people who have just signed up to share this class with their friends. In that case, you would want to point the link to the primary offer page, rather than the congrats page. The possibilities are quite broad.
This script uses the code.embed.sharing page in our platform, which takes its code from www.addtoany.com. You are welcome to read their documentation about how to customize this script according to your needs, or you can simply use it as it is.
Tweet
It's become popular to add "click to tweet" quotes to blog posts. Not only does it encourage sharing, it has several other benefits. Visually, it breaks up a long screen of text. It's much quicker to generate than an image. And it allows you to emphasize certain lines in your content.
To create a click to tweet element on your site, simply use the tweet function and specify a line of text as the main parameter, like this:
<(tweet "This is a really important line from my blog post...")>
Once again you can specify a particular link, and a hashtag. If not, it will create a link to the current page, and the hashtag will be generated from your site name.
This function uses the code.embed.tweet page, which can be styled as desired.
Meta
The meta function is used to generate a long series of hidden meta and og tags in your pages which are used by search engines and social media sites to help ensure shared pages are displayed properly on those platforms. In particular og tag refers to facebooks proprietary tagging system for shares on its platform, though other services may use this information as well, so it's worth including.
Here are the tags this script supplies, and where it gets it's information from. Note that you can also override most of these variables by setting them as parameters in the meta function itself. Also note, while this script does set the "meta title" tag, it doesn't set the "title" tag, as that is set by most skins. This could result in different values for those two settings.
meta title: | The title data variable on the page. |
meta description: | The description data variable on the page, or if not found, the mydescription value set in site.config. |
meta keywords: | The keywords data variable on the page, or if not found, the mykeywords value set in site.config. |
link canonical: | URL of the current page. |
fb app_id: | The fbAppID value set in site.config. This is a special number generated by facebook. |
og site_name: | The mysite value set in site.config. |
og url: | Same as the link above. |
og title: | Same at the title above. |
og description: | Same as the description above. |
og type: | This is set to "article" by default. |
og author: | This is drawn from the page data value for fbauthor if found. If not it will look to fbAuthorID set in site.config. Note: this should be a link to the author's facebook profile. |
og image: | This looks for an image data value on the page. This should be a link to the image file name you want associated with this page. If it is in a subdirectory (like files/blog) set imgdir=files/blog as a parameter. You can also set it to the full url, in either the data var or in the function call. |
og video: | This looks for a video data value on the page. This should be a link to the video file name you want associated with this page. If it is in a subdirectory (like files/blog) set videodir=files/blog as a parameter. You can also set it to the full url, in either the data var or in the function call. |
If this script cannot find certain data, it will not include those settings in the page. The more information it is able to generate however, the more accurate shares of pages on your site will be.
To test that the meta function is working properly on a page, go to facebook's debugger page and test the url you want to check. Here's their link:
https://developers.facebook.com/tools/debug/
More Options
There are many other ways to incorporate social media into your site. For example, you can easily embed your twitter or facebook feed into your site. How? Do a quick google search for how to do that and it should point you to simple steps to take to generate a custom code snippet for your feed. Copy that snippet to your clipboard.Next create a page like code.embed.facebook or code.embed.twitter and paste that code snippet in.
Last but not least, go to the page where you want to display that feed and simply use the embed function: <(embed facebook)> or <(embed twitter)>. Your feed should pop in immediately.
You can use this same approach with any embeddable script on any platform. This includes all sorts of things: social media posts share counts, videos (ie youtube), calendars (ie google), comments (disqus), and much more. If you need help embedding something specific, let me know.