Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
Vimeo thumbnails and Open Graph
Hello!
I found this script (works)
<script type="text/javascript">
$.ajax({
type:'GET',
url: 'http://vimeo.com/api/v2/video/' + <txp:custom_field name='videovimeo' /> + '.json',
jsonp: 'callback',
dataType: 'jsonp',
success: function(data){
var thumbnail_src = data[0].thumbnail_large;
$('#thumb_wrapper').append('<img src="' + thumbnail_src + '"/>');
}
});
</script><div id="thumb_wrapper"></div>As you can see, the script appends the <img src.... to <div id="thumb_wrapper">here</div>
But what I need is to append the image thumbnail url TO: <meta property="og:image" content="HERE" />
Any ideas?
(I’ve tried to find a lot of solution, including PHP, but with no success).
Last edited by robhert (2013-02-20 16:29:00)
Offline
Re: Vimeo thumbnails and Open Graph
Does whatever you hope to use the meta tag have javascript enabled? Might be pointless trying to do it this way.
Piwik Dashboard, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker
Offline
Re: Vimeo thumbnails and Open Graph
Hi Matt! Thank you for answer.
What I propose is to use Open Graph (To send the articles to Facebook with its respective image by “Like”). Then, as the article is a video from Vimeo, what I do is use the URL IMAGE <meta property="og:image" content="IMAGE URL HERE" /> and it has the direction of the Vimeo video image.
You see, for the user to click “Like”, you must have javascript enabled, so we understand that use of JavaScript is valid.
Now, I don’t use PHP (though I know that it is possible) because I could not implement it successfully. But if someone gives me a help with PHP, great!
Thanks in advance!
Offline
Re: Vimeo thumbnails and Open Graph
It would seem from this question and answer on Stack Overflow that trying to add Facebook Open Graph properties post page load will not work as intended. The meta data needs to be in the original source of the page so you need some way of doing that before the page is sent to the browser.
The only way I can think of doing that is to add some way of getting the URL of the thumbnail from Vimeo using PHP and inserting it into the document <head> in Textpattern. Unless there is a way of hacking the URL of the thumbnail based on the video ID (which I guess is what you are storing in the videovimeo custom field).
Offline
Re: Vimeo thumbnails and Open Graph
Now I understand it a little more. I found a lot of PHP ways, but none of them worked for me, maybe I don’t know how to implement it.
Here are some:
<txp:php>
$video_url = "http://vimeo.com/<txp:custom_field name='videovimeo' />"
$file = fopen($video_url, "r");
$filedata = stream_get_contents($file);
$html_content = strpos($filedata,"<link rel=\"videothumbnail");
$link_string = substr($filedata, $html_content, 128);
$video_id_array = explode("\"", $link_string);
$thumbnail_url = $video_id_array[3];
echo $thumbnail_url;
</txp:php>But how should I show it?
HERE are another one: http://ilikekillnerds.com/2012/03/a-php-function-to-get-vimeo-video-thumbnails-easily/
Any ideas?
Offline
Re: Vimeo thumbnails and Open Graph
It will be easier to help you if you give an example of vimeo feed you are trying to import.
Offline
Re: Vimeo thumbnails and Open Graph
Hi Oleg!
Ok. I want to add the thumbnail of a Vimeo video to the following: <meta property="og:image" content="URL.jpg" /> nothing else. So I could show it like this:
<head>
<title>Title</title>
<meta property="og:title" content="<txp:page_title />" />
<meta property="og:image" content="http://www.IMAGE-URL.com/image.jpg" />
<meta property="og:description" content="<txp:excerpt />" />
<meta property="og:url" content="<txp:permlink />" />
</head>Thank you in advance!
Offline
Re: Vimeo thumbnails and Open Graph
Yes, but from where would you like to extract IMAGE-URL: json feed, xml, html? Could you provide an example, I don’t know vimeo very well.
Offline
Re: Vimeo thumbnails and Open Graph
Well, in case you need to extract it from the video page itself, try
<meta property="og:image"<txp:etc_query url="http://vimeo.com/58729480" query="//meta[@property='og:image']/@content" />>Mind, however, that connecting to vimeo will take some time. If your php is <5.3.8 (required for etc_query), you can try to do it with smd_xml.
Offline
Re: Vimeo thumbnails and Open Graph
Vimeo has a public API. Therefor, there is really no need to parse the pages themselves. It’s not every elegant way of doing it.
Anyways, getting the video’s information from Vimeo is no brainer. You can either do it with the help of any XML parser plugin there is, or even do it without any plugins — it all just requires just few lines of very simple PHP.
Caching the data is pretty much no-brainer too. Since you are using articles, you could use custom fields store the values or a preference field even.
So how? Well, for example like this. The following solution is rather modular and allows you to fetch any meta value from any video. Requires just little bit of PHP and creating a form template.
Create a form template called vimeo, and populate it with the following:
<txp:php>
/**
* Gets Vimeo video id from the contained statement and fetches the meta data for it.
*
* After loading the meta data, it populates variables containing each and every
* value. Each of these variables is prefixed with 'vimeo:'.
*
* All meta files are cached to Textpattern's preferences table.
*/
$video_id = trim(yield(array()));
if ($video_id)
{
$data = get_pref('abc_vimeo_v_'.$video_id);
if (!$data)
{
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://vimeo.com/api/v2/video/'.urlencode($video_id).'.json');
curl_setopt($ch, CURLOPT_FAILONERROR, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
$file = curl_exec($ch);
$status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if ($file && $status == 200)
{
$data = $file;
set_pref('abc_vimeo_v_'.$video_id, $data, 'abc_vimeo', PREF_HIDDEN);
}
}
if ($data && $json = @json_decode($data))
{
foreach ($json[0] as $name => $value)
{
variable(array(
'name' => 'vimeo:'.txpspecialchars($name),
'value' => txpspecialchars((string) $value),
));
}
}
}
</txp:php>After that, you can get any information out of any Vimeo video by simply calling the form which you named vimeo. The snippet creates variables with each containing a value fetched from the API. Usage is rather simple, for instance:
<txp:output_form form="vimeo">
58729480
</txp:output_form>
<txp:variable name="vimeo:thumbnail_large" />Since you are storing the Video ID in a custom field, the above would become:
<txp:output_form form="vimeo">
<txp:custom_field name="videovimeo" />
</txp:output_form>
<txp:variable name="vimeo:thumbnail_large" />
<txp:variable name="vimeo:title" />
<txp:variable name="vimeo:id" />
<txp:variable name="vimeo:description" />Which would output thumbnail, title, id and description for the video specified in the custom field.
Requires PHP 5.2, cURL and Textpattern 4.5.0 or newer.
Last edited by Gocom (2013-02-20 19:26:01)
Offline
Re: Vimeo thumbnails and Open Graph
Thank you very much Oleg and Jukka for your answer and your time.
Jukka , I’ve made exactly what you wrote and guess what!? It worked! Now when I debug https://developers.facebook.com/tools/debug I have no errors. Your code is a-must-to-have. Thank you again!
Robhert
Offline
Pages: 1