Log in | Register
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. JFBCSocialShare module not working like I thought it would

Topic-icon JFBCSocialShare module not working like I thought it would

Active Subscriptions:

None
6 years 2 months ago - 6 years 2 months ago #63417 by webdevtim
The twitter and Google+ interface iframe is not being populated with Title and Description. the Facebook interface inframe is being so populated.

See: www.911tap.org/

Should I be using another module for this like SCSocial Widget or should I create my own Custom module adding the following instead:
<div class="JFBC-Config">{JFBCLike href=https://www.911tap.org/ layout=button show_faces=false share=true width=120 action=like colorscheme=dark ref=911-truth-action-project kid_directed_site=false}</div>
<div class="JFBC-Config">{SCTwitterShare href=https://www.911tap.org/ text=The mission of the 9/11 Truth Action Project is to mobilize a global grassroots movement. data_count=horizontal via=911tap related=ae911truth,911Blogger,DC911truth hashtags=911truth,wtc7 size=medium dnt=false}</div>
<div class="JFBC-Config">{SCGooglePlusOne https://www.911tap.org/ annotation=bubble size=standard align=left recommendations=true}</div>
<div class="JFBC-Config">{SCOpenGraph article:author=911tap}</div>
<div class="JFBC-Config">{SCOpenGraph twitter:creator=911tap}</div>
<div class="JFBC-Config">{SCOpenGraph twitter:image:alt=9/11 Truth Action Project}</div>
<div class="JFBC-Config">{SCGooglePlusOne https://www.911tap.org/ annotation=bubble size=standard align=left recommendations=true}</div>
<div class="JFBC-Config">{SCOpenGraph image=https://www.911tap.org/images/socialmedia/open-graph/911tap-grobal-grass-roots-movement.jpg}</div>
<div class="JFBC-Config">{SCOpenGraph url=https://www.911tap.org/}</div>
<div class="JFBC-Config">{SCOpenGraph title=9/11 Truth Action Project}</div>
<div class="JFBC-Config">{SCOpenGraph description=The mission of the 9/11 Truth Action Project is to build and mobilize a global grassroots movement that will expose the truths of 9/11, create a groundswell of civic support, and the restoration of our civil liberties…}</div>

One last thing, what method Do you guys use to create your Social Media Bar in the bottom right hand corner of this page? I wilL be looking at your HTML and CSS shortly.
Last edit: 6 years 2 months ago by webdevtim.
The topic has been locked.
Active Subscriptions:

None
6 years 2 months ago - 6 years 2 months ago #63453 by webdevtim
Using Easy Tags alone I got everything to work by wrapping everything in a div with ID jfbcSocialMediaButtons.
See: www.911tap.org/tap-media/building-7-the-...ing-gun-psas-jingles
and www.911tap.org/ and www.911tap.org/557-news-releases/714-bob...er-investigation-act

In each instance the post is unique. The Home page <meta names> and <meta properties> are generated by the defaults in Social Meta Configuration. the other pages the <meta name> and <meta property> values are generated by Easy Tags.

Here is the generic markup I am using which is part of the JCE Editor article template.
<div id="jfbcSocialMediaButtons">
<div class="JFBC-Config">
{JFBCLike href=href=https://www.911tap.org/557-news-releases/item_id-item_alias layout=button_count show_faces=false share=true width=120 action=like colorscheme=dark ref=short-name-of-article-30-chars-or-less kid_directed_site=false}
</div>
<div class="JFBC-Config">
{SCTwitterShare href=https://www.911tap.org/557-news-releases/item_id-item_alias text=Description of Article in 90 characters or less data_count=horizontal via=911tap related=ae911truth,911Blogger,DC911truth hashtags=911truth,wtc7 size=medium dnt=false}
</div>
<div class="JFBC-Config">
{SCGooglePlusOne https://www.911tap.org/557-news-releases/item_id-item_alias annotation=bubble size=standard align=left recommendations=true}
</div>
{SCOpenGraph article:author=911tap}
{SCOpenGraph twitter:creator=911tap}
{SCOpenGraph twitter:image:alt=text-depiction of image}
{SCOpenGraph image=https://www.911tap.org/images/articles/20xx/mm/name-of-article-facebool-image.jpg}
{SCOpenGraph url=https://www.911tap.org/557-news-releases/item_id-item_alias}
{SCOpenGraph title=Title of the Article}
{SCOpenGraph description=Description of article in 220 characters or less…}
{SCOpenGraph type=article}
{SCOpenGraph site_name=9/11 Truth Action Project}
{SCOpenGraph video=https://content.jwplatform.com/players/ENno7di6-A4cZR76S.html}
{SCOpenGraph audio=https://content.jwplatform.com/players/Zf88zyiO-A4cZR76S.html}
</div>

The problem with this is that setting all these <meta names> and <meta properties> by hand is fraught with the ever present chance of typos, especially by people that aren't HTML and CSS savvy.

I would like the module to take over the job of providing:
<div class="JFBC-Config">
{SCTwitterShare href=https://www.911tap.org/557-news-releases/item_id-item_alias text=Description of Article in 90 characters or less data_count=horizontal via=911tap related=ae911truth,911Blogger,DC911truth hashtags=911truth,wtc7 size=medium dnt=false}
</div>
<div class="JFBC-Config">
{SCGooglePlusOne https://www.911tap.org/557-news-releases/item_id-item_alias annotation=bubble size=standard align=left recommendations=true}
</div>

But more than this I would like a plugin for the JCE Editor that allows me to add these values through a GUI interface instead, eliminating the high probability that someone will make a typo entering the Easy Tag information by hand, that will break the page, especially if they accidentally delete a closing div.

I have been working with Ryan at JoomlaContentEditor.com and he is working on trying to get nested quotes to work correctly. Never-the-less, I think those guys would welcome a Social Media plugin like JFBConnect to let people add things like image, description, title, video, audio, OpenGraph and Twitter name and property values for each piece of content.

I create a second image for each article that is 1200 x 600 pixels and uplaod it to the folderf on hte website where the article resides. Facebook's recommendation for images is 1200 x 630 pixels and Twitter's 1200 x 600. I just go with 1200 x 600 and keep any important elements of the image 30 pixels away from the edges and everything works out just fine, I don't use the K2 Item image as that is just not appropriate for Facebook, Twitter or Google+, the three Social Media venues I enable.

So that is what I am asking, is for the JFBC Social Share module that will pick up the meta information for the active page and a JCE Editor plugin that will provide a graphical interface for adding the OpenGraph and Twitter Easy Tags at the bottom of "Article" in Joomla or "Item" in K2 so that novice authors can add these themselves. As it is I ask them to fill out the Easy Tags in the Code Editor which isn't something they are comfortable with.

I am also working with ACyMailing and they are turning a support question I had into a feature request for adding the same things that Easy Tags provides except the social media buttons are displayed in Newsletter emails, but as in the case of what I am asking for here, I am also asking them that it be a graphical interface so that people editing emails on our site are able to avoid trouble by staying away from HTML and CSS and the nuances of adding tags in code view. In this case a drop down of available content. the reason for the ACYMailing request is that market research shows that when people are presented a lot of material to ready they tend to put it off, but when they are presented with just one article they tend to find the time to read it. Having social media icons that target that particular article are a really good deal in that instance.

Well that is about it, not asking much, just for the moon.
Last edit: 6 years 2 months ago by webdevtim.
The topic has been locked.
Support Specialist
6 years 2 months ago #63460 by alzander
We agree a GUI method would be nice in the future. It's something we've discussed before internally, but haven't found the time to implement it (and you're one of the first to ask for it, which is a bit surprising too).

For now though, I'd really recommend going to the Social Meta configuration area of JFBConnect and using the "Defaults" box to add any tags you want on every page. So, that could look like:
article:author=911tap
twitter:creator=911tap
I *think* twitter defaults work in there like that, but please test. Any defaults you set apply to all pages of your site. Then, if you have Open Graph plugins enabled for a certain component, the plugin will override the defaults. Finally, if there are any {SCOpenGraph..} tags on the page, then those will override the plugins and defaults.. so you can set a broad set of defaults and only override them as necessary on a per page basis.

The type=article is automatically set by all pages, so you shouldn't need to set that as a default or in a tag unless you want it to be something else.

I hope that helps get you started with some ideas and minimizes hand-typing at least.

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

None
6 years 2 months ago #63464 by webdevtim
Thanks Alex, I have already done that. The problem is I have to turn this over to people who are not particularly computer literate and asking them to modify Easy Tags will be a bit daunting for them. I will end up being asked to do that and I would like to step back from this and focus on other things.
The topic has been locked.
Support Specialist
6 years 2 months ago #63469 by alzander
Understood. The GUI method would be much better and we'll take it under consideration when we're doing our next feature planning session.

As noted, the defaults area should help not have to set so many tags for each article, but I know that still doesn't make it simple. It's the best I can offer for now though if the Open Graph plugins and other more automated methods don't work for your needs.

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

None
6 years 2 months ago #63470 by webdevtim
Thanks Alex, and thanks for the great work. I appreciate the fact that adding and debugging a feature like this is time consuming.
With the defaults set we will be able to manage quite nicely.

I would also like to be able to get a module to pick up the tags on each page as well, so that I don't need to include the JFBCLike, SCTwitterShare and SCGooglePlusOne tags on each page. Really the only thing that needs to be set on those is the Facebook ref= attribute and the Twitter text= attribute, otherwise the URL can be picked up from the OpenGraph tags.
The topic has been locked.
Support Specialist
6 years 2 months ago #63482 by alzander

I would also like to be able to get a module to pick up the tags on each page as well, so that I don't need to include the JFBCLike, SCTwitterShare and SCGooglePlusOne tags on each page.

Can you explain what you mean here further? JFBConnect has a JFBConnect - Content plugin which can automatically add share buttons to each Joomla article. We also have the JFBCSocialShare module which can be added as a module to a page to add the social buttons (it's what adds the buttons 'floating' to the bottom right of this page, but it can go in a fixed position as well).

Really the only thing that needs to be set on those is the Facebook ref= attribute and the Twitter text= attribute, otherwise the URL can be picked up from the OpenGraph tags.

What attributes are those and what is there purpose? If you can provide some documentation on what those tags are, we'll gladly investigate if there's something more we can be doing.

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

None
6 years 2 months ago #63486 by webdevtim
I will provide a detailed description of what I am asking here tonight when I have some time to devote to this.
The topic has been locked.
Active Subscriptions:

None
6 years 2 months ago #63493 by webdevtim
What I would like, is to have a module that picks up the Easy Tag info that exists for each piece of content along with the the defaults set in Social Meta -> Configuratoin -> Defaults.

I would like to enter the Easy Tag information similar to the following:
<div id="jfbcSocialMediaButtons">
{JFBCLike href=https://www.911tap.org/557-news-releases/723-911tap-petition-project-quarterly-progress-report layout=button show_faces=false share=true width=60 action=like colorscheme=dark ref=911-tap-quarterly-01-18-petition-report kid_directed_site=false}
{SCTwitterShare href=https://www.911tap.org/557-news-releases/723-911tap-petition-project-quarterly-progress-report text=At the end of the 4th Quarter, 2017, 2717 people, worldwide, signed the 911TAP petition… or less data_count=horizontal via=911tap related=ae911truth,911Blogger,DC911truth hashtags=911truth,wtc7 size=medium dnt=false}
{SCOpenGraph twitter:image:alt=9/11 TAP Quarterly Petition Report Banner}
{SCGooglePlusOne https://www.911tap.org/557-news-releases/723-911tap-petition-project-quarterly-progress-report annotation=bubble size=standard align=left recommendations=true}
{SCOpenGraph image=https://www.911tap.org/images/articles/2018/01/petition-quarterly-report-fb-banner_64326.jpg}
{SCOpenGraph url=https://www.911tap.org/557-news-releases/723-911tap-petition-project-quarterly-progress-report}
{SCOpenGraph title=911TAP Petition Project Quarterly Progress Report}
{SCOpenGraph description=This is the latest in a series of articles published at the beginning of every calendar quarter. Here, we present the updated status of the 911TAP Petition Project at the end of the 4th Quarter 2017…}
</div>

And the Social Meta -> Configuration -> Defaults are already set as follows.
url=https://www.911tap.org/
title=9/11 Truth Action Project
og:description=The mission of the 9/11 Truth Action Project is to build and mobilize a global grassroots movement that will expose the truths of 9/11, create a groundswell of civic support, and the restoration of our civil liberties…
twitter:description=The mission of the 9/11 Truth Action Project is to mobilize a global grassroots movement.
image=https://www.911tap.org/images/socialmedia/open-graph/911tap-grobal-grass-roots-movement.jpg
twitter:image:alt=9/11 Truth Action Project Banner
site_name=9/11 Truth Action Project
author=911tap
twitter:creator=911tap
video=https://content.jwplatform.com/players/ENno7di6-A4cZR76S.html
audio=https://content.jwplatform.com/players/Zf88zyiO-A4cZR76S.html

This generates the following Social HTML Meta Tags
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@social-media.admin"/>
<meta name="twitter:image:alt" content="9/11 TAP Quarterly Petition Report Banner"/>
<meta name="twitter:image" content="https://www.911tap.org/images/articles/2018/01/petition-quarterly-report-fb-banner_64326.jpg"/>
<meta property="og:image" content="https://www.911tap.org/images/articles/2018/01/petition-quarterly-report-fb-banner_64326.jpg"/>
<meta property="og:url" content="https://www.911tap.org/557-news-releases/723-911tap-petition-project-quarterly-progress-report"/>
<meta name="twitter:title" content="911TAP Petition Project Quarterly Progress Report"/>
<meta property="og:title" content="911TAP Petition Project Quarterly Progress Report"/>
<meta name="twitter:description" content="At the end of the 4th Quarter, 2017, 2717 people, worldwide, signed the 911TAP petition…"/>
<meta property="og:description" content="This is the latest in a series of articles published at the beginning of every calendar quarter. Here, we present the updated status of the 911TAP Petition Project at the end of the 4th Quarter 2017…"/>
<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="og:site_name" content="9/11 Truth Action Project"/>
<meta property="og:type" content="website"/>
<meta property="og:author" content="911tap"/>
<meta name="twitter:creator" content="@911tap"/>
<meta property="fb:app_id" content="311988672497703"/>
<meta property="og:locale" content="en_gb"/>

So, to reiterate, what I want, is to have a module that displays on every page like the Easy Tags implementation on: www.911tap.org/557-news-releases/723-911...gress-report-2017-q4

That module would use the Easy Tag information of the page if it exists, else use the default information found in Social Meta Configuration -> Defaults

The venue specific tags on each page:
{JFBCLike href=https://www.911tap.org/557-news-releases/723-911tap-petition-project-quarterly-progress-report layout=button show_faces=false share=true width=60 action=like colorscheme=dark ref=911-tap-quarterly-01-18-petition-report kid_directed_site=false}
{SCTwitterShare href=https://www.911tap.org/557-news-releases/723-911tap-petition-project-quarterly-progress-report text=At the end of the 4th Quarter, 2017, 2717 people, worldwide, signed the 911TAP petition… or less data_count=horizontal via=911tap related=ae911truth,911Blogger,DC911truth hashtags=911truth,wtc7 size=medium dnt=false}
{SCOpenGraph twitter:image:alt=9/11 TAP Quarterly Petition Report Banner}
{SCGooglePlusOne https://www.911tap.org/557-news-releases/723-911tap-petition-project-quarterly-progress-report annotation=bubble size=standard align=left recommendations=true}
would be used to configure the Social Media Buttons for that page. Specifically ref=911-tap-quarterly-01-18-petition-report, and text=At the end of the 4th Quarter, 2017, 2717 people, worldwide, signed the 911TAP petition… attributes for Facebook and Twitter, respectively, are unique values and need to be picked up by the module. It would be nice if defaults for the attributes that are specific to each Social Media venue could be set in the module.

The resulting HTML would look something like:
<div id="jfbcSocialMediaButtons">
 <div class="JFBC-Config">
  <div class="sourcecoast facebook like jfbclike">
   <div class="fb-like fb_iframe_widget" data-href="https://www.911tap.org/557-news-releases/723-911tap-petition-project-quarterly-progress-report" data-show-faces="false" data-share="true" data-layout="button" data-width="60" data-action="like" data-colorscheme="dark" data-ref="911-tap-quarterly-01-18-petition-report" data-kid-directed-site="false" fb-xfbml-state="rendered" fb-iframe-plugin-query="action=like&amp;app_id=311988672497703&amp;color_scheme=dark&amp;container_width=0&amp;href=https%3A%2F%2Fwww.911tap.org%2F557-news-releases%2F723-911tap-petition-project-quarterly-progress-report&amp;layout=button&amp;locale=en_GB&amp;ref=911-tap-quarterly-01-18-petition-report&amp;sdk=joey&amp;share=true&amp;show_faces=false&amp;width=60">
    <span style="vertical-align: bottom; width: 95px; height: 20px;">
     <iframe name="f2fcf8889bf2c4a" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:like Facebook Social Plugin" style="border: medium none; visibility: visible; width: 95px; height: 20px;" src="…" class="" width="60px" height="1000px" frameborder="0">
     </iframe>
    </span>
   </div>
  </div>
 </div>

 <div class="JFBC-Config">
  <div class="sourcecoast share twitter sc_twittershare">
   <iframe id="twitter-widget-0" scrolling="no" allowtransparency="true" class="twitter-share-button twitter-share-button-rendered twitter-tweet-button" style="position: static; visibility: visible; width: 60px; height: 20px;" title="Twitter Tweet Button" src="…"" data-url="https://www.911tap.org/557-news-releases/723-911tap-petition-project-quarterly-progress-report" frameborder="0">
   </iframe>
  </div>
 </div>

 <div class="JFBC-Config">
  <div class="sourcecoast plusone google sc_gplusone">
   <div style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent none repeat scroll 0% 0%; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 38px; height: 24px;" id="___plusone_0">
    <iframe ng-non-bindable="" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 38px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 24px;" tabindex="0" vspace="0" id="I0_1518647491075" name="I0_1518647491075" src="…" data-gapiattached="true" title="G+" width="100%" frameborder="0">
    </iframe>
   </div>
  </div>
 </div>
</div>

On top of that, I would want an editor plugin that provides a GUI for entering the Easy Tag information
The topic has been locked.
Active Subscriptions:

None
6 years 2 months ago - 6 years 2 months ago #63494 by webdevtim
One problem with your existing code I found is if there is the following on the page
{SCTwitterShare href=https://www.911tap.org/557-news-releases/723-911tap-petition-project-quarterly-progress-report text=At the end of the 4th Quarter, 2017, 2717 people, worldwide, signed the 911TAP petition… or less data_count=horizontal via=911tap related=ae911truth,911Blogger,DC911truth hashtags=911truth,wtc7 size=medium dnt=false}
and
{SCOpenGraph description=This is the latest in a series of articles published at the beginning of every calendar quarter. Here, we present the updated status of the 911TAP Petition Project at the end of the 4th Quarter 2017…}
What gets generated is:
<meta name="twitter:description" content="This is the latest in a series of articles published at the beginning of every calendar quarter. Here, we present the updated status of the 911TAP Petition Project at the end of the 4th Quarter 2017…"/>
<meta property="og:description" content="This is the latest in a series of articles published at the beginning of every calendar quarter. Here, we present the updated status of the 911TAP Petition Project at the end of the 4th Quarter 2017…"/>
Where this should be:
<meta name="twitter:description" content="At the end of the 4th Quarter, 2017, 2717 people, worldwide, signed the 911TAP petition…"/>
<meta property="og:description" content="This is the latest in a series of articles published at the beginning of every calendar quarter. Here, we present the updated status of the 911TAP Petition Project at the end of the 4th Quarter 2017…"/>
It would seem as if you are missing some logic that perhaps goes like the following:

If SCTwitterShare text="…" exists in Easy Tags use that for twitter:description, else if SCOpenGraph description="…" exists in Easy Tags use that for twitter:description else if twitter:description exists in Social Meta -> Configuration -> Defaults use that for twitter:description else use og:description="…" in Social Meta -> Configuration -> Defaults for twitter:description.
Last edit: 6 years 2 months ago by webdevtim.
The topic has been locked.
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. JFBCSocialShare module not working like I thought it would
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS