In this article we are going to explore different ways to share your RacontR project on social media platforms and how to provide your users with the possibility to share the project themselves on their personal accounts.
Information and precautions
Be aware that during your sharing tests on a social platform, there may be more or less significant delays before the changes made on your side are taken into account by the platform itself
Remember to empty your browser's cache after each change as well as republish the page
There often is a difference between what is displayed when preparing a post (Facebook, LinkedIn, Twitter ...) and the final display on news feeds. You might want to preview how your posts display with private publication/sharing tests, when the platform allows such tests
Technical information and recommandations
1- Open Graph
The Open Graph protocol (originally implemented by Facebook and now open source) allows for rich display of any web page shared on social media.
RacontR natively implements the 4 required OG tags on each page of your projects: og: title - og: type - og: url - og: image
Some projects may require optional tags. For instance, you might want to add the og:locale tag if your project is to be displayed in different zones and languages
If you integrate your project on an existing web page, make sure the OG tags are properly placed, especially if the container page already includes a header
Learn more :
2- Recommendations
When filling in the "Title" field, make sure you do not exceed 55-60 characters. Also, be aware that if your title is longer than one line, the description may be truncated
For the "Description" field, it is recommended that you keep its lenght under 60-65 characters
See Facebook Open Graph recommendations concerning images sizes. A ratio of 1:9/1 and a minimum of 600 pixels resolution are usually recommended. Anticipate the use of high-resolution display screens and choose a high-quality image (at least 1200/620 px) while keeping the file size under 8MB
Settings
Depending on the link you use for sharing on social networks, different titles or descriptions will be used. Here are the different setting options you need to take into account.
1- Project Configuration Page
You can access the project configuration page from the home page of your RacontR account which lists all your projects. Hover over the thumbnail of your project and click on the gear icon.
Upload your image in the "Thumbnail" part. It will be used both to illustrate the banner on this configuration page, the thumbnail of the project on your account page as well as social media image in some cases.
Don't forget to hit "Save Settings" once you're done.
2- Project Settings page
You access the Project Settings page from the RacontR editor, by clicking on the gear icon in the top-right menu.
You need to fill in two fields:
The "Project description" tab with the title and description (2). The purpose for these fields is generally to work on the SEO of your project, but in one occurence it will serve as title and description for your social media posts
The "Social" tab where you will fill in the description box and add a sharing image (3)
3- Page properties
In the panel of your page properties, fil in the "Title" and "Description" fields as well as an image you want to use for sharing this particular page (4)
Note that there is an exception for the home page. This is the page that you find in red in the project scenario, by default the one that was created first (but you can set any page as the home page for your project in the page properties tab).
For the home page, if you want the information set in the "Social" tab of the Project Settings to be taken into account, you must leave the "Title", "Description" and "Image" fields empty. Only the name of your page will be retrieved for the title of the post, since the URL of the home page is the URL of the project. And the configuration of the "Social" tab in the Project Settings corresponds to the description of the project when shared.
SHARING MODES
Whether you wish to share your project or just one specific page, here are your options as well as which element your previously setup that will be retrieved and displayed in both situations
1- Project sharing
You have two options here : share an iframe of the project or share the URL from your project's home page (recommended)
Share with the iframe : this is the link you find on your RacontR account's projects listing page. By hovering over the thumbnail (previously published) you access the iframe (5)
If you choose this option for sharing your project (you can right-click to copy the link), the pre-set parts taken into account are the following : the thumbnail image from your configuration page as well as the title and description set in the Project Settings page.
Sharing with your homepage's URL : you'll find the URL in your page's properties tab. That's the publishing link ending in "index.html" placed right under the name of the page (6)
The pre-set parts taken into account when sharing this link are as follows: the description and the image will be those entered in the "Social" tab of the Project Settings window. The name of the homepage (which you find in the page parameters tab) will be the title of the post.
2- Sharing a specific page
You can choose to share one particular page from your project (other than the homepage). For this you need to use the publishing link ending in .html that you find in the page properties tab (6)
The pre-set elements taken into account when sharing the page are those you've prepared in the same page properties tab : "Title", "Description" and "Social Image".
SOCIAL PLUGIN
1- Parameters
Once you've added the "Social" object to your page, you can access its parameters by clicking on "Element Parameters" in its properties tab.
In the element parameters panel you can :
select which social networks you want displayed on your page (7)
select a theme for the icons style - note that both "Plain" and Minima" themes will be almost (if not completely) invisible if your scene's background colour is white or in any very light colour (8)
display the name of the social network (8)
display "likes" and "shares" counts (8)
Other options include :
add a custom URL if you want your users to share another link than the one for the current page. This custom link can be any link from the project or an external website - if no custom link is specified, the current page will be shared by users (9)
you may specify a custom text for sharing on Twitter. If no description is entered in this box, the description set in the page properties tab will be used (10)
2- Display on social networks
If you haven't entered any custom URL in the (9) field, here are the elements that will appear on the different networks :
Facebook : title, image and description from the page properties tab
Twitter : the description from the (10) field if specified. If not specified, the title, image and description from the page properties tab are used
Google+ : title, image and description from the page properties tab
LinkedIn : image and title set in the properties page - no description will appear
Pinterest : the image from the page properties tab is taken into account. The platform displays the page's name for the creation of the pin
If you set a custom URL in (9) :
Facebook : title, image and description from the page properties tab
Twitter : title, image and description from the page properties tab - unless (10) is filled
Google+ : title, image and description from the page properties tab
LinkedIn : Image and title from the page properties tab, no description
Pinterest : Image from the page properties tab. The platform displays the page's name for the creation of the pin