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
Related
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://
I am trying to share my page on Google Plus.. but the problem is that google plus is using my website logo to display as my post image on google Plus screen. I want it to display my posts image not the website logo.. how can i do that.. i am using following code to share the link
/+1/confirm?hl=ru&url=">https://plusone.google.com//+1/confirm?hl=ru&url=
Is there any way by which i can also set my iimage url which will display as my post image on Google Plus.
Some thing like this /+1/confirm?hl=ru&url=URL&img=ImageUrl">https://plusone.google.com//+1/confirm?hl=ru&url=URL&img=ImageUrl
i have also tried this but no success, may be i am trying wrong url. If somebody knows please share the URL here.
Thanks.
I have hit the same snag also. You cannot use a +1 with your own functions or callers. You need to use the google code to make that happen.
What you can do however is use a javascript share window to pass your own parameters.
This is what I use.
function shareToGooglePlus(destination,title,description,imageurl)
{
var go = "https://plus.google.com/share?";
var url = "url="+encodeURIComponent(destination);
var title = "title="+encodeURIComponent(title);
var description = "content="+encodeURIComponent(description);
var images = "image="+encodeURIComponent(imageurl);
this.openWindow(go+url+"&"+title+"&"+description+"&"+images)
}
The resulting url is a new window opened with the url:
https://plus.google.com/share?url=http%3A%2F%2Fwww.ortho.nl%2Forthomoleculair-blog%2Fnieuws%2F2014%2Fvitamine-c-en-chemo%2F&title=Vitamine%20C%20en%20chemotherapie&content=Vitamine%20C%20en%20chemotherapie%0A%0AHet%20ondergaan%20van%20een%20behandeling%20met%20chemotherapie%20is%20%C3%A9%C3%A9n%20van%20de%20zwaarste%20beproevingen%20die%20iemand%20met%20kanker%20vaak%20moet%20d&image=https%3A%2F%2Fwww.ortho.nl%2Fcss%2Fafbeeldingen%2Fwebsite%2Ftwitter_photo.jpg
if you wish to use google's +1 button I suggest using microformats in your website
https://support.google.com/webmasters/answer/146897?hl=en
try to use og:image meta-property:
<meta property="og:image" content="http://mylink.com/myimg.png">
see, it works on my webpage
<a href="http://www.linkedin.com/shareArticle?url=MY_URL" class="in-share-button" target="_blank">
<img src="my_img" alt="linkedin share button" title="Share on Linked In" /> </a>
This is currently my share button. I want it to share the url that's currently in the address bar, and not a fixed preset url like it does atm.
I found
<?php $url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; echo $url; ?>
what seems to fit my needs. But when I change "MY_URL" with this it just creates a link to the main page of my website.
The URL it SHOULD display looks like "www.myurl.de/#/id_of_a_post".
I feel like the # is the problem. . .
can you provide me any help with this?
You cannot read the hash portion of the URL in your server side code. The part that follows # is never sent to the server by the browser. So if you're trying to tackle this issue with PHP, you won't get the behavior that you're are expecting.
It looks like you're relying on static links to perform the sharing. I can only answer for Google+, but with Google+ you have two options:
Use the Google+ widget rather than a static link and do not specify the HREF parameter:
<div class="g-plusone" data-annotation="none"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
When the href is not specified and you do not specify a canonical URL, the widget falls back to default to the URL value that comes from document.location.href, which will be your visitor's current page, including the hash portion of the URL.
Use JavaScript to rewrite the URLs in your links to append your current hash location, for example, lets assume that you placed all your social links into a div with class "sharing" and then you need to modify all the hrefs within that div using jQuery:
var hash = document.location.hash;
// Loop through each link in the sharing div
$('.sharing a').each(function(){
// Append the hash to the end of each already populated URL
$(this).attr('href', $(this).attr('href') + encodeURIComponent('#' + hash));
});
It just worked another way.
My friend created a script that saves the ID of the individual posts:
(function(){
var numbers = document.URL.match(/\d+/g);
if(numbers != null){
$('#right-col').addClass('shown').removeClass('hidden');
$('#left-col').addClass('colPositioning');
$('#right_'+numbers).addClass('shown1');
;}
}());
Afterwards I was able to use:
<img src="img_src">
The trick about it was to replace the # with the "%23". I think it's called encodedURI.
What do you guys think about this solution?
The share might not work exactly the way you think it will. You're using the anchor part of your URL to link to a specific place on your page, and probably using some javascript to then process that and load new or different information, or display/hide other parts of the page, depending on the value of that anchor.
While this works for people who visit your website, it won't work for bots that visit your website (such as the bots used by Facebook and Google+, although I don't know if Linkedin does this as well) which try to get a snippet of information to show as a preview. So while the link itself might work, the preview shown on the website will almost certainly not reflect the contents of the anchored URL.
I've been trying to wrap my head around this for hours but I cannot figure it out. Usually I can find my answer by searching StackOverFlow but this time I'm truly stumped.
The "Login with Facebook" button works perfectly fine when logged in as a FB User. But when logged in as a FB Page, it gives the "switch back to xxxxx user to use this plugin", which is perfectly normal. However the blank/white part of this message breaks out of the div and covers up the other contents of my page!
The code is as follows:
<div id="LoginButton" style="margin-top:20px;width:130px;margin-left:auto;margin-right:auto;">
<?
if(!$fbuser) //Only show login button if user is not Logged In to FB
{
echo '<div class="fb-login-button" onlogin="javascript:CallAfterLogin();" size="small" scope="email">Login w/ Facebook</div><div class="clear"></div>';
}
else
{
//process user as a FB user
}
?>
</div>
I've tried:
clearing the div, which doesn't seem to matter
testing with just plain text inside fb-login-button, which parent div
LoginButton seems to contain fine
replacing fb-login-button code with rendered code from Facebook JS
API, but then the button is not clickable anymore
You can see the problem present if you surf the website http://www.dealshongkong.com as a FB page (you can see it happen on the left hand side of the page).
I've attached a pic here of what I see when logged in as FB Page (the problem):
http://www.dealshongkong.com/temp/stackoverflowproblem.jpg
I experienced the very same problem. I found no other way arround than to use a custom Facebook Login Button. I just built a PNG file and added some Facebook JavaScript API call.
<div id="FaceBookLoginButton" onclick="FB.login(function(response) { },
{scope: \'email\'});"
style="background-image:url(/buttons/my_own_facebook_login_button.png);"
/>
<span>Log in</span>
</div>
It works fine for the login button. But in case you want to use other social plug-ins (Like-Button, Like-Box, Send-Button, ...) you will experience the same problem again.
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.