Social flippin' networking

justinhill

Registered User

Join Date: Apr 2007
Posts: 135

20-Jul-2011, 07:17 PM

I wanted to add all the tweet-face google-pie nonsense to my product pages so, being stupid, I did it the hard way by following the developer stuff on the relevant sites.

Then I discovered www.addthis.com, which is where I should have started in the first place except...

Doing it the hard way revealed a couple of things that have made the posts to facebook work nicely, including the right images and links, and updating the facebook insights graphs properly. In case anyone's interested here's what I did.

Note that my 'extended info' pages are wrapped with the outer layout and contain add to basket buttons etc. and an example of the page itself is http://www.cka-net.com/acatalog/info...006513500.html

Here's the first thing:

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

Then, I've got this just below the actinic metatags:

Code:

	
	<meta property="og:title" content="<actinic:variable name="ProductDescription" /> from CKA"/>
	<meta property="og:type" content="website" />
	<meta property="og:url" content="http://www.cka-net.com/acatalog/info_<actinic:variable name="ProductReference" />.html" />
	<meta property="og:image" content="http://www.cka-net.com/acatalog/small_<actinic:variable name="ProductReference" />-1.jpg" />
	<meta property="og:site_name" content="CKA Limited Shop" />
	<meta property="fb:admins" content="100002597721927" />

and this just above the /head:

Code:

<!-- facebook stuff -->
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: '135056993242295', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

	
<!-- end of facebook stuff -->
<!-- plus1 stuff -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div id="fb-root"></div>

The long numbers were provided by facebook during the 'get code' process and are unique to my i.d.

At the point where the buttons actually appear is this:

Code:

<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_google_plusone"></a>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>

</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e25cab960e060f4"></script>

I'm sure the professionals here have done this years ago and much better than I have but the above might be interesting to other bumbling amateurs like me.

Justin

-
Justin Hill (Half-to-three-quarters-baked Mac expert, laptop evangelist and vintage Hammond enthusiast)
http://www.cka-net.com

Tags: None

Announcement

Social flippin' networking

Social flippin' networking