Social media sharing - javascript

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();
});
});

Related

Trace URL's that link to my iframe/widget

I have created a widget.html page with, for example, a "Powered by Example.com" box/widget. And I have an HTML iframe that links to that specific page (widget.html) on my site.
<iframe src="http://example.com/widget.html"></iframe>
I share that iframe code with website owners who want to use my widget on their sites.
I want to be able to see every single site that uses my iframe. I would prefer a code that creates a txt file or even a MySQL Table with all websites URLs that use my widget on their websites.
I basically want to track the sites that use my widget as an iframe . How do I do that? With Javascript? PHP? MySQL?
P.S. I'm not sure if an iframe is the best way to link widgets off my site, but I'm open for your suggestions. Thanks in advance.
use jquery
then load a request page throgh jquery like : $("#div1").load("demo_test.txt");
and send a request uri parameter to it
you will find the current url using the widget and alos you can get the parameter

Collect the amount of clicks on a link to Sharepoint, placed in email

I need to collect the amount of clicks on a link, placed in email.
The idea is following:
1) I send an email message with 1 hyperlink to N people
2) Some of them open it and click this link.
3) Link directs to the file Sharepoint (this is required) page (Library or List) where the below code is placed:
<script language="javascript" type="text/javascript">
var Loginname = document.getElementById("zz15_Menu");
var strTrans=Loginname.getElementsByTagName('span')[0].innerHTML;
.... WHAT SHOULD BE HERE?....
window.location = "http://www.smth.com/ololo.pdf";
</script>
I have user's Display Name in strTrans now.
Please suggest something to code next to store this parameter of every page visit in some file, allowing me then to get the amount of link clicks.
I cannot use any server-side technology on Sharepoint.
The including of a javascript file is enough for Google and others to gather statistics, so why not use some tool like Google Analytics.
If you want to depend on javacript, you could use jQuery to open an url on the background and gather statistics in there.
Use something like this:
$.get('http://url/registerOpen.aspx?username=' + strTrans);
Setting aside the paid services (Omniture, WebMetrics, etc.), did you consider Google Analytics?
http://www.google.com/analytics/

Why doesn't this Facebook share code work?

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&amp%3Bp[title]=SportFant&amp%3Bp[summary]=whatever&amp%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.

Facebook share button

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:

load a code as the first thing in a webpage?

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.

Categories

Resources