Topic-icon SCOpenGraph tags not parsed in JEvents

Active Subscriptions:

None
5 years 11 months ago - 5 years 11 months ago #63821 by webdevtim
When adding custom fields in JEvents for the Social Media metadata, and then adding the JEvents tags for those custom fields inside the SCOpenGraph Easy Tags, only the title is properly parsed.

Of course I am asking JEvents the same question.

It seems as though the problem is the JEvents Custom fields, because {SCOpenGraph title={{Title:TITLE}}} gets handled correctly and is included in the metadata as follows:
<meta name="twitter:title" content="'9/11 Justice: Every Nation, Every Citizen'"/>
Something like {SCOpenGraph url={{Event URL Raw Value:jevcfEventURL_raw}}}, however, does not and the Social Meta default gets inserted instead like:
<meta property="og:url" content="https://www.911tap.org/"/>

The page URL is: www.911tap.org/9-11-tap-events/911tap-ev...nation-every-citizen

Here is the complete Easy Tag section:
<div id="jfbcSocialMediaButtons">
<div class="JFBC-Config">{JFBCLike href={{Event URL Raw Value:jevcfEventURL_raw}} layout=button_count show_faces=false share=true width=120 action=like colorscheme=dark ref={{Facebook unique reference name Raw Value:jevcfFacebookReference_raw}} kid_directed_site=false}</div>
<div class="JFBC-Config">{SCTwitterShare href={{Event URL Raw Value:jevcfEventURL_raw}} text={{Twitter Description:jevcfTwitterDescription}} data_count=horizontal via=911tap related=ae911truth,911Blogger,DC911truth hashtags=911truth,wtc7 size=medium dnt=false}</div>
<div class="JFBC-Config">{SCGooglePlusOne {{Event URL Raw Value:jevcfEventURL_raw}} annotation=bubble size=standard align=left recommendations=true}</div>
{SCOpenGraph image={{Open Graph Image Raw Value:socialOpenGraphImage_raw}}}
{SCOpenGraph twitter:image={{Twitter Image Raw Value:socialTwitterImage_raw}}}
{SCOpenGraph twitter:image:alt={{Twitter Image Alt Text Raw Value:jevcfTwitterImageAltText_raw}}}
{SCOpenGraph url={{Event URL Raw Value:jevcfEventURL_raw}}}
{SCOpenGraph title={{Title:TITLE}}}
{SCOpenGraph description={{OpenGraph Description Raw Value:jevcfOpenGraphDescription_raw}}…}
{SCOpenGraph twitter:description={{Twitter Description Raw Value:jevcfTwitterDescription_raw}}…}
{SCOpenGraph type=event}</div>
And here is the complete list of meta-data:
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@social-media.admin"/>
<meta name="twitter:title" content="'9/11 Justice: Every Nation, Every Citizen'"/>
<meta property="og:title" content="'9/11 Justice: Every Nation, Every Citizen'"/>
<meta name="twitter:description" content="…"/>
<meta property="og:description" content="…"/>
<meta property="og:type" content="event"/>
<meta property="og:url" content="https://www.911tap.org/"/>
<meta name="twitter:image" content="https://www.911tap.org/images/socialmedia/open-graph/911tap-site-facebook-banner.jpg"/>
<meta property="og:image" content="https://www.911tap.org/images/socialmedia/open-graph/911tap-site-facebook-banner.jpg"/>
<meta name="twitter:image" content="https://www.911tap.org/images/socialmedia/open-graph/911tap-site-twitter-banner.jpg"/>
<meta name="twitter:image:alt" content="9/11 Truth Action Project Banner"/>
<meta property="og:site_name" content="9/11 Truth Action Project"/>
<meta property="og:author" content="911tap"/>
<meta name="twitter:creator" content="@911tap"/>
<meta property="og:video" content="https://content.jwplatform.com/players/ENno7di6-A4cZR76S.html"/>
<meta property="og:audio" content="https://content.jwplatform.com/players/Zf88zyiO-A4cZR76S.html"/>
<meta property="fb:app_id" content="311988672497703"/>
<meta property="og:locale" content="en_gb"/>
Last edit: 5 years 11 months ago by webdevtim.
The topic has been locked.
Support Specialist
5 years 11 months ago #63822 by alzander
Tags within tags are generally prone to problems. For the tags shown above, you'd want to have JEvents parse their tags first so that, by the time JFBConnect tries to parse them, the {JEvents...} tag is missing. In other words, you want to work your way inside out with sub-tags. That means you'd want to make sure the JEvents system plugin that performs the replacements is ordered before JFBConnect's system plugin.

However, ordering alone isn't guaranteed to get it to work and, frankly, it may just not be possible because all those squiqqlies around the tags can easily confuse any parser from JFBConnect or JEvents.

Definitely test re-ordering plugins, and let us know how that goes, but I'd really recommend seeing if there's some other way to set the tags how you want.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
5 years 11 months ago - 5 years 11 months ago #63825 by webdevtim
Thanks for your lightning fast reply Alex. I sometime feel like I am your only customer.

As I pointed out, the JEvents "Title" tag got processed and the JFBCSystem correctly processed the Title which is why
<meta name="twitter:title" content="'9/11 Justice: Every Nation, Every Citizen'"/>
<meta property="og:title" content="'9/11 Justice: Every Nation, Every Citizen'"/>
are correctly populated. The other data isn't JEvents core fields, it is JEvents Custom Fields which I would assumed are processed separately.

System - JFBCSystem is near the bottom of the list of plugins and far below the JEvents - Custom Fields plugin. I will ask Tony and Geraint if they have any ideas.

Yes, tags within tags can get tricky.

I will let you know what JEvents says.

******Update******


The person who was financing this organization has thrown his hands up and decided to move on, and it just so happened that the subscription to JEvents expired yesterday, so I will not be getting a reply from them.

I see that all the metadata is processed in jfbcsystem.php and this runs well after the JEvents Custom Fields plugin runs, so not sure what the problem is here and why

I don't think this is the problem any more.
I have run into a problem, the "Content - JFBCContent" plugin is in the "Content" grouping that doesn't allow me to place it below the "JEvents Custon Fields" plugin. If "Content - JFBCContent" is the plugin evaluating the tags in content, then this is firing before the "JEvents Custom Fields" plugin fires. Is there a way in Joomla to turn off the grouping of plugins? I have read the Joomla documentation and I can't see a way to change the order of a plugin outside of it's grouping. I am sure I am missing something. Again "System - JFBCSystem" plugin runs after all the JEvents plugins.

Here is what I see in plugin manager:

"JEvents - Core Content" Plugin runs before "Content - JFBCContent," which is why "Title" is getting evaluated by both JEvents and JFBConnect

"JEvents - Custom Fields" runs after "Content - JFBCContent" because it is in the JEvents block which is positioned below the Content block in the block order, and I don't know how to arrange these blocks relative to each other. I assume that Joomla does this for a reason, like this arrangement most likely avoids conflicts. Since "JEvents - Custom Fields" runs after "Content - JFBCContent," the, it would seem to me that Social Meta tags won't be ready for evaluation when "Content - JFBCContent" fires.


I am currently looking for a job, as the organization I am working for and I have decided to go in different directions. I have agreed to stay on for three months maintaining the website until they find my replacement and I have also agreed to be available after those three in a consulting capacity. I am a champion of Open Source, and they don't see the importance of Open Source, yet decry the loss of democracy in America.

By the way Alex, edit the CSS for your jfbcsocialshare module and make the container div a flex div, that way the social media buttons will always arrange themselves optimally without overlap:
.footer .footer-right .jfbcsocialshare.scsocialbuttons {
    align-content: space-between;
    align-items: center;
    display: flex;
    justify-content: space-around;
    margin-right: 2px;
    padding: 0 10px;
    position: fixed;
    right: 0px;
    width: 248px;
    z-index: 1000;
}
Last edit: 5 years 11 months ago by webdevtim.
The topic has been locked.
Active Subscriptions:

None
5 years 11 months ago - 5 years 11 months ago #63926 by webdevtim
Hi Alex, I got the issue resolved over at JEvents. After going through the database, component PHP files changing a line in a file
$strippedmatch = preg_replace('/(#|:|;)+[^}]*/', '', $matchesarray[0][$i]);
to
$strippedmatch = preg_replace('/(#|:|;)+[^}}]*/', '', $matchesarray[0][$i]);

It turns out that when I created the custom fields in JEvents, I left a setting "Access to field when viewing event" set to author, so noting was showing up when not logged in to the front end. I need to learn to pay attention to these details.

What I ended up with looks like:

And the resulting Twitter Card looks like:

I can't show you the Facebook preview, because for some reason Facebook refuses to scrape the event page for new information and leaves the Social Meta generic default that was present previously. Is there some way I can force Facebook to revisit the page?

There is still one problem with JFBConnect and that is I need the option to turn off the auto generation of the twitter:image meta property. Since the Twitter image is slightly shorter than the Facebook images, I make two images when designing them because it is easy to move things around on the Photoshop canvass after I reduce the height of the image and doesn't take much additional time to make both a Facebook image and a Twitter image.

Here is what is currently generated:
<meta name="twitter:image" content="https://www.911tap.org/images/jevents/5ae01f90825a97.41848359.jpeg"/>
<meta property="og:image" content="https://www.911tap.org/images/jevents/5ae01f90825a97.41848359.jpeg"/>
<meta name="twitter:image" content="https://www.911tap.org/images/jevents/5ae01f9dc67415.94840966.jpeg"/>
<meta name="twitter:image:alt" content="Richard Gage Barbara Honeggar — Every Country, Every Citizen, London, Event Banner"/>
The first twitter:image is generated from the og:image, I assume you did it this way to cover all the bases. As you can see, however, I have a second twitter:image defined by Easy Tags and it is being ignored because it is second in the lineup. I understand the utility of auto generating the twitter:image property, but in my case, I would like to turn that off.

Is there a way a way to turn off the generation of the twitter:image meta property so that only the EasyTags twitter:image meta property shows on the page?
Last edit: 5 years 11 months ago by webdevtim.
The topic has been locked.
Support Specialist
5 years 11 months ago #63935 by alzander
I'm glad to hear you got things going.. mostly.

The "Scrape" button should force Facebook to re-scan and parse tags. However, if the URL has enough Likes (I think 50), then some tags can't be updated. They do that to prevent bait-and-switch pages that get a lot of Likes for benign content (fluffy kittens) and then could change the entire content to something malicious so it looks like all those people Like something they really didn't.

For the Twitter image, are you setting that with a {SCOpenGraph ..} tag? How about the og:image? Is that automatically generated? We may just need to re-order how those go, but yes, if you are using the SCOpenGraph tag, that should definitely go first. Multiple images are ok for Open Graph, but for Twitter Cards, there may be a limit to only 1 that we're not respecting properly... hrmmmm

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
5 years 11 months ago - 5 years 11 months ago #63936 by webdevtim
Thanks Alex, I tried several times to update the post using Facebook's sharing Debugger and had no luck, so what you say about Facebook;s attempt to foil bait and switch attempts by not allowing a post to be changed after 50 likes is what is being applied in this case,

One thing you didn't address is how I stop JFBConnect from generating the Twitter image meta profile tag from the OpenGraph image tag?

Just to let you know what I did, in case anyone in the future wants to add Social Media buttons to their JEvents pages. I did suggest that jEvents contact Alex to talk about making a JFBConnect plugin for jEvents.

First in jEvents Custom Layouts -> Event Edit page, I include the following code after the "Contacts" section; I am using Regular Labs Tabs for this and their plugin runs after everything else and JEvents leaves it alone even though they both use the double braces {{…}} delimeters.
{{Tab Start:TABSTART#COM_JEVENTS_TAB_SOCIAL_MEDIA}}
<div class="row jev_social_media">
	<div class="span2">
		<strong>{{Event URL Label:customfield_jevcfEventURL_lbl}}</strong>
	</div>
	<div class="span10">
		{{Event URL:customfield_jevcfEventURL}}
	</div>
</div>
<div class="row jev_social_media">
	<div class="span2">
		<strong>{{OpenGraph Description Label:customfield_jevcfOpenGraphDescription_lbl}}</strong>
	</div>
	<div class="span10">
		{{OpenGraph Description:customfield_jevcfOpenGraphDescription}}
	</div>
</div>
<div class="row jev_social_media">
	<div class="span2">
		<strong>{{Twitter Description Label:customfield_jevcfTwitterDescription_lbl}}</strong>
	</div>
	<div class="span10">
		{{Twitter Description:customfield_jevcfTwitterDescription}}
	</div>
</div>
<div class="row jev_social_media_image">
	<div class="span2">
			<strong>{{Open Graph Image Label:customfield_socialOpenGraphImage_lbl}}</strong>
		</div>
		<div class="span10">
			{{Open Graph Image:customfield_socialOpenGraphImage}}
		</div>
	</div>
<div class="row jev_social_media_image">
	<div class="span2">
		<strong>{{Twitter Image Label:customfield_socialTwitterImage_lbl}}</strong>
	</div>
	<div class="span10">
		{{Twitter Image:customfield_socialTwitterImage}}
	</div>
</div>
<div class="row jev_social_media">
	<div class="span2">
		<strong>{{Twitter Image Alt Text Label:customfield_jevcfTwitterImageAltText_lbl}}</strong>
	</div>
	<div class="span10">
		{{Twitter Image Alt Text:customfield_jevcfTwitterImageAltText}}
	</div>
</div>
<div class="row jev_social_media">
	<div class="span2">
		<strong>{{Facebook unique reference name Label:customfield_jevcfFacebookReference_lbl}}</strong>
	</div>
	<div class="span10">
		{{Facebook unique reference name:customfield_jevcfFacebookReference}}
	</div>
</div>

In jEvents Custom Layouts -> Event Details Page, working in the Code Editor I add the following to the bottom of the page:
<div id="jfbcSocialMediaButtons">
<div class="JFBC-Config">{JFBCLike href={{Event URL Raw Value:jevcfEventURL_raw}} layout=button_count show_faces=false share=true width=120 action=like colorscheme=dark ref={{Facebook unique reference name Raw Value:jevcfFacebookReference_raw}} kid_directed_site=false}</div>
<div class="JFBC-Config">{SCTwitterShare href={{Event URL Raw Value:jevcfEventURL_raw}} text={{Twitter Description Raw Value:jevcfTwitterDescription_raw}}… data_count=horizontal via=911tap related=ae911truth,911Blogger,DC911truth hashtags=911truth,wtc7 size=medium dnt=false}</div>
<div class="JFBC-Config">{SCGooglePlusOne {{Event URL Raw Value:jevcfEventURL_raw}} annotation=bubble size=standard align=left recommendations=true}</div>
{SCOpenGraph image=https://www.911tap.org/images/jevents/{{Open Graph Image Raw Value:socialOpenGraphImage_raw}}}
{SCOpenGraph twitter:image=https://www.911tap.org/images/jevents/{{Twitter Image Raw Value:socialTwitterImage_raw}}}
{SCOpenGraph twitter:image:alt={{Twitter Image Alt Text Raw Value:jevcfTwitterImageAltText_raw}}}
{SCOpenGraph url={{Event URL Raw Value:jevcfEventURL_raw}}}
{SCOpenGraph title={{Title:TITLE}}}
{SCOpenGraph description={{OpenGraph Description Raw Value:jevcfOpenGraphDescription_raw}}}
{SCOpenGraph twitter:description={{Twitter Description Raw Value:jevcfTwitterDescription_raw}}}
{SCOpenGraph type=event}</div>
Working with jEvents I changed a line in their code, defaultloadedfromtemplate.php line 332 from:
$strippedmatch = preg_replace('/(#|:|;)+[^}]*/', '', $matchesarray[0][$i]);
to:
$strippedmatch = preg_replace('/(#|:|;)+[^}}]*/', '', $matchesarray[0][$i]);
so only two of the braces at the end of the string that has three barces }}} gets sucked up. I assume this will be changed in the next release of jEvents. It's not much of a deal, but in this instance it allows the jEvents tags to get replaced with the values without disturbing the JFBCConnect tags.
The result is I get a form as follows:

Which results in a twitter card that looks like:


I can't show you the Facebook post that gets generated, because as Alex has pointed out, after a post receives 50 likes, it can no longer be updated using the Facebook sharing Debugger.
Last edit: 5 years 11 months ago by webdevtim.
The topic has been locked.