On stackoverflow, down the left side of my post, there is 3 social media share buttons.
Is there a way to track if the person successfully shared with it?
I'm asking, because i track users who "like", "+1" and "tweet" to share pages, but right now I'm using the social buttons provided by the company's like facebook, gplus, twitter and they cause my site to load slow. And it also causes a problem if the user wants to re-share a page sometime down the road, because facebook already marks it as liked, and I'd prefer a way to share pages.
I've tried a few things with my current javascript knowledge and couldn't figure it out.
Do the following subscriptions
Facebook: subscribe to the edge.create event (http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/)
Twitter: put a callback on the onTweet parameter (https://dev.twitter.com/docs/anywhere/welcome#tweetbox)
Google+: put a callback on the callback parameter (https://developers.google.com/+/plugins/+1button/)
Then in your callback functions, just AJAX whatever you want back to your server for it to store. :)
Happy Coding!
Put this in Header
<!-- For Facebook -->
<meta property="og:url" content="https://you-domain.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Site Title" />
<meta property="og:description" content="Site Description" />
<meta property="og:image" content="Image you want to set for posts" />
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1" fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));
</script>
<!-- facebook Script End -->
Here are the Series of Button (Facebook, Twitter, Google+, Pinterest, LinkedIn ) put where you want to show share buttons, then Design them from CSS
<!-- For Facebook -->
<a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=URL_you_want_to_Share">Facebook</a
<!-- For Twitter -->
<a data-size="large" href="https://twitter.com/intent/tweet?text=URL_you_want_to_Share">Twitter</a>
<!-- For Google+ -->
Google+
<!-- For Pinterest -->
Pinterest
<!-- For LinkedIn -->
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script><script type="IN/Share" data-url="URL_you_want_to_Share"></script>
Related
Having a problem setting up the moderation toolkit on my facebook comments plug-in. I am trialling this on one page at the moment until I copy it to all pages to each have their own individual comments boxes.
Site Page: http://gp2aus.com/why-go.html
I have inserted the following after my head tag:
<!-- Facebook Comments Box App ID -->
<meta property="fb:admins" content="{100016298409099}"/>
<meta property="fb:app_id" content="{1321908721223176}" />
The following comes after the opening of the body tag:
<!-- Facebook Comments Box Script -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.9&appId=1321908721223176";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And the following is in the correct location on my page within the body tag:
<!-- Facebook Comments Box -->
<div class="fb-comments" data-href="http://gp2aus.com/why-go.html" data-width="100%" data-numposts="100" data-order-by="reverse_time"></div>
I have tried all of the applicable solves I have found on SO.
My AppID is correct
AppID's match in the script and AppID pages
I am listed as a moderator in the Settings in the 'Tools & Support' section
I am not in the banned or blacklisted sections!
One thing that I wonder is the problem, but don't know how to fix, is that when I open the 'Facebook for Developers' site and click on the 'Tools & Support' it says that there are no comments for review. Which is odd given that I have just tried making some example comments from myself and another profile and nothing seems to come up.
Can't quite see what I'm doing wrong here but would much appreciate your collective wisdom!
S.
{} are used in the documentation to show that you need to insert a value at this point; they are not part of that value.
If you see f.e. {app-id} in there, it means you need to replace the whole placeholder {app-id} with the actual app id, not just put it inside the curly braces.
Fix that, and then use https://developers.facebook.com/tools/debug to refresh the cache and check for further errors.
I know Facebook changes their algorithms all the time, so I'm not even sure this is feasible anymore. But I want to be able when I create a FB share button using OpenGraph, that the message area of the post is dynamically populated with the text of a message I want to display. And I need to do it for four share buttons I plan to place on my HTML page. So I start off with the meta tags in the head like this:
<meta property="og:url" content="https://www.whatever.com/somepage.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="My Website" />
<meta property="og:description" content="I just watch this webpage from #Stack" />
<meta property="fb:app_id" content="012345678901234" />
Of course, some of these properties are fillers for the actual id and url, as you might expect.
Then I add this is the body:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
and finally the code to generate one of the buttons:
<div class="fb-share-button" data-href="ttps://www.whatever.com/somepage.html" data-layout="button"></div>
That works to bring the share dialog popup up, but the message area is blank and I need it filled. So what am I doing wrong?
I have a simple code that I can't get to work. My website is asaphot.com and I have different images based on id and the url sample is http://asaphot.com/photos/14. Now my codes are:
<meta property="og:url" content="http://asaphot.com/photos/14" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ASAPHOT" />
<meta property="og:description" content="Asaphot image" />
<meta property="og:image" content="{{ baseUrl() }}/assets/uploads/test.jpg" />
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.5&appId=696480183784974";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="http://asaphot.com/photos/14" data-layout="button_count"></div>
Whenever I click share, I only get the Canonical Url which is http://asaphot.com/login but Fetched Url is http://asaphot.com/photos/14.
The homepage shows up when I click share:
Am I missing something here?
I think you have to login to go that page.
When facebook is parses your URL, its encountering login page. So its going to login.
Solution:
Url Shared to facebook should not have any login.
Keep things to be shared without login.
EDIT
I dont think ots safe to do this,
But you can try this,
$host = gethostbyaddr($_SERVER['REMOTE_ADDR']);
if (substr($host, (strlen($host)-13)) == 'facebook.com' ){
//set a variable in session.or set login
}
I am trying to make a custom Facebook Share button, by providing my own img and applying FB.ui() to it, but the method opens the dialogue stating:
Given URL is not permitted by the Application configuration: One or more of the given URLs is not permitted by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
Can anyone tell me what I am doing wrong?
index.php:
<head>
<meta property="og:url" content="http://www.example.com" />
<meta property="og:title" content="Why can't I" />
<meta property="og:description" content="get this thing to work" />
<meta property="og:image" content="http://www.example.com/images/whyaretherenoexamplesanywhere.jpg" />
</head>
<body>
<div id="fb-root"></div>
<script>
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
// more div's
</body>
in a div on index.php, the file ajaxPage.php is loaded, by means of an ajax call. this in itself and everything in it works perfectly.
In this file an image exists as a button, bound by a .click() method, which together prompt the dialogue for sharing:
ajaxPage.php:
// In de DOM:
<img class="customFacebookIcon" src="enoughwiththefunnynames.jpg"/>
// In the <script>:
$('.customFacebookIcon').click(function(){
FB.ui({
method: 'share',
appId: '12345678901234567890',
href: 'http://www.example.com',
}, function(response){});
});
I previously asked about making a custom like message on a users page and was directed to use open graph. I have tried the tutorial and can't seem to get it to work with my like button, can anyone help or offer some advice?
i have used the debug tool and get no errors and am a little confused as to what i should do next. My app uses a fixed php header and the body content is changed dynamically using AJAX. what i am trying to do is get a user to 'like' a coupon and it shows up on their site with my custom message, something like "someone has used coupon A from www.somesite.com"
Below is what is in my head;
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# <?php echo APP_NAME;?> fb: http://ogp.me/ns/fb/<?php echo APP_NAME;?># test: http://ogp.me/ns/fb/test#">
<meta property="fb:app_id" content="xxxxxxxxxxxxxxx" />
<meta property="og:type" content="<?php echo APP_NAME;?>:coupon" />
<meta property="og:url" content="http://somesite.com/" />
<meta property="og:title" content="Sample Coupon" />
<meta property="og:description" content="Some Arbitrary String" />
<meta property="og:image" content="http://ogp.me/logo.png" />
and here is my like script, which currently works, but for the page and not the coupon.
<!-- Code for FB like button -->
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=xxxxxxxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="http://apps.facebook.com/test/" data-send="false" data-width="450" data-show-faces="false"></div>
Using the open graph tags only enable you to post stories like this:
User XYZ likes ABC on website.com
If you would like to specify your own actions (e.g. use) and objects ('coupon') you also need to create an application that will allow you to do this.
You can find a step by step tutorial on how to do this here:
https://developers.facebook.com/docs/opengraph/tutorial/