Facebook share button - javascript

I want to add Facebook share button to my site. But when I use the code given by Facebook, it doesn't show any FB logo image in button style & also doesn't count any share. Please help me figure out a better code.
Currently, I'm using:
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fparse.com" target="_blank">
Share on Facebook
</a>

The easiest way to add Facebook share button would be to visit http://www.facebook.com/share_partners.php and copy the code and paste it in your webpage after replacing the text "url" with the actual URL of the page you want to share. If it is dynamic content, you can use the variable or object name.
<script>
function fbs_click(){
u=location.href;t=document.title;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>
<img src= "http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981" alt="" />

Take a look at the official documentation: Facebook For Developers: Share Button.
If you merely click the "Get Code" option on the Facebook Share Button Configurator & Generator, you'll see that the URL generated is rather simple:
https://www.facebook.com/sharer/sharer.php?u={yourURLhere}
At least it seems that way to me:

Related

How to display a link on my page

I want to display google link like that in my page.
whenever we post a link on a Facebook page its look like as the above picture. how to do the same in my webpage .how to display the google link like that
That looks like a link shared on Facebook. The styling of a link like that doesn't happen automatically. You'll have to use html and css to format a link to look like that yourself.
Here's an example using pseudo html. You'd need to actually style this yourself to achieve the desired result. If you don't know how, some websites to start learning html / css are codecademy.com & w3schools.com
<a href="link_url">
<img src="google_logo_url" />
<div>
<h3>Google</h3>
<p>Search the world's information....</p>
</div>
</a>
Embed.ly can be useful for you. It takes a URL and generates a piece of code, which you can paste in your HTML document to get similar look to that of your picture. Below is an example of its code in usage
From this link you can access it for free: http://embed.ly/code

whatsapp sharing button- share url is incorrect

I am adding share button in my website, and my share URL has some parameters. However, on phone extra parameters in the URL are ignored.
my button :
<a class='whatsapp-icon' href='whatsapp://send?text=https://www.exmaple.com/#/lat=10.11,long=20.11'></a>
When I open this link in webpage link it open fine with all parameters, but on the phone link comes as just www.exmaple.com and parameter '#/lat=10.11,long=20.11' is ignored in share window.
This is angular 1.xx webpage where share button is present.
LATEST WAY TO DO THIS
<a *ngIf="isWhatsAppIconVisible" href="https://api.whatsapp.com/send?text=check out this link : {{shareableUrl}}" data-action="share/whatsapp/share">
<img src="assets/whatsapp.png" alt="whatsapp" />
</a>
You need to sanitize anchor href. Here you can find a solution for your problem:
Whatsapp Sharing in AngularJS
Keep rocking!

Use google plusone button (not share button) in a newsletter

Good morning folks.
I try to implement the Google "+1" button into a newsletter (they are also as static web version available) but I can't use javascript here.
Is there any way to do this without javascript? It's also possible to share a page via a static url from google:
https://plus.google.com/share?url=your-page-url
Thanks in advance
I think you answered your own question by adding that link.
You'll have to create a "+1" image and embed it in your newsletter (remember to host the image on your servers and link it from there). Example:
<a href="https://plus.google.com/share?url=your-page-url">
<img src="http://www.yoursite.com/images/plusone.jpg" />
</a>
where your-page-url is your page url (http://www.yourpace.com)
No. The JavaScript button is the only supported method of +1'ing a URL. You can add a feature request.

Facebook sharer.php working unexpeted or not properly

I am using facebook sharer.php for share posts with images. But when i click on share button facebook sharer.php dialog showing with image and text that i have set. see image below:
After i click on share button. Post will be show on my facebook timeline. But there is no image with post. I think it is bug. below is my code
<a href="http://www.facebook.com/sharer.php?s= 100&p[title]=Title here&p[url]=http://example.com&p[images]
[0]=http://www.ucmas.com/wp-content/uploads/2013/07/rm.jpg&p[summary]=I love cheese" target="_blank">Share post</a>
You can test thing in this post fiddle also.
Facebook Sharer not showing image thumbnail
Any help?
Thanks a lot.
Have you tried running your site through the Facebook debugger? Not only will it show you what's wrong in 99% of cases, but it will also, every single time, clear facebook's cache of your page. Go here:
enter link description here
Enter your url, and see if there are any errors. My guess is that Facebook cached the fact that it couldn't find any image of yours, so simply doing that is likely to solve your problem. If not, your image is probably not publicly accessible.
Use faceboot meta tags.
`<meta property="og:image" content="http://davidwalsh.name/wp-content/themes/klass/img/facebooklogo.png"/>`
`<meta property="og:title" content="Facebook Open Graph META Tags"/>`
REF:
http://davidwalsh.name/facebook-meta-tags

Google+ Follow Button

I'm adding social media button to a website to follow / like a specific page and looking through Google's documentation on adding a follow button to your website, all I can see is their pre-made buttons:
https://developers.google.com/+/web/follow/
What I want to do is have a little image of their logo and when this image is clicked, open up a box in a popup or new window to follow a Google+ page. Is there any URL I can put as a href around the image or some JavaScript to use instead of having to use the button that Google's JavaScript generates as it is a total pain to style.
Many thanks.
See The Demo Here
<a href="https://plusone.google.com/" onclick="popUp=window.open('https://plus.google.com/share?url=YOUR WEBSITE URL', 'popupwindow', 'scrollbars=yes,width=800,height=400');popUp.focus();return false">
<img src="http://placehold.it/50x50/" alt="Google+" title="Google+"/>
</a>

Categories

Resources