The goal :
I would like to have a share button in my fancybox that share the image I'm looking at with the correct image name in the Facebook sharer. I would like that when a user click on this in Facebook, he arrives on an opened Fancybox with the correct image.
The problem :
I have a gallery with Jquery FancyBox (http://fancyapps.com/fancybox/). I added a share button with the code I find in this fiddle (http://jsfiddle.net/G5TC3/).
My share button works, but get the meta og from the site and I want to have the og:image from the image I'm looking at.
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
beforeShow: function () {
if (this.title) {
// Add FaceBook like button
this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
}
},
helpers : {
title : {
type: 'inside'
}
}
});
For the user who clicks on my link and arrives on an opened Facybox with the correct image I have no idea how to do that and if it's possible.
What I know:
I know that I have to have uniques URL for each images and I think I have it. ex from my site:
www.myURL.com/images/gallery/myimages_1.jpg
www.myURL.com/images/gallery/myimages_2.jpg
Is it correct?
I think I have to change the "this.href" in the sharer by the image url. First is it correct? And second (sorry I'm new in javascript) how can I do that?
I hope somebody could help me. Sorry for my English I'm trying to write my best English :)
If you need more information please do not hesitate.
Thanks
[EDIT]:
I add this script on the gallery page
$(function()
{
$('.thumbs').click(function()
{
$tempImgName = $(this).attr('id');
$tempUrl = this.href + '/images/thumbs/' + $tempImgName;
$meta = document.getElementById('facebook');
$meta.setAttribute("content",$tempUrl);
});
});
So when I click on a thumbsnail (with the class .thumbs) I get the image URL and I change the meta (with the facebook Id). It works but I think Facebook check the meta when the page load so how can I force Facebook to recheck my meta to take the good thumbs to share?
og:image cannot change by url. You need to give different share urls for different images.
For example :-
www.myURL.com/?pic=img1
www.myURL.com/?pic=img2 etc.
And a server side language ( like php ) can read the "pic" GET argument and change the og:image.
Related
I'm trying to grab faveIcon image from a website using SwiftSoup
if rel == "icon", try element.attr("type") == "image/x-icon", element.hasAttr("href") {
favIconUrl = try element.absUrl("href")
}
The issue is, in href, there is no any direct url, and it looks like an hyperlink (not so expert on HTML), it's href="/favicon.ico" , which favicon.ico is clickable and it will open the url. My question is, how I can access to the link inside the favicon.ico? Your help would be appreciated.
Many thanks
I have asked a question in Hide div in a Custom Tab opened from a Trusted Web Activity
Let me explain a little bit more.
My twa website is https://www.monsoonmalabar.com/
In the above site there is a link to external site which is https://keralapsc.monsoonmalabar.com/ when clicking this link in twa app, this link opens in in-app browser. In that in-app browser(website: https://keralapsc.monsoonmalabar.com) there is a button floats left side with link https://play.google.com/store/apps/details?id=com.monsoonmalabar.app.
I want to hide that link(button) when user using twa(in-app browser). According to your suggestion in the stackoverflow site, I added the external link as https://keralapsc.monsoonmalabar.com/?hideDiv=true
And added a code in external site as
<script>
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
if(url.searchParams.get("hideDiv")) {
document.write('<div></div>');
} else {
document.write('<div id="play_button"><a class="btn_openinapp" data-attr="btn_openinapp" href="https://play.google.com/store/apps/details?id=com.monsoonmalabar.app" style="left: 0px;"><i class="fab fa-google-play"></i></a></div>');
}
</script>
Now what happens is during the first visit from twa(which has hideDive=true) the button disappears. But when I continue to surf external site by going to another page in that external site button shows again. Maybe I didn't understand you correctly. Can you please explain a little bit more with codes. I am new to coding. My twa app is https://play.google.com/store/apps/details?id=com.monsoonmalabar.app
Below is the screenshot of external link marked.
The solution is to save the hideDiv information into the sessionStorage, so you can load the information from there when navigating to other pages.
The code would look something like this:
<script>
// Set `hideDiv` to `true` on sessionStorage when we receive the `hideDiv` parameter.
const url = new URL(window.location.href);
if(url.searchParams.get('hideDiv')) {
sessionStorage.setItem('hideDiv', true);
}
// sessionStorage is persisted across page loads, but cleared if the tab is closed and
// a new navigation session starts. We check if it's been set to `true` in this session.
if(sessionStorage.getItem('hideDiv')) {
document.write('<div></div>');
} else {
document.write('<div id="play_button"><a class="btn_openinapp" data-attr="btn_openinapp" href="https://play.google.com/store/apps/details?id=com.monsoonmalabar.app" style="left: 0px;"><i class="fab fa-google-play"></i></a></div>');
}
</script>
This is what I'm doing:
FB.ui({
method: "feed",
link: "https://link-to-site.ninja",
source: "https://url-to-s3-hosted-video.mp4",
caption: "Video caption",
type: "video",
description: "Video desc"
}, function(response){});
(Also tried different combinations, with and without picture, in which case what would end up showing was the picture and not the clickable video)
And I'm getting either no preview whatsoever, or just the preview image if I provide one, not an actual clickable previewable video. What am I doing wrong? How do I can I get this right?
Thanks!
Turns out you need to put the source as link and it will work (as of 05/2016) but you cannot make it link to another place that's not the video itself.
The object debugger picks up the og:image
Sharer.php does not show the og:image (see screenshot)
If I refresh the sharer.php browser window, the image is showed. (see screenshot)
The image exists when I open sharer.php.
The exact same code worked a month ago, I am sure of this.
To scrape your new page before showing the sharer.php popup, just do the following call using javascript on the client side as soon as the page you want to cache exists:
function onResultPageGenerated()
{
var u = "http://example.com/result.php?id=12345";
$.post(
'https://graph.facebook.com',
{
id:u,
scrape: true
},
function(response){
alert("SCRAPED: " + response);
}
);
}
I know nothing about programming so apologies if I get terminologies wrong.
I need to embed a video from vimeo into tinyMCE editor. This is the embed code that Vimeo provides for its videos:
<iframe src="http://player.vimeo.com/video/24676022" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
When I paste that into the editor and click update, nothing happens. Does it just hate it and won't let me do it or is there a simple workaround?
Are you pasting that HTML code into the HTML version of your tinyMCE editor?
You cannot simply copy and paste HTML into the editor's WYSIWYG editor.
Unless you are doing any post-processing of the HTML you are trying to save, the iframe should be saved (and shown in the final version) as well.
The solution is simply to configure TinyMCE to accept the iframe tag as a valid element.
You can learn more here: http://www.frederikvig.com/2010/10/how-to-add-support-for-iframes-and-other-elements-to-tinymce-in-episerver-cms/
you can use htmlspecialchars_decode($data_from_mysql)
it will display the video in your web browser....
well this works perfect for me..
You can use the following jquery code to embedd iframes into your tinymce created pages:
$(document).ready(function() {
var $obj = $('.mce-object-iframe');
var video_url = $obj.attr('data-mce-p-src');
var width = $obj.attr('width');
var height = $obj.attr('height');
$obj.replaceWith('<iframe width="'+width+'" height="'+height+'" src="'+video_url+'" style="border:0px;"></iframe>');
});