Topic-icon Videos on Facebook and Twitter

Active Subscriptions:

None
8 years 2 months ago - 8 years 2 months ago #57065 by webdevtim
Alex, I am using JWPlayer Advanced and with that I can include a sharing icon in each video on the page. If I get how Facebook and Twitter scrapes the page, if I want a unique image, title and description for each video then instead of having multiple videos in modules on a single page, I need to make a list of available videos in a module where the image for each video is a link to a separate page for that video and then use Easy Tags on that page to set og and twitter properties. From there the user can click the share button and I can use content tags to set the image, title, description, URL, link to video on that page, so that when the user clicks the share button on either the video player or on the page they will get a beautiful representation of that video on their timeline or Twitter page etc. Is there a way to include multiple videos on one page and send separate og:, twitter: properties for each video? JWPlayer depends on the og: and twitter: tags on the page.

You can see what I am talking about by navigating to: www.911truthoutreach.org/broadcast-psas/...smoking-gun-psa.html

For videos I see the following:
<meta property="og:video" content="http://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />
But I don't see a property for the poster image. Would Facebook just be the og:image tag in this case?

Would I do something like:
<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="http://example.com/rock2.jpg" />
<meta property="og:image" content="http://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />]
And let Facebook and Twitter pick the poster image from the list?

I am also not quite sure how to use these:
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.
Do I declare <meta property="og:video.movie" content="example.com/movie.swf" /> and then follow with , , etc.? Using Easy Tags to accomplish this of course.
Last edit: 8 years 2 months ago by webdevtim.
The topic has been locked.
Support Specialist
8 years 2 months ago #57144 by mel
Replied by mel on topic Videos on Facebook and Twitter
Sorry for the delay in answering this. If you haven't already, please review the documentation here for Facebook's video object type.

For videos I see the following:
Code:
<meta property="og:video" content="example.com/movie.swf" />
<meta property="og:video:secure_url" content="secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />
But I don't see a property for the poster image. Would Facebook just be the og:image tag in this case?
Would I do something like:
Code:
<meta property="og:image" content="example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="example.com/rock2.jpg" />
<meta property="og:image" content="example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />]
And let Facebook and Twitter pick the poster image from the list?


Looking at the above documentation link, the poster image should be an og:image tag. Facebook/Twitter will pick the "best" image. We don't know how they will behave if you attempt to target multiple image dimensions like the above example. It's possible only the first sizing would take effect, but we don't know.

I am also not quite sure how to use these:
Code:
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.
Do I declare <meta property="og:video.movie" content="example.com/movie.swf" /> and then follow with , , etc.? Using Easy Tags to accomplish this of course.


I think it would be something more like the following:
<meta property="og:type" content="video.movie"/>
<meta property="og:url" content="http://example.com/movie.swf" />
<meta property="video:actor:id" content="104009729636866" /> <-- That's Matt Damon's ID that I looked up
<meta property="video:director:id" content="FILL_IN_DIRECTORS_FB_ID" />

My answers are based off of looking at this document, and not actually putting them into practice, so take them with a grain of salt :)

-Melissa
The topic has been locked.
Active Subscriptions:

None
8 years 2 months ago - 8 years 2 months ago #57148 by webdevtim
Thanks so much Mel. Good information.

I just wanted to get some feedback on how to handle many videos on a single page. Since the og: and twitter: tags for the pages are what will be scraped by twitter and Facebook, it is my sense that if I want the video to nave all the same properties it has on the website on the Facebook and twitter pages, then I can only have one video per page. JWPlayer has a social media plugin, but when I enable it, all the social media buttons on any page that also has a JWPlayer video on it are treated as if the content is a video by Facebook, throwing an error.

The only way I see to get around this is to create a play list of images of the player with the poster images on the pages that I want to have videos and the create a hidden menu item of type K2 Item that is solely devoted to that video without anything else on the page and then link items in the play list to those hidden menu items. That way I could add all the Easy Tags necessary so the the video can be properly shared.

Unfortunately JoomlaRulez that coded the JWPlayer plugin didn't provide for a menu type of JWPlayer which is why I have to use K2 Items and then use a JWPlayer content tag to get the JWplayer plugin to pick it up and display the video on the page. I want to use the Social Link that the JWPlayer provides, which displays on the video itself, which I think will just pick up the og: and twitter: meta tags on the page. Perhaps when I get all the spurious social media tags removed from the page, the JWPlayer Social Media plugin may provide a nice video on Facebook and Twitter without my having to add the Easy Tags, maybe, I will let you know. I think the JWPlayer Social Media plugin is pretty spartan.

I have to experiment with this a bit and I will let you know what I find works best.

Thanks for the great support.
Last edit: 8 years 2 months ago by webdevtim.
The topic has been locked.
Support Specialist
8 years 2 months ago #57153 by alzander
Keep us posted. Just so you know, even a hidden menu item isn't really hidden from the world. Anyone could still share the link to the video-specific page, so you can't really assume it won't be used. I'd focus on getting the page how you want instead of trying some sort of shenanigans involving less-accessible content.

Alex
The topic has been locked.
Active Subscriptions:

None
8 years 2 months ago - 8 years 2 months ago #57155 by webdevtim
Yes, but I need a unique URL for each video if I want the video formatted on twitter and Facebook the way I want it. I can't have both and article and a video on the same page if I want to use og:image to provide a poster image for the video. The videos page just can't have any other og or twitter tags on the page other than the canonical URL.

I know a hidden URL isn't hidden from the world, it is just hidden from the navigation bar.
Last edit: 8 years 2 months ago by webdevtim.
The topic has been locked.