Develop Reference

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.

Facebook share and custom text with image

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>

Twitter Share button dynamic URL share

I'm trying to make a custom Twitter button that will grab the page URL of the current page when clicked, which would obviously change dependent on which page it appears on, not unlike the default share button. However, I am unsure how to pass the page URL into the button.
This is what I have thus far jsfiddle
<style type="text/css" media="screen">
</style>
<div id="social-share-container">
<div id="custom-tweet-button">
<a id="tweetShare" href="https://twitter.com/share?url="+encodeURIComponent(document.URL); target="_blank">Tweet
</a>
</div>
</div>
It's a bit hacked together as I'm pretty unfamiliar with JS.

This passes the url and title to a simple pop-up box with the twitter share page:
<script language="javascript">
function tweetCurrentPage()
{ window.open("https://twitter.com/share?url="+ encodeURIComponent(window.location.href)+"&text="+document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false; }
</script>
<a class="tweet" href="javascript:tweetCurrentPage()" target="_blank" alt="Tweet this page">Tweet this page</a>
If you don't want it to open in a popup box, you can use this instead of window.open:
window.location.href="https://twitter.com/share?url="+ encodeURIComponent(window.location.href)+"&text="+document.title;
Update:
escape() function is deprecated, Replaced with encodeURIComponent()

I would suggest window.location - That will give you the current page url.
Problem is you're using JS inline in HTML - you can't do that like you're wanting to.
I updated your fiddle with some vanilla js to show you a better way to do this.
http://jsfiddle.net/4jF5N/1/
var link = document.getElementById('tweetShare');
var url = window.location;
link.addEventListener('click',function(event){
event.preventDefault();
window.open("https://twitter.com/share?url="+encodeURIComponent(url));
alert(url)
},false);

Take a look on document.location:
location.hostname
location.pathname
http://www.w3schools.com/jsref/obj_location.asp

How do I let a user tweet an image?

We have a twitter button set up where users click on it and a popup opens up to let the user tweet from their own account. How can we include an image with that tweet? (With facebook we've been able to do it).
<div>
<a href="http://twitter.com/share" class="twitter-share-button"
data-url="http://www.mysite.com"
data-text="sharing this with you...."
data-count="none">Tweet</a>
</div>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript">
twttr.events.bind('tweet', function(event) {
window.location = "http://www.mysite.com"
});
</script>

To do this, you'll need to use the API directly (not just their widget). Details on how to post with a media item can be found at the status/update_with_media docs.
If you're looking for a kind of rendering a 'preview' of a link (what Facebook allows through Open Graph), then checkout the Cards documentation.

You can also use the following:
https://dev.twitter.com/rest/media/uploading-media

multiple external link buttons with jquery simpleModal box

I learned how to pass the argument with a simpler javascript confirm box, but now I'm working with this SimpleModal script, and I'm a bit lost.
I have a page with several buttons that will link to different external pages. When I click any button, the confirm box will pop up and when user clicks ok, then they are taken to that specific external link. Right now, it's hard coded for one link, but I'm not sure how to set the link for each button.
The link is currently set on this line:
window.location.href = 'https://www.sandbox.paypal.com/xxx';
The function:
$(document).ready(function () {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
// example of calling the confirm function
// you must use a callback function to perform the "yes" action
confirm("<h3 class='register'>Please read and understand the Terms of these lessons before purchasing...this is important.<br /><br />By purchasing these lessons, you agree that:</h2><ul class='popup'><li class='lessonslist'><img class='imgpad' src='/images/bullet.png' alt='bullet' />You may reteach any material you have learned here, but you may NOT use the materials provided in the lessons to do so. In other words, you can do the lessons, learn the material, and teach your friend. You CAN NOT print out the transcriptions or download the videos and give them to a friend.</li><li class='lessonslist'><img class='imgpad' src='/images/bullet.png' alt='bullet' />Derivative works are ok to produce, but you can not directly copy the musical examples and profit off them without the written consent of Joel Laviolette.</li></ul>", function () {
window.location.href = 'https://www.sandbox.paypal.com/xxx';
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML:"<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId:'confirm-overlay',
containerId:'confirm-container',
onShow: function (dialog) {
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
$.modal.close();
});
}
});
}
html:
<div id='confirm-dialog'><h2>Confirm Override</h2>
<p>A modal dialog override of the JavaScript confirm function. Demonstrates the use of <code>onShow</code> as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.</p>
<input type='button' name='confirm' class='confirm' value='Demo'/>
</form>
</div>
<div id='confirm'>
<div class='header'><span>Confirm</span></div>
<p class='message'></p>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>OK
</div>
</div>
</div>
There is also the jquery.simplemodal.js which is probably too big to post here.

So... you want to attach confirm popup for every link?
${"selector that returns all external links").click(function(e){
e.preventDefault();
confirm("Do you want to leave?", function () {
window.location.href = (e.target).attr('href');
});
});
${"selector that returns all external links")
Is not a real selector. You need to write correct one inside ${} in order to find buttons you are looking for.
Simple ready to run sample (save in html file and open) =>
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='http://www.ericmmartin.com/wordpress/wp-content/themes/emm-v3/scripts/jquery.simplemodal.js?ver=1.3.3'></script>
</head>
<body>
<a class="external-link" href="http://www.google.com">google</a>
<a class="external-link" href="http://www.bing.com">bing</a>
<a class="external-link" href="http://www.yahoo.com">yahoo</a>
<div id='modal' style='display: none; background: Silver;'>
<a href="#" class='simplemodal-close' id='yes'>leave</a>
<a href="#" class='simplemodal-close' id='no'>don't leave</a>
</div>
<script type='text/javascript'>
$(".external-link").click(function(e){ //on external link click
e.preventDefault(); //cancel immediate redirect of link
$("#modal") //selecting modal window div
.data('href', $(this).attr('href')) //saving href to modal window itself
.modal(); //showing modal window
});
$("#yes").click(function(){window.location=$("#modal").data('href')}); //if user clicks yes, redirect
</script>
</body>
</html>