10 years ago
6
Topic
Hi everybody,

I have a website that advertises lecturers. When posting a link of a lecturer's profile (from my site) on Facebook Seblod pull's out the wrong image and description.
This is how it appears on Seblod - seblog-img.png
This is what people see on Facebook - facebook-img.png

profilenew - name of the form where the description and image are stored, and that's the place where their info is stored:
#MAINBODY >> profile_img
#MAINBODY >> prof_background

How do I pull out the right image and description for Facebook's posts ?

Thank you very much,
Ofer.
www.profilu.co.il

Get a VIP membership
10 years ago
3
Level 1
FB requires you to use certain image sizes for posting links. I found an overview here:

You can setup your image field so that it automatically makes an image in the required size from the original image, e.g as Thumb2.

To make sure that the correct image and description gets picked up, you should use open graph meta tags in your head.

I usually do this in a position override with some code from Joomla API, something like:
$document = JFactory::getDocument();
$document->addCustomTag( "<meta property='og:image' content='" . JURI::base() . $pathToFBImage );
$document->addCustomTag( "<meta property='og:description' content='". $description ."'>" );
You can get the path to your image in your position override with something like:
$pathToFBImage = $cck->getThumb2('article_image');
where 'article_image' is the name of your image field.

and the description with something like:
$description = $cck->getValue('your_description_text_field');

Instead of using a position override, you could use the Code Pack plugin.


Hope this helps
Gerhard
10 years ago
2
Level 2
Hi Gerhard,

Thank you for the detailed explaination. 
The only small thing I didn't understand is in what file (and path) do I need to add each of these codes ?

Many thanks,
Ofer.
10 years ago
1
Level 3
Hi Ofer,

the code needs to go into a position override for your content view.

As an alternative you could use a service like Addthis or Sharethis. They have special tags for sharing content with facebook. In those tags you can put path to your image and your description.


10 years ago
0
Level 4
Hi Gerhard,

Thanks. I tried to follow the explaination but it's still very hard for me to create a template override. I thought of a nice solution that might solve this issue and I hope you could tell me your opinion about it.

Seblod takes the image (for Facabook's posts) from one tab instead of another (both of the tabs are on the same form). For example, the profile image is in tab called "about" and the image Facebook uses  is in another tab called "service description" (both of the tabs are on the same form). Is there a way to duplicate the image and create another version of it on the "service description" tab, but this time it will be a hidden field just for the purpose of Facebook's posts.

Hope I managed to explain myself well.
Many thanks,
Ofer.

10 years ago
1
Level 1
Hi Ofer,

if you cannot make a position override, you can use the Code Pack plugin to inject the open graph meta tags into the head with the code provided above. The open graph image tag is the only way that I know of to make sure that FB is picking up the right image.

If you want to duplicate the image from the about tag to the service description tab, you can create a new image field and give it the same storage as your about image. Or you use the SD Live CCK Plugin to call the about image into a field in the service description tab.
But i doubt that this will help with posting the correct image to FB.
10 years ago
0
Level 2
Hi Gerhard,

How are you?
I think the best solution to solve this issue is what you recommended about installing  Code Pack plugin
So if that is the template of the code:
$document = JFactory::getDocument();
$document->addCustomTag( "<meta property='og:image' content='" . JURI::base() . $pathToFBImage );
$document->addCustomTag( "<meta property='og:description' content='". $description ."'>" );
And these are my fields' details:

profilenew - name of the form where the description and image are stored, and that's the place where their info is stored:
#MAINBODY >> profile_img (name of image field)
#MAINBODY >> prof_background (name of description field)

How would I use it with Code Pack pluging? (please keep in mind that I still haven't purchased it yet).

I appreciate you help.
Thank you very much,
Ofer.
Get a VIP membership