Start a new topic
Answered

Social Media Buttons and Open Graph implementation

For the first time, I've been taking an in-depth look at the social media sharing buttons in the Share This Page widget and the Social Share Buttons widget to see how they behave - what information they pull and pass on.


Here are my findings:

===============

1) Twitter: doesn't rely on Open Graph. It pulls the title from the TITLE tag and the URL from a canonical link element. No issues here as far as I could see.


2) Facebook: clicking the LIKE button increased the count but initially I couldn't see any did not see any activity on my FB page that correlated.


The code in both widgets looked like this:

<iframe src="//www.facebook.com/plugins/like.php?href=<?=urlencode("http://".$w[website_url].$REQUEST_URI)?>&amp;width=52&amp;layout=box_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=65&amp;appId=264346580251702" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:52px; height:65px;" allowTransparency="true"></iframe>

 

After reading through some pages in FB developers doc as well on other websites, I decided to try the code generated via https://developers.facebook.com/docs/plugins/like-button


I replaced the FB iframe in the Widget Code section with the following...

<div class="fb-like" data-href="<?php echo 'http://'. $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; ?>" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></div>

I also had to add the following to the Javascript Code section...

<div id="fb-root"></div>
<script>(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#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


Then I tested the LIKE button again. This time the count increased AND a popup for additional comments appeared...


Checking the Activity Log on my FB account, I found the Like/Comment I had just made. Besides there, I'm not sure where else on FB it should be showing up.


I also noticed a couple Likes from past months that I'd done on other profile pages. So, that means that the original code must have been working.



Anyway, digging deeper, I arrived at FB Open Graph Object Debugger where I tested a couple profile pages. The results included some warnings about MISSING og (open graph) tags.


Hopefully as BD works on update the CORE of the platform they'll look into implementing Open Graph tags therein: https://developers.facebook.com/docs/sharing/best-practices



3) LinkedIn: Just as with FB, the use of Open Graph is encouraged - https://help.linkedin.com/app/answers/detail/a_id/46687/ft/eng


One of the things I couldn't quite figure out with FB and LinkedIn was how they were deciding which image to use when sharing.



4) G+: I actually haven't tested this one yet. 


Anyway, those are my findings. Looking forward to hearing what others have to say on the matter.


Best Answer

Hi Lionel, It will be added in a future release with other social changes already implemented.


Hi Dahlian, 


Thank you for sharing all this information with us. 

Luis and I will be analyzing this functionality and add the resolution for the future releases column.


Thank you again! :) 


1 person likes this

Excellent code Dahlian, after testing it on multiple social widgets, it works perfect and, as I could see, it uses the latest Facebook API version. I will be talking to the lead developers about this and how soon it could be implemented. Amazing good work.


1 person likes this

Hi Luana & Luis!,


Glad to help out. You might also find the following article on using Social Meta Tags on various platform to be a valuable resource: https://moz.com/blog/meta-data-templates-123


Regards,

Dale


Hi Dahlian, 


Thank you for this information.

The article is really interesting. 

As Luis said, we will be talking to the lead developers about this to be implemented in all sites. 


Thanks again! :)


1 person likes this

Luana / Luis


How did this project end up? Do you think this will be improving all sites? This was excellent info from Dahlian, Thank you.


Thanks

Lionel

Answer

Hi Lionel, It will be added in a future release with other social changes already implemented.


1 person likes this