I currently developing this website "http://mica.com.my/cmstest/main/event.php".
I have few different content to be ready to post to facebook if user clicked the "Share" button. But when user click the share button it share the whole page which i don't wish to do that, how can i only share on the particular post's content to facebook but not the whole website page?
I had try to implement facebook api in it, but it still alway share the whole page instead of only the particular content to faccebook.
Please guide me through this. Thanks
you need to add meta description to the header.
<meta name="og:description" content="this will be the description shared on facebook">
you can also use other meta data like image , url and title. you can see all the otions in the docs
Related
Similar to this medium article where a custom og:image, og:title, and og:description are displayed for different articles, when the facebook share button is clicked a popup opens to let the user type a message and below is the image/title/description grabbed from meta tags (og:image, og:title, etc)
When the user clicks on the facebook share button I then dynamically change the meta tags to customized images/descriptions using javascript like so
document.head.querySelector("[property='og:image']").setAttribute("content", image_url)
the problem is that the image isn't appearing at all when the fb share button is clicked - when I enter the url into Sharing debugger it works, but on the actual website it doesn't
Not certain what your aim is but you won't be able to set the og:image using Javascript because facebook is getting the image url etc. from the HTML returned by the url when its own server requests that url. It's not getting that data from the client.
What is the correct links for sharing content on user's social media pages/profile? Something similar to the web page sharing links:
https://facebook.com/sharer/sharer.php?u=xxxx
https://twitter.com/home?status=xxx
I know that instead of "xxxx" you have to put your page url which you want to be shared. Exemple when I press the share button (facebook): 08rnz.png . I need links for more social media's sharing and via e-mail too.
So if I put https://facebook.com/sharer/sharer.php?u=site.com/site/index.html it doesn't work. It's any scripts for those sharing buttons? What exactly I have to do? I want for: facebook, twiiter, google plus, e-mail, whatsapp.
Thank you!
This service could be helpful:
sharelinkgenerator.com
But your problem is most probably with localhost. It is not an internet address, just your local server.
Update:
For sharing by email:
Share
For Whatsapp:
Share on Whatsapp
You might want to look into: addthis.com, you can use this website to generate share buttons for your website.
It creates a script, that you have to add to your webpage.
You have probably seen the buttons before, since they are used a lot.
What you need to do:
get a (free) account on their website
you can design your share buttons in your addthis account
generate and copy the javascript (script tags) to the bottom of your page, just before the closing body element
It seems that social buttons (Facebook,Google,Twitter) usually are put in an iframe. It seems I can isolate the social button by following the iframe source URL, for example a tweet button:
Follow this URL to see the tweet button
My question is: How do I put this button on my page? The reason I want it out of the Iframe is because I would like to click on it programmatically eg Jquery/javascript.
This is not possible by design, and besides that against the TOS of these services. You cannot post on an arbitrary user's facebook or twitter without their approval.
It used to be done this way:
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<a type="button_count" share_url="http://google.pl" name="fb_share">Share this page on Your's wall</a>
And it used to generate a share button with text "Share this page on Your's wall" instead normal "Share". Since last update it doesnt work anymore.
Is there any posibillity to change the text on share button?
With Facebook JS SDK:
You now have to use the Feed Dialog, which is part of the Facebook JavaScript SDK.
Without Facebook JS SDK:
If you don't want to be bothered with their SDK, you can use this simple link instead:
Share this page on your wall
Here's what it'll look like if you're sharing Google.com with this link:
https://www.facebook.com/dialog/feed?app_id=140586622674265&link=http%3A%2F%2Fgoogle.com&name=Google&redirect_uri=http%3A%2F%2Fs7.addthis.com%2Fstatic%2Fpostshare%2Fc00.html
Also, please acknowledge these three things:
You need to replace [[URL]] and [[TITLE]] with a link to the page you want to share and its title (both url-encoded).
The Feed Dialog has to show from which Facebook app the post comes from. The app_id parameter in the URL above is the one from AddThis. Create a Facebook app and put its own id in the URL to use the name you want instead of "AddThis Sharing". You can keep the app_id from AddThis though, it works just fine.
The last parameter (redirect_uri) is the page where the user will be redirected after sharing. It's currently a page from AddThis with some JavaScript that will close the tab / window. That way, the dialog just disappears when it's not needed anymore. You don't have to change it either, works great.
I am not able add the thumbnail in the facebook update, using javascrit. But I dont know how to add the snap or add thumbnil, the facebook bot is not picking any pic fro the app, its a ruby on rails app actually.
I am using simple technique I have not created any app or no api key and such things.
I how do I get the thumbnils ?
Kindly help me
I'm not quite sure if I understand the question... You have a Rails app and a "Like" button and when you press the like button there is no thumbnail of the web page in your facebook status?
If that's the case you shoud take a look to the Open Graph Protocol: http://developers.facebook.com/docs/opengraph/
You must use some tags in your page to provide Facebook with information about your website and one of the tags is for the image:
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>