Sharing image on social media using HTML - php

I was trying to share an image on social media. I found a solution here:
Default website image for social sharing
They say it works in this link but in my case when the window opens it diplays
Warning href should represent a valid URL
I used the same code. Here it is:
<li class="social__item">
<div id="mImageBox">
<button id="my_image" alt='' src='../../admin/views/images/<?php echo $result['image']; ?>' class="social__link" onclick="fbs_click(this)"><i class="fa fa-facebook"></i></button>
</div>
<script>
function fbs_click(TheImg) {
u=TheImg.src;
t=TheImg.getAttribute('alt');
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
</li>
I was expecting it will open the sharing window with the image and share button but the result was "href should represent a valid URL" with okay button.
How can I fix this or is there any other method of sharing an image on social media when clicking on a button?

Change u=TheImg.src; to u=TheImg.getAttribute('src');
Also note that to define variable as var u
If you sharing your pic to FB then write full url using http://

Related

How to Hide Zoom links in Address bar of any Browser

I have a project were client wants to hide Shared link to their student because client thinking that student sharing their links of zoom meeting with another students of another organization.(so the client doesn't wants to share links due to client is teaching a Paid Course).
So I'm Thinking that what if we open link window as popup window.
but the problem is target=_blank and opening new window not popup windows.
how to solve this thing?
I'm using following code of php
echo "<td><a href=" . $row['r_link'] ." target=_blank>". $row['r_topic'] ."</td>";
I had Solved this Problem using iframe. iframe hides the address from the normal user (not saying from a hacker).
I added all link details in html form with input type "hidden" and posted/set target on the next page. Where php fetches parameters of link and put in iframe src tag. Code as Fallows.
in HTML
<input type=hidden name=r_id value=$id>
in next page PHP and HTML
$r_link = mysqli_real_escape_string($con,$_POST['r_id']);
<iframe src="<?php echo $r_link ?>"></iframe>
Thank You,
in this way I have solved my issue of hiding the meeting link.

How to show image browse button in tinymce4 and upload image by php?

my tinymce(ver 4.1) "insert/edit image" dialog doesn't have a image browse button, but I want to add the button just look like tinymce official demo shows), can anyone help me?by the way,how can i use PHP to upload image when I click the image button?I need your help~
I am new here,and i am sorry i didn't have enough reputation to post images.
I got it!
I need define a javascript function, called "file_browser_callback",and "file_browser_callback" attribute to the function,for example:
function myCustomFileBrowser(field_name, url, type, win) {
// Do custom browser logic
win.document.forms[0].elements[field_name].value = 'my browser value';
}
tinyMCE.init({
...
file_browser_callback : myCustomFileBrowser
});
See also: http://www.tinymce.com/wiki.php/Configuration3x:file_browser_callback

How can I share my news in facebook without using an URL

I'm trying to incorporate into my project a button that allows people sharing an article on facebook.
I want that in facebook share window appears the title and the image of news that users click to share.
But Im not having sucess doing this, because in this project, I show the summary of each news, and each news have a link "Read full article" and a link to "Share".
The problem is, when I click in "Read full article", my full article opens in a fancybox without any url...so this is my difficulty, how can I share my news in facebook without a url?
I'm really having difficulties to understand how each news can be share on Facebook, because of my news dont have an url.
Do you see some way in order to achieve my goal?
This is my php:
//while exist news records in database
while ($result = $readNews->fetch(PDO::FETCH_ASSOC)){
echo '<article class="news">';
echo '<img class="img" src="'.BASE.'/uploads/news/'.$result['thumb'].'"/> ';
echo '<h2>'.$result['title'].'<br /></h2>';
echo '<span>'$result['date']).'</strong></span>';
echo '<p>'.$result['content].'
<a id="'.$result['id_news'].'"
class="fancybox" href="#window_fancybox'.$result['id_news'].'">
See full article </a>
</p>';
//my share link
echo '<a title="share" class="share" href="'.BASE.'">Share</a>';
//When I click in "See full article"
// it will open a fancybox with full article
echo '<div id="window_fancybox'.$result['id_news'].'" class="modal">';
echo '<h2>'.$resultt['title'].'</h2>';
echo '<span>'.$result['date'].'</span><br />';
echo '<img class="img" src="'.BASE.'/uploads/news/'.$result['thumb'].'"/>';
echo '<p>'.$result['content'].'</p>';
echo '<span class="close_fancy">Close modal</span>';
echo '</div>';
echo '</article>';
}
This is my script to share on facebook:
$('.share').click(function(){
urlshare = $(this).attr('href');
alert(urlshare);
window.open('http://www.facebook.com/sharer.php?u=' +urlshare,'My website',"width=500,height=400,status=yes,toolbar=no,menubar=no,location=no");
return false;
})
You can see my example here: (my fancybox share window is opening all white)
http://ei-test.netau.net/#fancybox_window1
Didn't test it myself, but this is how I understand it:
when hovering (and maybe also when clicking) See full article an url ending with #window_fancybox_SOMETHING_ should apear.
This is the url you need to provide to facebook.
Try this, I know this is bad patch but it works :)
$(document).ready(function() {
var popupURL = location.href.split("#");
if(popupURL.length > 1) {
var action = popupURL[popupURL.length-1];
$('a.fancybox[href="#'+action+'"]').trigger("click");
}
});
Something i want to know, Do you use netau host or something like that ? These domains and its subdomain are secured by facebook. And when you use it within https://www.facebook.com/sharer/sharer.php?u=, It gives blank page. I write these lines to aware you if you did know.
And, There is no a big problem in what you want, If you are using a valid url and not secured from facebook. You will not get that blank page. But the problematic point in your idea is that facebook get the title, description and the image"thumbnail of news" from html of your page, So when everyone click share button get the same title, description and the thumbnails. So to handle that i suggest to make a small script behind the scene in individual page to handle that. If that makes sense tell me, And i will be happy to help.
go to facebook developers page and create an app and add this in the body of you page
<div id="fb-root">
</div>
<script> (function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=YOUR_APP_ID&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
replace YOUR_APP_ID with the appid you get from facebook
And add this where you want the share button..
<div class="fb-like" data-layout="standard" data-action="like" data-show-faces="false"
data-share="true" width="100px">
Add a meta tag for the share image to be used by facebook
<meta property="og:image" content="http://www.example.com/images/logo.png" />
Your hosting doesn't seem to support sharing on Facebook. The shortcode link to share any link on Facebook is :
http://www.facebook.com/sharer.php?u= &t=
where, u is the url and t is the title of the page.
Now, when I try to share your article on Facebook with the following link:
https://www.facebook.com/sharer/sharer.php?u=http://ei-test.netau.net/&t=United%20FC%20win%20the%20game
nothing really shows up. But, if you try another link, such as:
https://www.facebook.com/sharer/sharer.php?u=http://www.infismash.com/hover-social-buttons-wordpress/&t=United%20FC%20win%20the%20game
it clearly shows the sharing option on Facebook.
Basically, I think that your problem will be solved if you try another host. Also, keep in mind that many Facebook doesn't support many free hosting sites.
Since you want to share individual modal windows, what you could do is try to give each modal window an identifier like #identifier-1.fancybox-overlay .fancybox-overlay-fixed. Have a look at identifier-1. This 1 would be the id for each post. So, when anyone clicks on your link like http://ei-test.netau.net/#identifier-1, a window would open with the modal in an active state.
Facebook sharer.php has been deprecated, you'll need to use their 'Share Dialog', which does require setting up an APP ID on facebook for your domain.
https://www.facebook.com/dialog/share?
app_id=145634995501895
&display=popup
&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer
However this method does pull in meta data from the URL you've provided, you can use their javascript API to give your share's a unique title, description and url.
Reference:
https://developers.facebook.com/docs/sharing/reference/share-dialog#redirect
https://developers.facebook.com/docs/javascript/quickstart/v2.1

Refreshing Image with JQuery or Javascript

I'm trying to get a dynamic image file to refresh every 20 seconds or so, preferably with JQuery/JS but I am open to any suggestions.
The image is a Twitch.tv .php file that dynamically changes from ONLINE to OFFLINE depending on if the streamer is currently broadcasting or not. The problem is that the images don't update sometimes without a slew of browser refreshes, and sometimes they won't update at all until I clear the cache.
The website I'm trying to do this on is http://www.team-omen.com/content.php
You will see in the center a module called OmenTV which has several of these images and I would like to have these automatically update so users don't have to refresh the page to see if the streamer has started broadcasting or not.
This is from the status.php file which determines which .png to display...
<?php
header('content-type: image/png');
$stream = $_GET['stream'];
$json_file = #file_get_contents("http://api.justin.tv/api/stream/list.json?channel={$stream}", 0, null, null);
$json_array = json_decode($json_file, true);
if ($json_array[0]['name'] == "live_user_{$stream}") {
echo file_get_contents("online.png");
}else{
echo file_get_contents("offline.png");
}
?>
And here is the section of the HTML file that displays the images
<div align="center" id="streamers">
<div id="omentoggle" class="streamer">
Team Omen
<br />
<img src="http://www.team-omen.com/status/streamstatus.php?stream=teamomen" class="status" id="status_teamomen" />
</div>
<div id="briantitantoggle" class="streamer">
BrianTitan
<br />
<img src="http://www.team-omen.com/status/streamstatus.php?stream=o_briantitan" class="status" id="status_briantitan"/>
</div>
</div>
...and so on
Can someone give me an example of how to get this to work, say the image in question has an ID of #status_teamomen ?
Thanks in advance
You can use setInterval function in JavaScript to update the image source periodically:
setInterval(function() {
var cache_buster = Math.random();
document.getElementById("status_teamomen").src = "http://www.team-omen.com/status/streamstatus.php?stream=teamomen&cache_buster=" + cache_buster;
}, 20000);
Note the use of a cache buster querystring parameter to generate a unique URL on each request, which will bypass any browser caching of the dynamically generated images.
For the cache problem you could add a random piece in the url so the url is different each time and the image wont get cached by the browser.
See the answer here:
Multiple GD images per page

facebook sharing using php

i have one page on that page having multiple images.On each image have their own share and like button.when i click on share button i want to share that perticular image but that is not happening please help me.
here is my code..
<script type="text/javascript">
var str;
function fbs_click(u,val)
{
var i;
var imgobj=document.getElementById(val).getElementsByTagName('img');
for(i=0;i<imgobj.length;i++){
str=imgobj[i].src;
//document.write("<br>");
}
alert(str);
//This is to show fb popup for sharing passed pageurl
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
<!--This is for setting img for fb like -->
<script type="text/javascript">document.write('<link rel="image_src" type="image/jpeg" href="'+str+'">');</script>
$url="http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
<div class='sharebutton'>
<a href='#' onclick='return fbs_click(\"$url\",\"$src_value\");' class='fb_share_link'>Share on Facebook</a>
</div>
i have paste the code is short just understand you my problem
The problem is, you're only sending the page url. Facebook indexes its like counts based on the url.
Since Facebook has no idea which image on the page the user is intending to share, it grabs your default meta tags for the page and that's what shows up on the user's timeline. Since the urls for each photo are the same, sharing any one photo will result in the counter being incremented for all photos.
One way to make this work would be to create a separate page for each image on your site and pass that in your onclick function. That page has specific metadata for that image the Facebook parser can use. When a user follows that link, have a script on that page to redirect them back to your main page (preferably to an anchor at the right photo). You'll need to have some way to fail gracefully for people who don't have javascript enabled.

Categories