I'm building a site on cms 1.11.5 and using the Album module for picture galleries. I want to implement facebook and twitter share buttons for the specific images within the Album galleries, but i'm finding this very difficult to do.
So far I've tried the following plugins:
http://dev.cmsmadesimple.org/projects/socialbks
and
http://dev.cmsmadesimple.org/projects/likebutton
but with both, I've only been able to generate shares of the whole site, rather than specific images.
Has anybody else needed to implement something similar, and if so any ideas about the best approach?
Thanks!
share specific content on facebook/twitter
-
secondskin
- Forum Members
- Posts: 16
- Joined: Wed Apr 11, 2012 12:41 pm
Re: share specific content on facebook/twitter
Calguy released some new modules yesterday, check the Forge http://dev.cmsmadesimple.org
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Re: share specific content on facebook/twitter
I implemented this once on a website but without the mentioned modules. It had an Album Gallery with a popup.
http://www.uisge-beatha.eu/fotoalbum.html
It involves a few steps:
- every image needs a unique url. I choose to add '?pid=<pictureID>' to the current url. So for example: "http://www.example.com/photoalbum?pid=661
Your Album template should take care of those urls.
- In the page template there need to be a piece of code that determines whether the 'pid' parameter is supplied (typically this would be the case when Facebook/Twitter visit your site, or one clicks on the Facebook/Twitter post).
I think you can use {$smarty.get.pid} for that.
- If the 'pid' is supplied you shoud generate custom Open Graph meta tags for that specific image. Have a look at e.g. http://www.uisge-beatha.eu/gallery/Wint ... l?pid=3603 and look in the html source for the '<meta property="og:' tags. (I know the source is a little messy, I only implemented the facebook part)
It's important that og:url contains the url INCLUDING the pid parameter. And of course the og:image contains a link to (a thumbnail) of the picture you're Liking.
- I think it would be nice to add some Javascript to popup the image when pid is supplied. So when a visitor comes from Facebook he doesn't have to search for the image itself.
Above is just an example of how it could be done.
Keep in mind: when a visitor shares a link on Facebook, Facebook will immediately visit the url that is supplied and look for information to build a proper 'share'. To control that you need the Open Graph tags.
To see what Facebook sees when visiting an url use the Facebook Linter: https://developers.facebook.com/tools/debug
When changing things always use that debug tool to see the result (and clear the Facebook cached information for that specific url).
http://www.uisge-beatha.eu/fotoalbum.html
It involves a few steps:
- every image needs a unique url. I choose to add '?pid=<pictureID>' to the current url. So for example: "http://www.example.com/photoalbum?pid=661
Your Album template should take care of those urls.
- In the page template there need to be a piece of code that determines whether the 'pid' parameter is supplied (typically this would be the case when Facebook/Twitter visit your site, or one clicks on the Facebook/Twitter post).
I think you can use {$smarty.get.pid} for that.
- If the 'pid' is supplied you shoud generate custom Open Graph meta tags for that specific image. Have a look at e.g. http://www.uisge-beatha.eu/gallery/Wint ... l?pid=3603 and look in the html source for the '<meta property="og:' tags. (I know the source is a little messy, I only implemented the facebook part)
It's important that og:url contains the url INCLUDING the pid parameter. And of course the og:image contains a link to (a thumbnail) of the picture you're Liking.
- I think it would be nice to add some Javascript to popup the image when pid is supplied. So when a visitor comes from Facebook he doesn't have to search for the image itself.
Above is just an example of how it could be done.
Keep in mind: when a visitor shares a link on Facebook, Facebook will immediately visit the url that is supplied and look for information to build a proper 'share'. To control that you need the Open Graph tags.
To see what Facebook sees when visiting an url use the Facebook Linter: https://developers.facebook.com/tools/debug
When changing things always use that debug tool to see the result (and clear the Facebook cached information for that specific url).
