Log in | Register
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. FaceBook Posts Received as from Guest

Topic-icon FaceBook Posts Received as from Guest

Active Subscriptions:

None
8 years 3 months ago - 8 years 3 months ago #56480 by webdevtim
I can't just add these in the index.php file:

<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />

Think you already answered that.
Last edit: 8 years 3 months ago by webdevtim.
The topic has been locked.
Active Subscriptions:

None
8 years 3 months ago - 8 years 3 months ago #56481 by webdevtim
OK I added:

{SCOpenGraph image:height=246}
{SCOpenGraph image:width=246}

To one of the articles and then posted it to face book, but the image on the Facebook page was still 468px X 244px and cropped. I put the tags at the very top of the html without any opening or closing html tags.

In google chrome the width from looking at the width attribute in the html is 470px. I need the image to be square so it doesn't get cropped. 470 x 470 would be OK. 600 x 600 would also be OK if it doesn't get cropped.

Maybe I could do this for each article, {SCOpenGraph image=http://yoursite.com/link-to-image.jpg} so that I could have 1200 x 630 images, but I really would prefer not to have to do this; lot of extra work.

Here are some other things I would like to see supported:

Music
Namespace URI: ogp.me/ns/music#
og:type values:

music.song

music:duration - integer >=1 - The song's length in seconds.
music:album - music.album array - The album this song is from.
music:album:disc - integer >=1 - Which disc of the album this song is on.
music:album:track - integer >=1 - Which track this song is.
music:musician - profile array - The musician that made this song.
music.album

music:song - music.song - The song on this album.
music:song:disc - integer >=1 - The same as music:album:disc but in reverse.
music:song:track - integer >=1 - The same as music:album:track but in reverse.
music:musician - profile - The musician that made this song.
music:release_date - datetime - The date the album was released.
music.playlist

music:song - Identical to the ones on music.album
music:song:disc
music:song:track
music:creator - profile - The creator of this playlist.
music.radio_station

music:creator - profile - The creator of this station.
Video
Namespace URI: ogp.me/ns/video#
og:type values:

video.movie

video:actor - profile array - Actors in the movie.
video:actor:role - string - The role they played.
video:director - profile array - Directors of the movie.
video:writer - profile array - Writers of the movie.
video:duration - integer >=1 - The movie's length in seconds.
video:release_date - datetime - The date the movie was released.
video:tag - string array - Tag words associated with this movie.
video.episode

video:actor - Identical to video.movie
video:actor:role
video:director
video:writer
video:duration
video:release_date
video:tag
video:series - video.tv_show - Which series this episode belongs to.
video.tv_show

A multi-episode TV show. The metadata is identical to video.movie.

video.other

A video that doesn't belong in any other category. The metadata is identical to video.movie.Music
Last edit: 8 years 3 months ago by webdevtim.
The topic has been locked.
Support Specialist
8 years 3 months ago #56482 by alzander

To one of the articles and then posted it to face book, but the image on the Facebook page was still 468px X 244px and cropped. I put the tags at the very top of the html without any opening or closing html tags.

After you update the tags for a page, you'd need to run it through Facebook's URL debug tool to see the updates. Otherwise, the older cached values would be used:
developers.facebook.com/tools/debug/

I can't just add these in the index.php file:

You can, but that applies to every page. If the page doesn't have an image, Facebook will throw a different error because your specifying dimensions without an image. On other pages, the picture that's used may not want to be square and will be squished because of your settings.

Here are some other things I would like to see supported:

You can use the {SCOpenGraph ...} tag to set any of those values on every page. Those aren't values that JFBConnect would be able set automatically.

I hope that helps,
Alex
The topic has been locked.
Active Subscriptions:

None
8 years 3 months ago - 8 years 3 months ago #56485 by webdevtim
Wow, you're a genius Alex, at least where Social Media is concerned. Yes this helps. I was so careful to clear the website cache and the CloudFlare cache, didn't think to clear the Facebook cache.

Facebook recommends that images be 1200 x 630. Is there an advantage of making separate images for each page this size and then using {SCOpenGraph image=http://yoursite.com/link-to-image.jpg} to set each image for each page???

I know I said I didn't want to do this, but if it makes a significant difference in appearance on the page, then maybe it is worth it.
Last edit: 8 years 3 months ago by webdevtim.
The topic has been locked.
Active Subscriptions:

None
8 years 3 months ago - 8 years 3 months ago #56489 by webdevtim
I have added:
{SCOpenGraph image:height=246} {SCOpenGraph image:width=246}
to the top of the article, but when I have Facebook scrape the URL, I seen no:
<meta property="og:image:width" content="246" />
<meta property="og:image:height" content="246" />
on the page scraped by Facebook.

I am going to try adding
{SCOpenGraph image=http://yoursite.com/link-to-image.jpg}
adding a 1200 x 630 pixel image to images/socialmedia/facebook/ and link to it and see if that works.

OK, for some reason I was running into other cache problems which was causing my saves to be ignored.

Got the height and width directives to work, but this is what Facebook had to say:

Warnings That Should Be Fixed

Meta with name instead of property:
The meta tag on the page was specified with name 'author', which matches a configured property of this object type. It will be ignored unless specified with the meta property attribute instead of the meta name attribute.
Extraneous Property:
Objects of this type do not allow properties named 'image:height'.
Extraneous Property:
Objects of this type do not allow properties named 'image:width'.
Parser Mismatched Metadata:
The parser's result for this metadata did not match the input metadata. Likely, this was caused by the data being ordered in an unexpected way, multiple values being given for a property only expecting a single value, or property values for a given property being mismatched. Here are the input properties that were not seen in the parsed result: 'og:image:height, og:image:width'

Though it does report:
Meta Tag - <meta property="image:height" content="246" />
Meta Tag - <meta property="image:width" content="246" />

It shows the image cropped and 470 x 246 pixels.

This works:
{SCOpenGraph image=https://www.911truthoutreach.org/images/socialmedia/facebook/building-7-the-smoking-gun-banner.jpg}
So I ma just going to go through and create 1455 x 764 pixel images for everything and store them in the .../facebook/ folder I created. This looks really nice and it will look really nice on retina displays as well as 4k displays.
Last edit: 8 years 3 months ago by webdevtim.
The topic has been locked.
Support Specialist
8 years 3 months ago #56492 by alzander

Facebook recommends that images be 1200 x 630. Is there an advantage of making separate images for each page this size and then using {SCOpenGraph image=http://yoursite.com/link-to-image.jpg} to set each image for each page???

I know I said I didn't want to do this, but if it makes a significant difference in appearance on the page, then maybe it is worth it.

The bigger the image you can include, the better. That allows Facebook to use it in different views in different aspect ratios. If it's too small, then it can't be cropped and resized, which can limit where it's used.

With that said, there are many social networks and other sharing mechanisms out there and not all of them use Open Graph tags. If you can, I'd recommend using as large an image as possible within the article, even if you're resizing it down to show as the primary image or whatever. The width/height tags may still help Facebook display the image immediately, but even if you omit those tags, when Facebook scans the page, it will find and detect a suitable large image.

Though it does report:

I may have mis-spoke. Can you try adding the SCOpenGraph tags like below and see if they properly include the og: prefix:
{SCOpenGraph og:image:height=246}
{SCOpenGraph og:image:width=246}
That may set the full tag properly. I can't remember the exact syntax now, but if that doesn't work (after you force a re-scrape) I can gladly investigate further.

I hope that helps and *love* being called a genius. Thanks!
Alex
The topic has been locked.
Active Subscriptions:

None
8 years 3 months ago - 8 years 3 months ago #56494 by webdevtim
I use 764 X 764 images in articles in which the K2 image manager makes 6 different sizes from that from 80 X 80 to 764 X 764. I could make them 1200 X 1200, but for Facebook, I like what I am doing and that is creating another 1455 X 764 images for Facebook for each article and then using something like :
{SCOpenGraph image=https://www.911truthoutreach.org/images/socialmedia/facebook/building-7-the-smoking-gun-banner.jpg}
to link it to the Facebook post. So it doesn't look like I will be using
{SCOpenGraph og:image:height=246}{SCOpenGraph og:image:width=246}
in the articles because I like the way the images look when formatted as described above.

I will test this on something just so I am sure that it works and that I know how to use it.
Last edit: 8 years 3 months ago by webdevtim.
The topic has been locked.
Active Subscriptions:

None
8 years 3 months ago - 8 years 3 months ago #56536 by webdevtim
Alex, this is what Facebook is reporting:

Meta Tag <meta property="og:image" content="www.911truthoutreach.org/media/k2/items/...aa9a6210af69ed_M.jpg" />
Meta Tag <meta property="og:description" content="The characters portrayed in the Fox Network television show, &#039;Bones,&#039; are deeply adored by their fervent fans. The show is headlined by Dr. &#039;Bones&#039; Brennan whom her fans describe as lovely, admirable ..." />
Meta Tag <meta property="og:image" content="www.911truthoutreach.org/images/socialmedia/bones-banner.jpg" />
Meta Tag <meta property="og:image" content="www.911truthoutreach.org/images/socialmedia/bones-banner.jpg" />
Meta Tag <meta property="og:image" content="www.911truthoutreach.org/media/k2/items/...a9a6210af69ed_XL.jpg" />
Meta Tag <meta property="og:image" content="www.911truthoutreach.org/images/site/tem...ebook-911to-logo.jpg" />
Meta Tag <meta property="og:title" content="Reach-Out to 9/11 Truth Activists and &#039;Bones&#039; Fans" />
Meta Tag <meta property="og:type" content="article" />
Meta Tag <meta property="og:site_name" content="9/11 Truth Outreach" />
Meta Tag <meta property="og:url" content="www.911truthoutreach.org/557-news-releas...-and-bones-fans.html" />
Meta Tag <meta property="fb:app_id" content="403004776514669" />
Meta Tag <meta property="og:locale" content="en_gb" />

I am getting og:image three times. Facebook is using the K2 image www.911truthoutreach.org/media/k2/items/...aa9a6210af69ed_M.jpg instead of www.911truthoutreach.org/images/socialmedia/bones-banner.jpg, no matter how many time I re-scrape the page. Should I set the "Image Type" to "Custom Image" and leave the "Custom Image Path" blank in the "article" OpenGraph object so that the JFBConnect is forced to only include bones-banner.jpg in the parameter string that would be included when the tag: {SCOpenGraph image=https://www.911truthoutreach.org/images/socialmedia/bones-banner.jpg} is added to the top of the article?

Think I answered my question just by posing it because the link to the image I wanted to use on the Facebook page isn't working when accessed directly. Should have been: www.911truthoutreach.org/images/socialme...ook/bones-banner.jpg

You can see the results here: www.facebook.com/911truthoutreach.org
Last edit: 8 years 3 months ago by webdevtim.
The topic has been locked.
Support Specialist
8 years 3 months ago #56572 by mel
Actually, looking at the page source, another extension is adding the *_M.jpg file, not JFBConnect. That og:image tag is not in the block of code that we're adding, so it's probably K2. I think you'll have to delve into K2 to see how to exclude that. However, I'm not sure of an easy way to turn off Open Graph tags from K2 though without removing it from the code.
The topic has been locked.
Active Subscriptions:

None
8 years 3 months ago - 8 years 3 months ago #56574 by webdevtim
I will dig into the K2 php and see where that is being generated. Thanks.

By the way, Facebook is using the JFBC og:image not the K2 image, but just to clean things up I will get rid of the K2 og: tags.
Last edit: 8 years 3 months ago by webdevtim.
The topic has been locked.
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. FaceBook Posts Received as from Guest
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS