I'm trying to make a custom Facebook share function for my website, and I'm using the Facebook sharer URL to open Facebook share in a popup window. However, for some reason it doesn't work.
What I'm doing is simple:
function shareFB(){
var img=$('#fb_img').html();
var text=$('#fb_share').html();
var url=$('#fb_url').html();
var full_url='http://www.facebook.com/sharer.php?s=100&p[title]=MyTitle&p[summary]='+text+'&p[url]='+url+'&&p[images][0]='+img;
window.open(full_url, 'sharer', 'toolbar=0,status=0,width=548,height=325');
}
The weird thing is, it doesn't matter what values I give to img, text and url or even if I use all of them. In the example below, I removed img completely and set text="whatever" and url="http://www.domain.com/stats_leagues.php".
https://www.facebook.com/sharer/sharer.php?s=100&%3Bp[title]=SportFant&%3Bp[summary]=whatever&%3Bp[url]=http%3A%2F%2Fwww.domain.com%2Fstats_leagues.php
Yet it doesn't work - it just opens an empty popup. Why? I've used the same URL format for Facebook shares a dozen times and it always worked. Even copy/pasting the formatted URL above into my browser just opens a blank page.
I don't know from where you got all those parameters, like s=, p[title], etc., probably from some old version of facebook share?
On Facebook share button docs, under FAQ, it says:
Yes, although we recommend using the Share button to offer the simplest and most consistent experience for people using your site, you can invoke the Share Dialog using a link: <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fparse.com" target="_blank">
So just change your code to:
function shareFB() {
var url = $('#fb_url').html(); #encode url if it is not already
var full_url = 'http://www.facebook.com/sharer.php?u='+url;
window.open(full_url, 'sharer', 'toolbar=0,status=0,width=548,height=325');
}
FAQ also states that Facebook will scrape your page for additional info, like title, image, etc. It scrapes your OG meta tags from your page. Debug it here.
Related
I am currently working on http://rightinfo.co.in
When I am trying to share this site on a FB page it is showing an image that I have not included in my site.
I have tried by adding ?v=1 to the url and url shortner services.
In facebook debugger also , the image is not showing. But in actual sharing , unknown image is showing.
Please help me to solve this
Thanks
You have issue with tags Please check this facebook debugger it explains alot Facebook debugger
It's because the og:image (see here) meta tag is set. This tag defines the image, which will be shown on facebook.
To change this image, try to edit this tag, take a look at the theme settings.
Another way is to change/delete the image itself, e.g. via FTP.
You can find it here: WEBROOT/wp-content/themes/Morpheus/img/portfolio/folio01-preview.jpg
Btw, I see you are using wordpress, I'd consider using a SEO plugin, which makes a proper use of the og-tags as explained here
I often work with three variations of a web page, 1) a dev url, 2) a preview/staging url, and 3) and live url.
I would like to create a link (bookmarklet?) that I can then add to my bookmarks bar that will change part of the URL string (basically everything before the page name) and then load the resulting URL in a new tab (or same tab if easier).
Example:
working on a page with the Dev URL:
https://dev.mysite.com/cf#/content/www/page1.html
I would like to be able to click the link and have the page reload and return the following staging URL in the same or new window/tab:
https://preview2.mysite.com/page1.html
and then if I click the link again, I would like the page to reload and return the following live url in the same or new window/tab:
http://www2.mysite.com/page1.html
and then if I click the link again, I would like the page to reload and return the following dev url in the same or new window/tab:
https://dev.mysite.com/cf#/content/www/page1.html
So, I would basically like to avoid a lot of cut/copy and paste when I am changing through these variations of the url while developing, testing, and visiting the live versions of the page.
Here is where I am so far.. Stuck on the most basic aspect of it, if on the dev page, reload to preview page:
A variation of the method by joewiz.org "fixing-urls-with-dns-errors"
and this one from Stack user63503 "how to replace part of the URL with JavaScript?" and after also trying str.replace from W3Schools.
javascript:(function(){window.location.url.replace("dev.mysite.com/cf#/content/www/","preview2.mysite.com/");})();
or
javascript:(function(){window.location.pathname.replace("dev.mysite.com/cf#/content/www/","preview2.mysite.com/");})()
Thats just one of the steps as you can tell and I'm already stuck. I have tried so many variations but I cannot replace a specific part of the url, let alone add the rules to reload to dev, preview, live depending on where the current browser is.
I realize that very similar questions have already been asked, but I'm afraid that I am unable able to extrapolate actionable information from the ones that I have found. However, please let me know if you feel a previous post is relevent and I'll head over there and study-up.
Thank you all so much!!
Your code should work.
But try this
javascript:(function(){var loc=location.href;loc=loc.replace('dev.mysite.com/cf#/content/www/','preview2.mysite.com/'); location.replace(loc)})()
Remember to copy this into the URL of a real bookmark - I normally send people a web page they can drag from so the quotes are indeed important:
ReplaceUrlBM
I am currently working a new feature to allow users to select the thumbnail they would like to use when sharing an page on Facebook. The user should be able to use the Facebook widgets like the send dialog or share buttons as well as simply cutting and pasting the URL into their udpate status dialog on Facebook.
I have read much of the documentation, which seems to indicate that I simply need to add multiple og:image tags in the page being shared. I have done this and run the page through the linter so the cache gets updated.
When passing the page to the share.php directly, effectively removing any of my client side code and letting the dialog present what it is scraping, I am seeing 3 images from the page available.
I am not sure what I am doing wrong here.
Here is the linter result, the graph object, the sharer.php link and the page. Anyone have ideas of what I could be doing incorrectly?
I have confirmed that at least the og:title tag is being respected by the share dialog. I have also tested the size of the images, and included file extensions as suggested below.
I know this works because buzzfeed has the exact functionality I am going for. I have reduced my example down to only the core pieces I think should work. You can find the full source here.
Could it be the XML namespace in the top HTML tag?
In the BuzzFeed article, it's:
xmlns:og="http://opengraphprotocol.org/schema/"
In your page its:
xmlns:og="http://ogp.me/ns#"
On the Buzzfeed article, the content attributes in the og:image links point to named .jpg files, vs your links which do not have a filename/extension at the end.
It may be required to include a filename in the links, especially if it's basing image detection on the file extension.
EG:
Buzzfeed:
<meta property="og:image" content="http://s3-ak.buzzfeed.com/static/campaign_images/webdr02/2013/3/18/11/10-lifechanging-ways-to-make-your-day-more-effici-1-2774-1363621197-4_big.jpg" />
Yours:
<meta property="og:image" content="http://statics.stage3.cheezdev.com/mediumSquare/3845/4AC356E3/1"/>
After some tests, I guess it's a caching issue.
Looks like the sharer is caching the graph, using the og:url as a key, so that different querystrings in the sharer won't bypass the cache, if they do not impact the og:url value.
Obviously, the debug tool don't use such cache.
If I'm right (this is just an insight), you can either wait that the cache entry expires or try with a different og:url. Moreover, to ease the test, keep the new og:url equal to the new page location.
So funny story, I'm a developer at BuzzFeed and came across this while trying to figure out why our share dialogs suddenly stopped showing the thumbnail picker.
It looks like Facebook disabled the functionality. It briefly made a reappearance on 1/14/2014 but they introduced a bug that prevented sharing from any pages with multiple og:image tags defined. (See: https://developers.facebook.com/bugs/1393578360896606/)
They fixed the bug, but as of 1/22/2014 it still looks like the thumbnail picker is disabled.
The Sharer.php script on the Facebook site doesn't support all the OG tags as far as I know. The images are scraped from the page content itself, so if you want your three images to appear on the Sharer.php script, include them in your content.
Sharer.php has been officially deprecated by Facebook, so I wouldn't be surprised if certain functionality does not work with it. While it still works, it was always the simplest option and I'm guessing they never built the link image scraping from the og items into it.
I was able to find this article, which shows one way that you can specify exactly what images are available to the sharer.php share page. You can specify one (or multiple) images to share with a URL structure like the following:
http://www.facebook.com/sharer.php?s=100
&p[url]=http://bit.ly/myelection
&p[images][0]=http://election.gv.my/assets/vote.png
&p[title]=My customized title
&p[summary]=My customized summary
I would like to create a set of buttons that will share to various social media websites (Twitter, Facebook, Tumblr etc).
I am currently working on the Twitter sharer, I've been looking around and can't find any custom code that will take the current URL and append this to the web address without forcing me to use the Twitter share icon rather than my own custom icon.
Here's the site I am working on (links down the right hand side): http://www2.hull.ac.uk/files/tfa/index/content2.html
Here's my current code:
<a href="javascript:popup_share('http://twitter.com/share?text=Check%20out%20this%20page#tfa&url=')" class="twitter-share-button">
Twitter
<b></b>
</a>
<script>
var pageName = window.location.toString();
alert('http://twitter.com/share?text=Check%20out%20this%20page#tfa&url=' + pageName);
</script>
I can't work out how to add the string in the alert box to the already present a tag!
The URL needs to be created dynamically though as I want it to be site wide and will not know the URLs every time - This is the URL to be shared to whichever platform. I have already looked on the Twitter website but can't find anything that will do this without me having to know the website address.
Can anyone offer any help for this?
Many thanks!
The link should just be
Twitter
The JavaScript should add the click event
$( function(){
$(".twitter-share-button").click( function(e){
popup_share('http://twitter.com/share?text=Check%20out%20this%20page#tfa&url=' + encodeURIComponent(window.location.href) );
e.preventDefault();
});
});
How do I make the followings code load the first thing in my website ? as matter of fact I want the href to load the first thing.
<link rel="image_src" href="" id="ShareImageID"/>
<script>
var ShareImageIdVar = location.href.match(/\d+/);
document.getElementById('ShareImageID').href = "http://www.mysite.com/Images/"+ ShareImageIdVar +".jpg";
</script>
what I am trying to do is, when some one share this page on facebook I want facebook to load this picture as thumbnail. So i want this herf to be filled out as soon the page loads out.
what I am trying to do is, when some one share this page on facebook I want facebook to load this picture as thumbnail.
I don't think this request makes sense. Loading order will not influence what Facebook offers as a preview icon for a page. Images inserted by JavaScript will likely not be visible to Facebook at all.
If you want to make Facebook choose a specific preview icon, use the Open Graph Protocol, namely
og:image - An image URL which should represent your object within the graph.
an example from the OGP web site:
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
The Open Graph protocol and Facebook Object Debugger have some information.
Does this have to be done in JavaScript? If you can use PHP, you can get the image ID from the query string and insert the dynamic link element before Facebook parses the document.
This works for me:
<?php
echo "<link rel=\"image_src\" href=\"" . $_GET['id'] . ".png\"/>";
?>
You would use a URL like:
http://mysite.com/index.php?id=12345
I'm not saying it's impossible in JavaScript, but I tried and Facebook didn't see the inserted image.
You can test using the Facebook debugger. Specifically, take a look at See exactly what our scraper sees for your URL and you'll see that it doesn't incorporate the JavaScript insertion.