How can I use OG and Twitter meta tags in Joomla pages. Is there any plugin which creates additional fields in the article editor under 'publishing'tab ?
Thanks in advance.
From what I have investigated, Facebook does automatically place all description, title and picture in its place. Twitter does not. You need to added manually. I had the same problem fixed with this code. I was trying to get Twitter to add my link just as facebook does automatically but had to investigate the CARD Validator here https://cards-dev.twitter.com/validator ... The way I have it working on Joomla 3.9.11 is adding this code in the head of my template default.php ... I was able to properly add the title, the description and the right picture, usually the first one on the article.
<head>
<?php
//Added for TWITTER
$option = JRequest::getCmd('option');
$view = JRequest::getCmd('view');
if ($option=="com_content" && $view=="article") {
$ids = explode(':',JRequest::getString('id'));
$article_id = $ids[0];
$article =& JTable::getInstance("content");
$article->load($article_id);
$theArticle = $article->get("title");
$theImages = $article->get("images");
$pictures = json_decode($theImages); // Split the parameters apart
$timage= "http://yourdomain.com/".$pictures->{'image_intro'};
}
$doc =& JFactory::getDocument();
$doc->addCustomTag( '
<meta name="twitter:title" content="'.mb_strimwidth(strip_tags($theArticle),0,225, " ...").'"=""/>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="yoursite">
<meta name="twitter:creator" content="yourcreator">
<meta name="twitter:url" content="'.JURI::current().'">
<meta name="twitter:description" content="'.mb_strimwidth(strip_tags($doc->getMetaData( 'description' )),0,225, " ...").'"=""/>
<meta name="twitter:image" content="'.$timage.'">
');
?>
<!-- This is what is already on Joomla Headers -->
<jdoc:include type="head" />
<?php $this->loadBlock('head') ?>
</head>
Related
When using Sharethis to share a post from my website, the Twitter share button is unable to grab a dynamically generated image for the post. I have also included the link to the image in the head with "twitter:image" but the problem seems to persist. Any idea how to go around this?
this is an example of metatags to twitter in Django:
in between place:
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:description" content="Place your card description here"/>
<meta name="twitter:title" content="Card TITLE here"/>
<meta name="twitter:image" content="{{SITE_PROTOCOL_URL}}{% static 'location of the image in static files' %}"/>
where SITE_PROTOCOL
context = {
'SITE_PROTOCOL_URL': request._current_scheme_host,
}
In this LINK you can find the twitter card validator debugger
the content url for twitter:image in this example would be:
https://your-site.com/media/your_image_name.jpg
Hope I could help.
Note that will only work in a "live web" context
For my web app, I need to get a preview of URL given by the user.
For example, in Facebook, if the user copy-paste an URL,it automatically fetches the content of the URL and displays a preview of the page.
How does it work? Is it a feature of Ajax? I need to do it in Django.
Any tutorials or demos?
For Facebook, there is a standard way to make your site "preview" compatible, using open graph tags. The most common ones are:
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
The complete list is available at the open graph protocol site. You can use PyOpenGraph to parse a URL for its open graph tags. Here is the example from the readme:
>>> import PyOpenGraph
>>> og = PyOpenGraph('http://www.rottentomatoes.com/m/10011268-oceans/')
>>> print og.metadata
{'url': 'http://www.rottentomatoes.com/m/10011268-oceans/',
'site_name': 'Rotten Tomatoes',
'image': 'http://images.rottentomatoes.com/images/movie/custom/68/10011268.jpg',
'type': 'movie',
'title': 'Oceans'}
>>> print og.metadata['title']
Oceans
I have an application that posts music videos from YouTube to a Facebook user's wall. The post on Facebook would have this embed video be playable from Facebook. Recently it stopped happening.
After some testing, it seems that when one makes the graph API post with the source being a YouTube video, then the link also needs youtube.com in the domain for it to be playable within a Facebook context.
To repeat:
You can take a look for yourself by logging into Facebook and going here:
https://developers.facebook.com/tools/explorer
Then get an access token with read_stream and publish_stream permissions (extended permissions tab).
Switch from GET to POST and set the endpoint to /me/feed with the following fields:
message = message
description = description
name = name
caption = caption
link = http://www.youtube.com/watch?v=r1dfEf1qOt4
source = http://www.youtube.com/e/r1dfEf1qOt4
picture = http://img.youtube.com/vi/r1dfEf1qOt4/0.jpg
It should show up on your Facebook wall and be playable.
Now do it again, but change the link to http://www.google.com.
It is no longer playable.
Can anyone confirm if this is expected behavior? I can't find anything in the Facebook docs. Perhaps I am just missing something?
Generalized Workaround
I generalized the answer to this similar question: posting a swf in facebook feed through facebook api. I created a page that takes two parameters and generates the necessary meta tags. Facebook accepts the link, the user is correctly redirected, and you don't need a separate page for each posted video.
url - the final URL
id - the id of the youtube or embedded video
I successfully made numerous embedded posts in which the link was not associated with the video.
Example Post
message = Post message
description = Post description if needed.
name = Post name
caption = Post caption
link = http://vbcopper.com/jsuar/so/fbembedvideo.php?url=stackoverflow.com&id=QGAJokcwBXI
source = http://www.youtube.com/e/QGAJokcwBXI
picture = http://img.youtube.com/vi/QGAJokcwBXI/0.jpg
PHP
<?php
$id = $_GET["id"];
$url = $_GET["url"];
if ( isset($url) ) {
echo <<< EOT
<html>
<head>
<title>$url</title>
<meta property="og:title" content="Page Title" />
<meta property="og:type" content="website"/>
<meta property="og:description" content="Content for Description" />
<meta property="og:image" content="http://i2.ytimg.com/vi/$id/mqdefault.jpg" />
<meta property="og:site_name" content="Content for caption"/>
<meta property="og:video" content="http://www.youtube.com/v/$id?version=3&autohide=1">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="640">
<meta property="og:video:height" content="360">
<META http-equiv="refresh" content="1;URL=http://$url">
</head>
<body>
</body>
</html>
EOT;
} else {
echo "Nothing here...";
}
?>
Findings
I was able to successfully replicate your issue. I could find no work around.
This has been submitted as a bug to Facebook but deemed low priority.
Bugs: Posting video to feed with link attribute doesn't embed the source
https://developers.facebook.com/bugs/502967809730190?browse=search_5074a2e48fd360934230075
Normally to share YouTube videos to Facebook pages you only need message, link, source,
picture parameters. Even you can also skip the source, picture parameters if you wish to. Thats is if you are using FacebookC#SDK to share video to Facebook all you need is following code
var fb = new Facebook.FacebookClient(yourPageAccessToken);
argList["message"] = message;
argList["link"] = "http://www.youtube.com/watch?v=" + specialOffer.YoutubeId;
argList["source"] = "http://www.youtube.com/v/" + specialOffer.YoutubeId;
argList["picture"] = "http://img.youtube.com/vi/" + specialOffer.YoutubeId + "/0.jpg";
fb.Post("feed", argList);
or
var fb = new Facebook.FacebookClient(yourPageAccessToken);
argList["message"] = message;
argList["link"] = "http://www.youtube.com/watch?v=" + specialOffer.YoutubeId;
fb.Post("feed", argList);
Need help understanding how opengraph works and how it relates to the "FB Like" button.
We do have opengraph meta tags deployed on all of the pages for our content. However
it looks like the only way to get "FB Like" button to work, is to run the URL thru the facebook linter.
If a user attempts to "Like" the page, that was never liked before, only the URL will be posted to the wall.
If the url is ran thru the linter, all the consecutive likes will work properly, by image, title and description will be pulled.
is it possible that the app_id is not linking properly with the pages?
having our FB Admin go and like all the content that is produced is not an option
http://www.nydailynews.com/life-style/travel/underwater-photos-amazing-shots-sea-gallery-1.1078782
<meta property="fb:app_id" content="366487756153">
<meta property="fb:admins" content="1594068001">
<meta property="og:site_name" content="NY Daily News">
<meta property="og:title" content="Mark Tipple's Underwater Project - Underwater photos: Amazing shots from under the sea">
<meta property="og:type" content="article">
<meta property="og:url" content="http://www.nydailynews.com/life-style/travel/underwater-photos-amazing-shots-sea-gallery-1.1078782">
<meta property="og:image" content="http://assets.nydailynews.com/polopoly_fs/1.1078770!/img/httpImage/image.jpg_gen/derivatives/searchthumbnail_75/image.jpg">
<meta property="og:description" content="Talented underwater photographer Mark Tipple, from Sydney, Australia, lies in wait for unsuspecting swimmers and surfers before snapping a perfect picture of them from beneath the waves.">
http://www.nydailynews.com/gossip/john-travolta-experienced-bed-passionate-hotel-romp-claims-masseur-luis-gonzalez-article-1.1079272
<meta property="fb:app_id" content="366487756153">
<meta property="fb:admins" content="1594068001">
<meta property="og:site_name" content="NY Daily News">
<meta property="og:title" content="John Travolta was 'a great kisser' and ‘very experienced’ in bed during passionate hotel romp, claims masseur Luis Gonzalez ">
<meta property="og:type" content="article">
<meta property="og:url" content="http://www.nydailynews.com/gossip/john-travolta-experienced-bed-passionate-hotel-romp-claims-masseur-luis-gonzalez-article-1.1079272">
<meta property="og:image" content="http://assets.nydailynews.com/polopoly_fs/1.1079279!/img/httpImage/image.jpg_gen/derivatives/searchthumbnail_75/image.jpg">
<meta property="og:description" content="Another hotel masseur is claiming sexual shenanigans on the part of John Travolta -- only this accuser says he welcomed the actor's horny horseplay and found him "very experienced" in bed.">
In order to get your page recognized as a custom open graph object you'll need to follow these steps.
Create a facebook app
Setup site domain, namespace etc...
Create a custom action and a custom object under app settings >> Open Graph: Getting Started (see this link for help)
After creating it, you'll see your object under object types in Open Graph Settings
Click on "Get Code" button to get the html tags
Update your page to show up the same html head & meta tags
Go to http://developers.facebook.com/tools/debug to test if you have setup everything right
P.S. Don't forget to hit correct answer if it works, or PM me for more help
Your URL isn't set to the application as noted in the linter,
Object at URL 'http://www.nydailynews.com/life-style/travel/underwater-photos-amazing-shots-sea-gallery-1.1078782' of type 'article' is invalid because the domain 'www.nydailynews.com' is not allowed for the specified application id '366487756153'. You can verify your configured 'App Domain' at https://developers.facebook.com/apps/366487756153.
Add the proper domain to your settings and it should work.
Having never dealt with Facebook at a developer level, I'm sure that I'm doing something very obviously wrong here. Anyway, here's the problem:
I generate the like button code from https://developers.facebook.com/docs/reference/plugins/like/ and then copy it into my page. When I try to view the site I get nothing displaying.
I noticed that the url in the script section fails to include the protocol (it comes out with: "//connect.facebook.net/en_US/all.js#appId=207642302633270&xfbml=1"). When I have a look what's happening using Firebug I can see that it's inserting the script tag into the head section - but the URL doesn't work. I've tried modifying it to include "https:" as the protocol and I then see that the script gets loaded and that also it inserts a bunch of CSS into the head section.
But still nothing displays on the site.
The only thing I can think of that could be problematic is that I (or, more specifically, my client) doesn't have a Facebook company profile of any sort - I can ask them to set one up if required but this would not be the preferred option as they don't want to maintain a Facebook profile for the business.
Here's a stripped down sample I'm working with:
<html>
<head>
<title>Testing the Like Button</title>
<meta property="og:title" content="Company FB Test" />
<meta property="og:type" content="company" />
<meta property="og:url" content="http://www.domain.com/fb-test.html" />
<meta property="og:image" content="http://www.domain.com/logo.png" />
<meta property="og:site_name" content="Site Name" />
<meta property="fb:admins" content="__MY_FB_ID__" />
</head>
<body>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "https://connect.facebook.net/en_US/all.js#appId=207642302633270&xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="67" data-show-faces="false" data-font="arial"></div>
</body>
</html>
A couple of notes:
The sample includes the protocol "https:" - as mentioned, I've tried without as well.
This has been tested in the latest versions of Chrome 13, Firefox 6 and IE 9
I've tested this in Facebook Lint and it gives me no errors.
Thanks in advance to whoever succeeds in pointing out the obvious to me - and to anyone else who chimes in with any friendly advice.
Cheers,
Zac
You need to make sure to add this code somewhere in your page:
<div id="fb-root"></div>
You will see in the chrome debugger tool that there is an error saying it can't find that div.