The Open Graph (og) is very important for sharing and visibilty on social networks, particularly on Facebook.
Normally inserted in the head of the page. Like:
<meta property="og:site_name" content="Blog NewtVision" />
<meta property="fb:app_id" content="facebook_app_ID" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.newtvision.com/blog/" />
<meta property="og:title" content="Blog NewtVision - Easy Web Solutions Consulenze e Applicazioni web TYPO3 Roma" />
<meta property="og:description" content="Il nostro blog raccoglie articoli, suggerimenti, trucchi, consigli, opinioni, eventi su TYPO3, il Design, i Database..." />
<meta property="og:image" content="http://www.newtvision.com/fileadmin/templates/newtvision.com/upload/blog/blog-newtvision.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1915" />
<meta property="og:image:height" content="441" />
PROBLEM
What's up when we have OnePage website and we want share a specific section in correct way showing different information?
We can use, as example, an event list with title, description, date and image. Also, we want that share link will point directly to the section desidered. For Facebook, the sharing elements come from og information of shared page but in this case the og information come from OnePage and not from the section. How we can customize information like image or description?
SOLUTION
In order to share correct information it is possible to use "Feed Dialog" or "Share Dialog" of Facebook. It depends from type of information but the methodology is the same.
Below, the steps to integrate information using "Share Dialog" methodology:
STEP 1 - action on js
Include Facebook API including appID.
window.fbAsyncInit = function() { FB.init({ appId : 'xxxxxxxxxxxx', xfbml : true, cookie : false, version : 'v2.5' }); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
Create a custom function, that accept as argument the elements to use like og. This function will be activated on share button, and it will use FB.ui to call share_open_graph and generate the classic pop up with custom og elements.
Our function accepts url, image, title and description but you can use all information that you need.
function fbShare (url, image, title, description) {
if (typeof(FB) != 'undefined' && FB != null ) {
// run the app
FB.ui({
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object : {
'og:url': url, // your url to share
'og:title': title,
'og:description': description,
'og:image:url': image,
'og:image:width': '1920',
'og:image:height': '1200',
}
})
},
// callback
function(response) {
return true;
});
} else {
//Error action on FB object. Example: Cookies disabled
}
return true;
}
STEP 2 - template action
Each event will have a custom ID, inserted in hml tags like <section>, <div>, etc. , in order to built an anchor link.
<dic class="anchor" id="evento-56a8e0f7975a018507b785ca">...</div>
In the dynamic building of events, done as you prefer (fluid, php, etc.), we will go to insert the physical button containing function fbShare
<a href="#" onclick="fbShare ('https://domain/path/page/#evento-56a8e0f7975a018507b785ca', 'Image link', 'Event Title', 'Event Description'); return false;" ><i class="icon fa fa-facebook"></i> </a>
This way replaces the obsolete and deprecated method sharer.php?s=&p[url]=p[images][0]=...of Facebook