Public Forums 71,145 posts

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#347121

Dear veganbill!

i ‘m sorry i have not deep understandable about facebook, so that i could not help you on the issue, please kindly try to search on the NET to get some solutions while waiting for answering from other users

Thanks

[veganbill Friend veganbillJoin date: March 2010Posts: 4Downloads:0Uploads:0]

#347127

I did and tried but I don’t know coding alot so it didn’t work out…
Let me show you what they say, and I quote:

Now this looks a lot more interesting. There’s a description of the article, and even a thumbnail. Now that link is a lot more likely to be clicked than the generic one above it.

So again, this is WordPress, how do we get this in Joomla? Well, honestly, sometimes it just works, and other times it doesn’t seem to. I ended up checking out Facebook’s specs on sharing here:

http://wiki.developers.facebook.com/index.php/Facebook_Share/Specifying_Meta_Tags

And it turns out there’s three basic items that should be present on the page you want to share.

1. Meta Title
2. Meta Description
3. Image thumbnail source

That last one is the tricky one!

In Joomla, it’s trivially easy to put in the meta description in the ‘Metadata Information’ tab at the bottom right of the Parameters sidebar in your article entry screen.

The title I’ve never had a problem picking up in Facebook from the page title. Normally, Joomla SEO extensions like SH404SEF or Artio JoomSEF can help you with all the metadata, anyway.

But that thumbnail. It’s not a meta tag, it’s a ‘link’ tag. Not so easy to get into the head of your Joomla document.

I spent some time wrangling with it and I came up with a workaround that didn’t involve hacking the core header file.

Essentially we use a bit of php to fill in the name of your image, based on which page you’re on. We do this using the Menu ID assigned to your article. You can find this ID by going to the Menu that your article is assigned to. See this example:

The red part is the ID number we need. We’ll add this number onto the end of our link tag so it pulls the correct image based on which page we’re on.

So now on to the PHP. Joomla has a variable which allows it to get the Menu ID of an item. It’s called, appropriately enough, ‘$itemid’.

So what we’ll do first is open up your template index.php file (it should be found by going to your ftp Home>templates>YOUR_TEMPLATE>index.php.

Or if you’re editing through the Joomla backend, go to Extensions>Template Manager, then click your template,and finally click the ‘Edit HTML’ button. You’ll get a screen with the code of your index.html where you can now edit.

So the first thing we need to do to get started using $itemid is to declare, or initialize the variable (I’m not a true php guru so this may not be the proper term).

To do this we’ll use this code:
<?php
$itemid = JRequest::getVar(‘Itemid’);
?>

You have to place this before we actually try to use the $itemid variable. So I put this directly after my first head tag.

Then it’s time to put in the link tag that Facebook will be looking for. The code I use is as such:

<link rel=”img_src” href=”http://www.example.com/images/stories/fbthumbs/thumbnail<?php echo $itemid; ?>.jpg” />

I put this tag right after the Joomla ‘head calling’ tag that looks like this <jdoc:include type=”head” />

So to break this down, Facebook is going to prefer whichever image is called in this link. Reading the specs from the Facebook link I provided above says that your link has to be an absolute link.

You can see that I have an absolute link there, then I used my ‘images/stories’ folder and created a new folder in there called ‘fbthumbs’, but you can use whatever directory is convenient for you.

Following that as the link continues, you see it says ‘thumbnail’ and then our php code sandwiched right up against it. What’s happening here is that every image I put in this directory will be named ‘thumbnail’ with a Menu ID tacked right on the end. So if my Menu ID was ‘44′ as in the image above, my image would be named ‘thumbnail44.jpg’.

The php code is set to “echo” the item ID of whatever page we’re on, so it replaces the php with the item ID, then we wrap it up by adding the ‘.jpg’ on the end and close the tag.

So whenever you make an article, you’ll need to check the Menu ID for it, then name your photo ‘whatever’ and append that Menu ID onto it. As long as it goes into the right directory, Facebook should have no problem finding your preferred thumbnail to use when someone tries to share the item.

And that should do it!

I tried adding this but I get an error…
I bet you could do it 🙂
I wish I could take you out for a beer but you’re so far!

[yabadabadoo Friend yabadabadooJoin date: November 2010Posts: 5Downloads:0Uploads:0]

#396788

Hi,

Slightly aannoying that the logo on the templates is not available to chose when you post a link on facebook…?

anyone?

[yabadabadoo Friend yabadabadooJoin date: November 2010Posts: 5Downloads:0Uploads:0]

#396792

http://itprism.com/help/itpmeta-opengraph-documentation-faq might do the trick

[Thanh Nguyen Viet Friend Thanh Nguyen VietJoin date: September 2014Posts: 1461Downloads:0Uploads:44 Thanked: 258 times in 217 posts]

#397947

Yes, you should add this meta tag to specify an image will be displayed on FB post
<meta property=”og:image” content=”{IMAGE_URL}” />

I want to notice that the “FB share” plugin is no longer support by FB team. It was combined with “FB like” plugin.
I’m updating “JA FB like” plugin to get the newest feature of FB like button, and above open graph meta tag will be added in new version.
so, you can see correct image of each article on FB post.

[stuffjm Friend stuffjmJoin date: April 2011Posts: 2Downloads:0Uploads:1 Thanked: 1 times in 1 posts]

#759835

add this code to the your head file of the template:


<!-- Social Tags -->
<meta property="og:site_name" content="YOUR WEBSITE TITLE"/
<?php

$article = JTable::getInstance("content");
$article->load(JRequest::getInt("id")); // Get Article ID
$article_images = $article->get("images"); // Get image parameters
$pictures = json_decode($article_images); // Split the parameters apart
$article_title = $article->get("title"); // Get title parameter
$article_uri = JFactory::getURI();
$absolute_url = $article_uri->toString();
// Print the image
echo '<meta property="og:image" content="' . $pictures->{'image_intro'} . '" />';
echo '<meta property="og:title" content="' . $article_title . '" />';
echo '<meta property="og:url" content="' . $absolute_url . '" />';

?>


1 user says Thank You to stuffjm for this useful post

1. QIRIM

[QIRIM Friend QIRIMJoin date: April 2015Posts: 8Downloads:27Uploads:0 Thanks: 5]

#963373

Hello stuffjm! Articles Image is not downloaded to the facebook. I noticed that the links relative. How to make that image link was absolute?

https://developers.facebook.com/tools/debug/sharing/
Invalid URL
Provided og:image URL, images/stories/ukr/5464903.jpg was not a valid URL.

Sorry for my bad English…

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#963806

Does that article have Intro Image set via Images & Links tab in settings of article?

[QIRIM Friend QIRIMJoin date: April 2015Posts: 8Downloads:27Uploads:0 Thanks: 5]

#965736

Sorry for the late reply.

Yes, of course, the picture is.

I solved a problem adding the site domain:

echo '<meta property="og:image" content="http://mysyte.net/' . $pictures->{'image_intro'} . '" />';

[Author]

Posts