Facebook share and custom text with image - javascript

I am using facebook sdk
<script src='http://connect.facebook.net/en_US/all.js'></script>
and using method
FB.ui({
method: "send",
link: 'http://test.com/'
});
Is there is any option to send text and image
I also used
FB.ui({
method: "send",
link: 'http://test.com/',
description: 'custom text hello this is my content',
picture: 'hello.jpg'
});
but this is not working there is FB.ui method pickup automatically text and image from link but I need to send custom please help if is there

The send method/dialog does not accept a 'picture' parameter.
Facebook Javascript SDK Documentation

The send dialog only allows you to add a link, the Open Graph data of that link will be used. There is no way to use custom data for the link.
Send Dialog parameters:
https://developers.facebook.com/docs/sharing/reference/send-dialog
Open Graph tags:
https://developers.facebook.com/docs/sharing/best-practices#tags
http://ogp.me/
Keep in mind that users should know what they can expect behind the link, so it´s a bad idea to use custom data instead of existing Open Graph data directly from the link.

<a title="send to Facebook"
href="http://www.facebook.com/sharer.php?s=100&p[title]=YOUR_TITLE&p[summary]=YOUR_SUMMARY&p[url]=YOUR_URL&p[images][0]=YOUR_IMAGE_TO_SHARE_OBJECT"
target="_blank">
<span>
<img width="14" height="14" src="'icons/fb.gif" alt="Facebook" /> Facebook
</span>
</a>

Related

facebook share with customization...almost working, how do I {{ request.build_absolute_uri }}(->this shows url I'm in) with javascript?

I'm trying to customize facebook share. I'm using this fantastic app;https://github.com/kni-labs/rrssb to do this. I tried meta tags facebook provide, and it's not working for me. but with java-script, it kinda works.
<ul class="rrssb-buttons clearfix">
<li class="rrssb-facebook">
facebook-share
</li>
</ul>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('.rrssb-buttons').rrssb({
// required:
title: 'email',
url: 'http://www.reddit.com/',
});
});
</script>
this shows the picture of reddit, description of reddit, etc..
so I thought I should put the domain user is trying to share in url instead of reddit url. I googled around, and I saw how some people post images and description in url...so my question is how do I put the url user is trying to share in the url? how do I put image there?
You can use window.location.href as URL to use current page's URL. To specify image you just need to add image key when initializing rrssb. As if you see source code of rrssb.js you will see what parameters it supports when initializing. Which are
// Settings that $.rrssb() will accept.
var settings = $.extend({
description: undefined,
emailAddress: undefined,
emailBody: undefined,
emailSubject: undefined,
image: undefined,
title: undefined,
url: undefined
}, options );
So your code will change to
jQuery(document).ready(function ($) {
$('.rrssb-buttons').rrssb({
title: 'email',
url: window.location.href,
image: your_image_url
});
});
Edit (Only URL is being used not image):
I don't think that you can use image for facebook or twitter. As if you see source code of rrssb.js you will see that only URL is shared to facebook. URL and description are shared to twitter. So some of the settings are shared to some of the social sites.
Also in the readme.md of the rrssb.js if you see facebook sharing example
<li class="rrssb-facebook">
<!-- Replace with your URL. For best results, make sure you page has the proper FB Open Graph tags in header: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/ -->
<a href="https://www.facebook.com/sharer/sharer.php?u=http://kurtnoble.com/labs/rrssb/index.html" class="popup">
<span class="rrssb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29"><path d="M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z"/></svg></span>
<span class="rrssb-text">facebook</span>
</a>
</li>
in the comment you can see stated that
For best results, make sure you page has the proper FB Open Graph tags
in header
Which means, facebook will pick image information from FB Open Graph meta tags of the header section of the page.

how to pass custom parameter in facebook sharer link

Code 1:
<a id="button" rel="nofollow" href="http://www.facebook.com/share.php?" onclick="return fbs_click()" target="_blank">
<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;
}
Here Title "t" is not working but i want to display custom title, summary, url and image so, I tried something like this
Code 2:
<a id="button" href="http://www.facebook.com/sharer.php?
s=100
&p[url]=<?php echo $pressurl;?>
&p[images][0]=http://myurl/images/linkedin_image.png
&p[title]=mytitle
&p[summary]=containsummary ">
In both the cases nothing happened it automatically get some content (title,image,summary) from the above mentioned url and I want to display custom title,image and summary in facebook share page and i dono how to use og meta tag and what s=100 it means?..
Instead of using the sharer.php script on Facebook, you can use the Facebook JavaScript SDK to make a custom share dialog.
<!-- include Facebook JavaScript SDK -->
<!-- share link -->
Share to Facebook
<script type="text/javascript">
function fb_share() {
// facebook share dialog
FB.ui( {
method: 'feed',
name: "Your Page Title",
link: "https://www.webniraj.com/link-to-page/",
picture: "https://stackexchange.com/users/flair/557969.png",
caption: "Some description here"
}, function( response ) {
// do nothing
} );
}
// add click event to link using jQuery
$(document).ready(function(){
$('.share-btn').on( 'click', fb_share );
});
</script>
This will create a nice popup for sharing to Facebook, and you can easily change the title, description, and picture attributes in the JavaScript. Working demo available here.

How can I use document.getElementById(someid).onclick for tag a

I want to automate to click on some link in a website.
since links on webpage are not direct link such as www.example.com/1.html.
it shows following link address for all the links I am interested in clicking
javascript:void(1)
following is the html code for that link I want to click
<a href="javascript:void(1)" onclick="server_playOn(17,2, 'est', this);">
Life OK
</a>
Once you've got a reference to the link you can just use the click method:
referenceToLink.click();

Share Dynamic Data on Facebook and Twitter

Is there some way to share some dynamic data from my page on facebook and twitter ?
I tried this code with static data and it worked, but I apply it dynamically it doesn't.
For Twitter:
<a href="http://twitter.com/share"
data-url="http://your.url.com/yourdynamicpage"
class="twitter-share-button"
data-text="What should I share?"
data-count="horizontal">Tweet</a>
For Facebook:
<img src="/path/to/your/image/" width="12" height="12" alt="alt" />
What am I doing wrong?
http://shantacreations.com/facebook_share_old/example_1/share.php/
yes the above link are functioning as you would like to make function.

How do I add a hashtag to a custom tweet button?

I'm trying to create a custom tweet button with a popup, this part works. However, I am unable to get it to post hashtags in the text area.
Tweet content
url=http://www.mywebsite.com&text=mytweetcontent&via=mytwitterusername
In the &text= I've experimented with using mytweetcontent+#myhashtag as well as trying the URL encoding %23 (which corresponds with #); however, I am still unable to get a hashtag to appear. Any ideas on what I can do? I would prefer to have a custom image, which is why I am not using the proprietary twitter jscript button. Thanks very much for your help!
Full code for reference:
<img src="twitter-logo.png" border="0">
Edit* Response to comment
thanks for the suggestion! i didnt try with hashtag, just normal, but changing the & to ? removes the content area, code below. Top line is the result in the tweet box, below is corresponding url.
mycontent http://t.co/nKb4nWC via #myusername
http://twitter.com/intent/tweet?text=mycontent&url=http%3A%2F%2Fwww.mywebsite.com&via=myusername
http://t.co/YzrDfzX via #myusername
http://twitter.com/intent/tweet?url=http%3A%2F%2Fwww.mywebsite.com%3Ftext%3Dmycontent&via=myusername
What's wrong with using the following?
<a href="http://twitter.com/intent/tweet?text=Text%20%23hashtag&via=JohnDoe"
onclick="return !window.open(this.href, 'tweet', 'menubar=no')">
<img src="twitter-logo.png">
</a>
Twitter
<script type="text/javascript">
$('.socialLinkTwitter').click(function (e) {
e.preventDefault();
var sTwitterShare = $(this).attr('href');
window.open(sTwitterShare,'Share','width=550,height=450');
});
</script>

Categories

Resources