You are currently browsing the archives for February, 2014.

How to get a specific image, title and detail to display in the facebook share on facebook when someone clicks the share button on your page

February 28, 2014 // Posted in Computer Tips, General, Main, Tips and Tricks (Tags: , , , , , , , , , , , , , , , , , , , ) |  No Comments

 

#facebook

Facebook have recently removed some functionality from the sharer.php and share.php, so that you can no longer send customised parameters to the sharer such as images, title and detail description.

You now have to either create an app or you can use the Open Graph tags.

The open graph tags are used in the following way:

Add the following to the head section of your page, either in an html fragment or directly into the page HTML:
<meta property="og:title" content="My Web Site Title" />
<meta property="og:type" content="website" />
url" content="http://www.mysite.co.uk" />
<meta property="og:image" content="http://www.mysite.co.uk/images/myimage.jpg" />
<meta property="og:site_name" content="My Site" />
<meta property="og:description" content="Here would go the details about your site that you would like to appear in the description area." />
<meta property="fb:admins" content="1996403603" />

Replace the highlighted areas with your own details.

The fb:admins is the id of the user that manages your facebook pages, here’s how to find it: Go to 

https://developers.facebook.com/tools/explorer/  (While you are logged into facebook)

You will see the following:

The highlighted number will be your fb:admins ID. 

Then add your share button, image or text and add a hyperlink like:

http://www.facebook.com/sharer.php?u=http://www.mysite.co.uk/index.html

Set the target to New Window

Add an an onclick event to the hyperlink by adding the following over the __AddCode=”Here” tag of the hyperlink in the attach HTML.

onclick="var w = window.open(this.href,'_blank','width=600,height=400,left=20, top=20, menubar=no,resizable=no, scrollbars=yes,status=no,toolbar=no'); if( w != null ){ w.focus(); }; return false;"

The onclick event will open the sharer page in a pop-up window so that the user doesn’t leave your site to share the page.

Ok so far so good, but if you click your share button now, it will not pick up the details in the OG tags but will try and find an image on the page and use the page title, it will also try to find some text on the page to use as a description.

The reason is that facebook needs to ‘scrape’ your page first to store the details in the OG tag. So we need to force facebook to ‘scrape’ your page. To do this go to  https://developers.facebook.com/tools/debug/ and enter your full page URL in the box and click Debug:

You should get a result something like the one below with no errors:

Now reload your page and click your share button, it should now show the Title, description and image you set in the OG tags.

Your share pop-up should then look something like:

 

Facebook will re-scrape your page every 24 hours, so if you make changes to your OG tags it may take 24 hours for them to change when you click your share button. If you need any changes to take effect immediately, then just go to the OG debug page and re-debug your OG tags on the page again.

 

 

 

Facebook Shares not working correctly any more?

February 26, 2014 // Posted in General, Main (Tags: , , , , , , , , , , , ) |  No Comments

#facebook

Just in case you have wondered why your facebook share buttons may be not working as you expected, Facebook have switched off some of the features of their sharer.php. So if you had share buttons that passed custom variables to the facebook sharer.php something like:

http://www.facebook.com/share.php?s=100&p%5Btitle%5D=This%20is%20a%20test&p%5Burl%5D=http://www.richosoft.co.uk&p%5Bimages%5D%5B0%5D=http://www.richosoft.co.uk/rsimages/myimage.png&p%5Bsummary%5D=This%20is%20a%20test%20message

These will no longer work, but instead they will pick up the Page Title and description for the title and description of the share. If you do not have active accurate OG tags, the custom image in the link will no longer display. If you have an active og:image link that image will display in the share, and if you have an active og:title and/or descriptions it will pick them up instead (once facebook has scraped your page that is).

It appears that if you now want to use a custom share on facebook you have to create an app, get it approved and then use one of the SDK’s to create custom ‘Stories’ and shares etc. or use the OG tags to create the content for the share, which facebook will re-scrape a max of once per 24 hours, so not much use if you have dynamic content for the share
There is several posts on the facebook developer forum, but facebook appear to be ignoring any requests to re-instate what was an easy to use and important feature for websites.

New Facebook share button docs here: https://developers.facebook.com/docs…s/share-button

regards

Steve

%d bloggers like this: