Diazo and facebook are friends

Sometimes your company logo is not the first picture loaded in HTML.

To be in control and don’t let Facebook pick any random image in your site you can tell facebook which thumbnails to use from your website. When using Diazo, you don’t have to edit any part of Plone, just some html in your index.html. To take control you can use the “image_src” attributed located in your head section. You can have multiple images so people can choose the one they like.

To define this you can simply add the following lines to your index.html

&lt;head&gt;
  &lt;link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" /&gt;

  &lt;!-- facebook images --&gt;
  &lt;link rel="image_src" href="images/logobig.jpg" /&gt;
  &lt;link rel="image_src" href="images/logo-square.png" /&gt;
  &lt;link rel="image_src" href="images/logo.png" /&gt;

  &lt;title&gt;Welcome to Plone — Site&lt;/title&gt;
&lt;/head&gt;

When you need a direct like button to your company facebook profile, you can use products like addthis or share this, but in both cased people will like your page and it will go into the big void of facebook liking structure. This is because the default links made by addthis are your own url and that’s not the same as liking your company url like facebook.com/mycompany.

To do this you can simply put the following html into your index.html,

&lt;div id="fb-root"&gt;
&lt;script&gt;
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      status     : false,       // Check Facebook Login status
      xfbml      : true         // Look for social plugins on the page
    });
  };
  (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/all.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
&lt;/script&gt;

&lt;div class="fb-like pull-right"

     data-href="https://www.facebook.com/mycompany"

     data-width="The pixel width of the plugin"
     data-height="The pixel height of the plugin"
     data-colorscheme="light" data-layout="button_count"
     data-action="like" data-show-faces="false" data-send="false"&gt;

Note the FB.init, status = false, this is needed so people do not need to be logged in to facebook before having the option to like your page.

The url mentioned in “data-href” is the url your visitor will like when hitting the button.

Diazo and facebook are friends

Bekijk ook