Log in | Register
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. Twitter Card Image and Easy Tags

Topic-icon Twitter Card Image and Easy Tags

Active Subscriptions:

None
7 years 1 month ago #61059 by webdevtim
I don't see an Easy Tag specifically for twitter:image unless it would be {twitter:image content=https://www.911tap.org/images/articles/2017/02/911tap-editorial-policy-twitter_b546a.jpg}

I see: name="twitter:image" content="www.911tap.org/images/articles/2017/02/9...y-facebook_c118e.jpg" in view source, but I need the image for twitter to be different that the Facebook image.

I hate to be a pain, but I have spent an hour looking so far and I haven't found the solution yet.

Here are other things I want to add via tags:

{twitter:image content=URL of image to use in the card. Image must be less than 1MB in size}
{twitter:image:alt content=A text description of the image conveying the essential nature of an image to users who are visually impaired}

A text description of the image conveying the essential nature of an image to users who are visually impaired

And beyond that I would like:

{twitter:player content=HTTPS URL of player iframe} I have a JWPalyer account and would like to add the iframe for the video player here.
{twitter:player:width content=Width of iframe in pixels}
{twitter:player:height content=Height of iframe in pixels}
{twitter:player:stream content=URL to raw video or audio stream}
The topic has been locked.
Support Specialist
7 years 1 month ago #61067 by mel
Basically all of these should still be the SCOpenGraph easy-tag. However, if you've already tried the following suggestions and they're not working still, please let us know.

I don't see an Easy Tag specifically for twitter:image unless it would be {twitter:image content=https://www.911tap.org/images/articles/2017/02/911tap-editorial-policy-twitter_b546a.jpg}

I see: name="twitter:image" content="www.911tap.org/images/articles/2017/02/9...y-facebook_c118e.jpg" in view source, but I need the image for twitter to be different that the Facebook image.

I hate to be a pain, but I have spent an hour looking so far and I haven't found the solution yet.

Please try the SCOpenGraph easy-tag, so instead of {twitter:image content=https://www.911tap.org/images/articles/2017/02/911tap-editorial-policy-twitter_b546a.jpg} it would be {SCOpenGraph twitter:image=https://www.911tap.org/images/articles/2017/02/911tap-editorial-policy-twitter_b546a.jpg} - if there are more than one twitter:image in the source after trying that, I would then also suggest setting the JFBConnect > Social Meta > Configuration > "Multiple og:image Tags" option to No.

Here are other things I want to add via tags:
{twitter:image content=URL of image to use in the card. Image must be less than 1MB in size}
{twitter:image:alt content=A text description of the image conveying the essential nature of an image to users who are visually impaired}
A text description of the image conveying the essential nature of an image to users who are visually impaired

{SCOpenGraph twitter:image=URL}
{SCOpenGraph twitter:image:alt=text}

And beyond that I would like:
{twitter:player content=HTTPS URL of player iframe} I have a JWPalyer account and would like to add the iframe for the video player here.
{twitter:player:width content=Width of iframe in pixels}
{twitter:player:height content=Height of iframe in pixels}
{twitter:player:stream content=URL to raw video or audio stream}

{SCOpenGraph twitter:player=HTTPS URL of player iframe}
{SCOpenGraph twitter:player:width=Width of iframe in pixels}
{SCOpenGraph twitter:player:height=Height of iframe in pixels}
{SCOpenGraph twitter:player:stream=URL to raw video or audio stream}
The topic has been locked.
Active Subscriptions:

None
7 years 1 month ago #61070 by webdevtim
Thanks Mel, I could find that in the documentation, though I expected that maybe you had handled these tags in the way you described.
The topic has been locked.
Active Subscriptions:

None
7 years 1 month ago - 7 years 1 month ago #61076 by webdevtim
There is one problem that you may not be aware of.

If I add my own twitter tags like this:
<div class="JFBC-Config">{SCOpenGraph twitter:image=https://www.911tap.org/images/articles/2017/02/911tap-editorial-policy-twitter_b546a.jpg}</div>
<div class="JFBC-Config">{SCOpenGraph twitter:image:alt=text}</div>

What happens is that I end up with two sets of twitter tags. One is generated form the tags above, and the second is generated from the og:image tag.

What I did was use the tags listed below. In Open Graph -> Settings, I have Twitter Cards -> Card Type set to "Summary Card with Large Image." I make my images 1200 X 600 which works well for both Twitter and Facebook. I also have Open Graph -> Settings -> Multiple og:image Tags set to "Yes," but I am only using one image per page so as not to confuse Twitter and Facebook This works nicely, but I am having issues with the Social Media Stream Module.
<div class="JFBC-Config">{JFBCLike href=https://www.911tap.org/557-news-releases/item_id-item_alias.html layout=box_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.html 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">{SCOpenGraph twitter:image:alt=text}</div>
<div class="JFBC-Config">{SCGooglePlusOne https://www.911tap.org/557-news-releases/item_id-item_alias.html annotation=bubble size=standard align=left recommendations=true}</div>
<div class="JFBC-Config">{SCOpenGraph image=https://www.911tap.org/images/articles/2017/mm/name-of-article-facebook-image.jpg}</div>
<div class="JFBC-Config">{SCOpenGraph url=https://www.911tap.org/557-news-releases/item_id-item_alias.html}</div>
<div class="JFBC-Config">{SCOpenGraph title=9/11 TAP Editorial Policy}</div>
<div class="JFBC-Config">{SCOpenGraph description=Description of article in 220 characters or less...}</div>
<div class="JFBC-Config">{SCOpenGraph type=article}</div>
<div class="JFBC-Config">{SCOpenGraph site_name=9/11 Truth Action Project}</div>

This is the difficulty I am having with the Social Media Stream module. I am getting a cropped 130px X 130px image in place of the full image I am sending to Facebook. Is there a way to configure those images? I see that they are generated on your CDN. You call them safe images, could you explain what is meant by that, and how I could set this up in a custom manner?

What I want is:
[img]http://webdev.911truthoutreach.org/images/temp/desired social-media-stream-display.jpg[/img]

Instead of:
[img]http://webdev.911truthoutreach.org/images/temp/existing social-media-stream-display.jpg[/img]

The html below is what is generated by your application. I have indicated what I would prefer first, and what is currently generated second within comments.
<div class="facebook page post row-fluid">
<div class="span12 author">
<div class="row-fluid">
<div class="row-fluid">
<div class="preview span12">
<div class="title">
<div class="image"> <!-- I would like something more like -->
<img src="https://www.911tap.org/images/articles/2017/01/tap-petiton-facebook_73752.jpg" width="360">
<!-- instead of -->
<!-- <img src="https://external.xx.fbcdn.net/safe_image.php?d=AQAwiH5TnFPcnWUn&w=130&h=130&url=https%3A%2F%2Fwww.911tap.org%2Fimages%2Farticles%2F2017%2F01%2Ftap-petiton-facebook_73752.jpg&cfs=1&_nc_hash=AQB0SB0u3SAK1QNh"> -->
</div>
<div class="caption">
<div class="description">
</div>
</div>

/** With the following CSS **/

.socialstream .preview .image img {
    max-width: 100%;
}

/** instead of **/

/ **.socialstream .preview .image img {
    max-width: 60%;
} **/

I would like to have control over the generation of the thumbnails and I would like them to reside on our website which is also connected to the CloudFlare CDN. What are the issues that are involved with such a request?
Last edit: 7 years 1 month ago by webdevtim.
The topic has been locked.
Support Specialist
7 years 1 month ago #61127 by alzander
The CDN that's generating those thumbnails is Facebook, not us in anyway. They have the safe_image library wrap any external images that are loaded within Facebook or other sites to prevent malicious images from being shown. Basically, what looks like a benign image can be used to spread malware and other stuff, so Facebook puts every image through their own tool to make sure it's an image they trust and specifically *not* drawn directly from the original website.. since that can be changed out a moment's notice.

Now, looking at the 2 URLs you show, the fbcdn link does look to be loading the same URL from your server. If that's the correct URL, there's nothing more we can do about that. It's just Facebook doing what Facebook wants with the image we set in the Open Graph tags.

I hope that helps explain a bit further, but if you need anything else, just let me know.

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

None
7 years 1 month ago #61128 by webdevtim
Thanks Alex, there is no way I can provide a second image for call back?

I think you would have told me if there is, but just checking to make sure.

But thanks, as knowing that I have exhausted the limits of the connection with Facebook will keep me from additionally spinning my wheels.
The topic has been locked.
Support Specialist
7 years 1 month ago #61138 by alzander
Just to make sure, we're talking about the content in the SCSocialStream module, correct? So you're seeing your feed and the feed is altering the images that are from your site to have the fbcdn URLS?

If so, no, there's nothing that can be done about that. While that is our code showing the feed on your page, the contents come directly from Facebook after they've been 'processed' by Facebook. We're just wrapping the description, images and whatnot in HTML for your site. We wouldn't easily be able to tell if an image was from your site or any other site and alter only the ones just from your site.

As always, I hope that helps explain,
Alex
The topic has been locked.
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. Twitter Card Image and Easy Tags
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS