I have added Addthis widget to a website. Here is the autogenerated code which I have tweaked little bit:
<script type="text/javascript">
var addthis_config = {
"data_track_clickback": true,
services_compact: 'facebook, twitter,googlebuzz, digg, stumbleupon',
services_expanded: 'facebook, twitter,googlebuzz, digg, stumbleupon',
ui_cobrand: "ABC Company",
ui_header_color: "#ffffff",
ui_header_background: "#000000"
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4dde778a54a20e05"></script>
<script type="text/javascript">
var addthis_share = {
templates: { twitter: 'check out {{title}} : {{url}} #ABC' },
url_transforms : { clean: true }
}
</script>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_compact">
<img alt="Share" src="../images/icons/share.gif" /><img alt="ABC" src="../images/icons/financial_tip.png" />
</a>
</div>
I have added facebook, twitter, google buzz, StumbleUpon and Digg links inside the ADdthis compact and expandable widgets.
When I click the Share link, following window pop ups:
I dont want the Addthis footer to appear in the pop up window. I tried finding the div with jquery doc load and removing it..but it didnt help.
Other thing is when I click FB, it opens my account and the following message is displayed about posting on my wall:
Addthis is appending some garbage at the end of the shared url:
e.g after index.aspx starting from # to ;facebook ..it is appending some data that is irrelevant... how to fix it ..any idea...
If I share it on twitter, the login screen to twitter
I dont want the Addthis message in footer..how to hide/delete it
Similar to FB, when i login to my twitter account, some garbage is added to the end of the shared url:
Moreover, whenever i click any icon inside the compact Addthis list, Fb or twitter, a small window pop ups:
Can anyone help me with these.
THanks.
About twitter issue, you can use somthing like this..
<script type='text/javascript'>
var addthis_share =
{
templates: { twitter: '{{title}}: {{url}}' }
}
</script>
And change
<a class='addthis_button_tweet' tw:via='YOUR-USER-NAME'/>
I never tried other services. But have a look at Addthis API. I think you can find out something.
Malinda's answer is basically correct but doesn't explain what's going on - I think it's important to understand a bit more.
The question says, "Addthis is appending some garbage at the end of the shared url". This isn't garbage. The value after the #hashtag is a semi-random number generated by Addthis that can help you build really useful social media reports that can even show you which of your shares are re-shares - a critical component in modeling viral growth rates (which is what you want from social sharing). You can read more about that here: http://support.addthis.com/customer/portal/articles/381254-address-bar-sharing-analytics.
What Malinda's solution does is override the default Addthis Twitter template to omit this tracking data. That certainly works - you should just realize what you're giving up in terms of tracking your social media campaign.
Related
I don't want my webpage to open inside facebook. It doesn't function quite right.
Is there a way to list a url that when reached, redirects to my external site that is NOT is the facebook interface?
I have tried uploading a php file with a redirect in it, but it makes no difference.
<script type="text/javascript">
window.top.location.href = "http://aurumhairstylists.co.nz";
</script>
<p>If you are not automatically redirected here is a link to <a target="_blank" href="http://shereewalker.com">shereewalker.com</a>. Opens in a new tab or window.</p>
Any help would be great
Thanks
IT is possible but the browser would block the page as a action not "requested by the user".
this is a VERY simple implementation:
<script>
function myFunction() {
var myWindow = window.open("http://aurumhairstylists.co.nz", "myWindow", "width=400, height=200");
}
</script>
<IMG SRC="1x1.gif" ALT="" HEIGHT=1 WIDTH=1 onLoad="myFunction()">
cheers
I want to put a button on my website that will open a popup for the user to share the url on its profile.
I followed the steps shown here, after click on 'get code':
1. Include the Javascript SDK on your page once, ideally right after the opening <body> tag.
2. Place the code for your plugin wherever you want the plugin to appear on your page.
but I get a blank div without the button. What's missing? Do I need to register on facebook developers? Do I need to include some javascript src in the <head>?
On twitter is very simple, you just need to get the code from here
Edit: I want something like youtube facebook share.
As noted in the comments, somehow the default method as suggested by Facebook is not working, or rather the way the share button documentation suggests is not clear enough. This answer as suggested appears to work. Note that you will need a Facebook App ID.
Alternatively, this answer allows for a simple link, which you then have to style yourself with CSS, this alternative has the benefit of making share buttons that are consistent in design with your website, if you just want the vanilla blue Facebook button then continue with this answer.
Squarespace also details the default way of adding a facebook like button, my attempts to get it to work in a jsFiddle were not successful.
Get an AppID and embed the Facebook script in your website.
This step is explained in detail in the official documentation, where you just generate your own AppID then copy paste the script code (usually after the <body> tag.
Add a jQuery library for the next bit of code as explained in this answer.
The share dialog box script:
-
<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'Your-blog-link',
picture: ‘http://yourpicture-here’,
caption: 'yourCaption',
description: short-description-here
message: ''
});
});
});
</script>
More parameters can also be added to customize the button.
Lastly, add the image/element you want to be the share-button:
Something like: <img src = "share_button.png" id = "share_button">
I am trying to add text to a facebook share link after it pops up. I have looked through the facebook dev site and searched online and the only thing that looked like it might remotely work was adding in meta tags for the Graph API. But I couldn't get them to work or display anything.
Below is the code for the button
<script>
function fbs_click() {
u=location.href;
t='Where is your kind of crowd? Ask StreetPotato';
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>
<a rel="nofollow" href="#"
class="fb_share_button social" onclick="return fbs_click()"
target="_blank"
style="text-decoration:none;"
title='Follow us on Facebook'>
<%=image_tag "social/facebook.png", alt:"Follow us on Facebook"%>
</a>
If anyone has any insight or idea how to add in default text, like a hash-tag into the share text box it would be awesome. Thanks for reading.
-Alan
In general, you should not pre-populate any of the Facebook social dialogs that will post on behalf of a user.
See IV.2 of the Platform Policy doc:
"You must not pre-fill any of the fields associated with the following products, unless the user manually generated the content earlier in the workflow: Stream stories (user_message parameter for Facebook.streamPublish and FB.Connect.streamPublish, and message parameter for stream.publish), Photos (caption), Videos (description), Notes (title and content), Links (comment), and Jabber/XMPP"
I recently coded my own blog for a site im making. I want to use facebook to handle the comment on posts, so i integrated the plugin. I noticed something odd however. If i comment on one blog post, then go to a different one, my comment is on the other blog posts as well. How do i make it so each post has its own set of comments?
You have to set a different data-href attribute for each post. Here's an example of how I do it in Yii:
<div class="fb-comments" data-href="http://domain.com/post/view/<? echo $model->id; ?>" data-num-posts="4" data-width="695"></div>
The point is the data-href value has to be unique for each post.
Assuming you are using html5 comments box.
Refer to: https://developers.facebook.com/docs/reference/plugins/comments/
data-href="" // data href sets the url "object id" for the box, you need to use a dynamic system with php, or javascript or what ever language you coded in.
<div style="padding-left:5px; min-height:500px" class="fb-comments" data-href="'+newUrl+'" data-num-posts="20" data-width="380"></div>
"i use" EXAMPLE:
the following examples works for pages with dynamic urls
example.com?id=thisid&thisarticle=article-name
<div id="thecomments"></div>
<script>
function changeCommentsUrl(newUrl){
// should refresh fb comments plugin for the "newUrl" variable
document.getElementById('thecomments').innerHTML='';
parser=document.getElementById('thecomments');
parser.innerHTML='<div style="padding-left:5px; min-height:500px" class="fb-comments" data-href="'+newUrl+'" data-num-posts="20" data-width="380"></div>';
FB.XFBML.parse(parser);
}
var thisurl = document.write(document.URL);
changeCommentsUrl(thisurl);
</script>
You could simply place that kind of snippet in your footer :
<script>
$(".fb-comments").attr("data-href", window.location.href);
</script>
It does the job...
Hey guys, I have developed a small site that i would like to embed into a tab on a facebook page.
Previously I used this code to load in an iframe, it worked great:
<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Link 1</a> | <a class="red" onClick="outside_location.setInnerFBML(link_2);" style="cursor: pointer;">Link 2</a>
<div id="outside_location"></div>
<fb:js-string var="link_1"><fb:iframe width="760" height="1280" frameborder='0' src='http://www.WebWhispers.in' /></fb:js-string>
<fb:js-string var="link_2"><fb:iframe width="760" height="1280" frameborder='0' src='http://google.com/' /></fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = d
document.getElementById('outside_location');
</script>
However, it has stopped working. I dont think facebook allows iframe inside of pages, only applications.
How can I load this page in without learning FBML? The site uses Jquery so I cant use FBML anyway.
I know applications can use iFrames, can I make it an application and then embed the application into a page tab somehow?
No. Tab pages can not contain iFrames. They must be written using FBML and FBJS.
One reason for this is that Facebook does not want to enable Tab pages to detect who looks at them. All requests (including images) on tab pages are proxied through Facebook for this reason. If iframes were allowed then the application would be able to detect who looked at it, which would present a privacy issue for Facebook users.
This is either a policy change by Facebook or, more likely, a bug. I say it's unlikely to be a policy change as it throws a script error, whereas a policy change would more likely strip the code out before it's rendered.
There's a bug report you can add votes to and follow here.