I'm trying to figure out how to implement the Share button exactly as how it is implemented here. I want the ability to let users post a given link to their news feed without requiring any kind of app permissions with some optional text that they can add to it. How did BuzzFeed do it? The Facebook documentation is very confusing to me which is why I'm having a hard time implementing it myself. It'd be great if somebody could just layout the steps needed to take. What exactly do I need to put in my HTML page? Do I need to create a Facebook app?
To share your web-page, you don't need to create a facebook application.
You can just put that Facebook-share image there, with an href = "http://www.facebook.com/sharer.php?u=<your url>"
Facebook's like button allows sharing as well. The code to generate that for your website is in the official documentation.
Edit the page you want to be shared, add these to the meta tags in the head.
<meta property="og:image" content="http://www. XXXX url of a jpg image you want to be displayed on shared content has to be 200x200 pixels (make it in photoshop ect.) XXXX"/>
<meta property="og:title" content="xxxx A title you want to be dispayed in shared content xxxx"/>
<meta property="og:url" content="http://www. url of the page you want shared including the slash after .com xxx .com/"/>
<meta property="og:description" content="xxxx discription of the shared content xxx "/>
There is a list of the og properties other than these here- http://ogp.me/
Next insert this where you want the share button on your page,
<a title="xxx Share mypage.com xxx" href="http://www.facebook.com/sharer.php? u=http://www. xxx url of page you edited above xxx .com &t=xxx a title you want to use xxx" target="_blank"><img src="http://www. xxx an image for the share button (make it in photoshop ect.)xxx" width="xx" height="xx" alt="Share"/></a>
Obviously take out the xxx's and leave the " " , if you change any of the above while testing you may have to go to facebook debugger and debug it as it sometimes hold on to the original content.
hope this helps
If you want to customize that share page, try this:
Javascript Popup Example:
var title = 'My Title';
var summary = 'This is my summary';
var url = 'http://www.mydomain.com/path/to/page';
var image = 'http://www.mydomain.com/images/myimage.png';
var fb = window.open('http://www.facebook.com/sharer.php?s=100&p[title]='+encodeURIComponent(title)+'&p[url]='+encodeURIComponent(url)+'&p[summary]='+encodeURIComponent(summary)+'&p[images][0]='+encodeURIComponent(image));
fb.focus();
This is what works.
in HTML:
Facebook Link
Where you replace http://google.com with your URL.
in PHP, if you want it to pull the url you are on:
Facebook
Related
I want to add <link rel="alternate" href="https://www.example.com" hreflang="en-us" /> this kinda of link tag in my bigcommerce site using jQuery or anything else...
Tried code:
1:
if ($("body#home").length > 0) {
$('head').add($('<link rel="alternate" href="https://www.example.com" hreflang="en-us" />'));
}
2:
var page = window.location.pathname;
if (page == '/' || page == '/index.html') {
$('head').add($('<link rel="alternate" href="https://www.example.com" hreflang="en-us" />'));
}
3:
if ($("html").hasClass("home")) {
$("head").append("<link rel=alternate href=https://www.example.com hreflang=en-us>");
}
But nothing worked for me....
Let's first give some background on hreflang and the three valid ways that Google will read it..
HTML link element in header. In the HTML section of http://www.example.com/, add a link element pointing to the Spanish version of that webpage at http://es.example.com/, like this:
<link rel="alternate" hreflang="es" href="http://es.example.com/" />
HTTP header. If you publish non-HTML files (like PDFs), you can use an HTTP header to indicate a different language version of a URL:
Link: <http://es.example.com/>; rel="alternate"; hreflang="es"
To specify multiple hreflang values in a Link HTTP header, separate the values with commas like so:
Link: <http://es.example.com/>; rel="alternate"; hreflang="es",<http://de.example.com/>; rel="alternate"; hreflang="de"
Sitemap. Instead of using markup, you can submit language version information in a Sitemap.
Source: Google 'hreflang' Usage
So Method 2 isn't possible since you can't modify or control the headers from your BigCommerce store.
This leaves us with Method 1 or Method 3.
The big question here though is..
"Will Google index & process a dynamically inserted JavaScript hreflang link tag"?
Unfortunately at the time of writing this, I need to wait several days for the Google Webmaster Tool to become active on my test site so I can be certain; while all the 3rd party hreflang test sites I used failed. My gut feeling is that I would not trust it. However, if you have an active Google Webmaster / Search Console account, you can test this by going to: Dashboard > Search Traffic > International Targeting.
But for the sake of argument, let's assume that it will work, and so to answer your specific question, you would go about this method like so...
Within the <head>...</head> block, create an empty link tag like so: <link id="lang1" /> This will have the link element physically in the DOM awaiting its attributes to be dynamically added.
Next, immediately below the link element created above, let's create the JavaScript that will turn this empty link tag into a complete hreflang reference depending on the current page:
<script>
// If current page is homepage, then append the neccessary attributes to the link tag. Else, do nothing.
// If on homepage, the link tag would become: "<link id="lang1" rel="alternate" href="https://www.example.com" hreflang="en-us" />"
window.location.pathname == '/' ? $("#lang1").attr({"rel": "alternate", "href": "https://www.example.com", "hreflang": "en-us"}) : false;
</script>
And that's about it from the coding side. If you run this and inspect the DOM (it won't be viewable in page source), you can confirm that your link tag now reads as: <link id="lang1" rel="alternate" href="https://www.example.com" hreflang="en-us" />
Again, whether or not Google will process this, I don't know.
But here's an alternative I do know will work...
We can follow Method 3 listed above, and submit language version information via your site's sitemap, which can specify which individual and specific pages have alternative language versions.
Now, you do not have access to directly modify your BigCommerce generated Sitemap. But what you do have access to, is to:
Create your own custom sitemap file, and upload it to your store.
Tell Google to use the URL of this custom sitemap, rather than the default BigCommerce one.
There are plenty of resources online on how to create a sitemap, and there are many tools that can help automate this process. Although beware, if you use a custom sitemap, then you will need to maintain it and manually update it whenever you add new pages or products to your store.
I've taken the time to point you to some specific documentation resources that should help you with this task. I will eventually come back to this post to transcribe the content from these links into this post as I do recognize posting links is bad SO practice. A hardass might say "well why are you doing it then", and well my time is limited and I'm trying to be as helpful as I can now upfront.
Here is a link from the Google Docs with information on creating a sitemap with page specific language versions.
Here is a link from the BigCommerce Docs with information on uploading a custom file to your store which can then be accessible via your domain/URL.
Finally, here is a link from the BigCommerce Docs with information on how to direct Google to use a specific/alternate file as your store's sitemap.
Please attempt the code suggestion I wrote for Method #1 and test it using your Google Webmaster's tool to let us know if the hreflang link tag is successfully crawled by Google when dynamically inserted via JavaScript - you would be doing the community a great service as there is no definite answer around this.
Remember, you can officially test this by logging into your Google Webmaster Console and navigating to Dashboard > Search Traffic > International Targeting
Is it possible to use FB share plugin without APP ID?
If I use HTML5 code then the console logs an error FB.getLoginStatus() called before calling FB.init().
To use HTML 5 FB like is it necessary to have an APP ID?
Thank you
Here i am sharing what i did to share post on fb wall, In this way you do not need to use appId. Just put this code in your HTML page where you want link to share...
<a name="fb_share" type="button" href="http://www.facebook.com/sharer.php?u={$url}&media={$imgPath}&description={$desc}" class="joinFB">Share Your Advertise</a>
URL parameters are as explained below,
u : url or link you want to user to go when he clicks on your wall post,
media : full image path,make sure that image is available on given path,it will accept one image only
description : a short description that you want to show on wall
It will also ask you to write some data which will be displayed above your post. Description passed in url will be displayed in right side of your image.
Please note that i had passed $url,$desc,$imgPath variables as per my need. The above code is in smarty-php, so change it as per your requirement.
Hope this becomes helpful to you.
Yes you need an app id. You can try to inject your own code into the DOM of the user when using facebook and call functions in their javascript... But I doubt many users will actiually use an "app" that works this way.
I use Google+ to share some links on my page and there is a problem when I try to share an URL containing parameters. Example:
http://google.com?n=somethink&link=p/1393007&i=images/icons/gplus-16.png
When you put this URL into the field at this page:
https://developers.google.com/+/plugins/share/
...and click on the share button, you can't see information about page like name, picture and description. But when you delete the dot before "png", then Google shows data about the page.
The same thing happens when you write the ' symbol anywhere in the URL. I can't find any information about this error in Google Help Pages. It works when I use an URL like this:
http://google.com?n='&link=p/1393007&i=images/icons/gplus-16.png
...but it isn't very elegant solution.
How to write clean URLs?
currently G+ share supports only two parameters: url, for the target url, and hl, for a language code.
https://plus.google.com/share?url=http://www.stackoverflow.com
Alternatively, you can add OpenGraph tags to the head of your page to specify the same fields like this: (haven't tested yet)
<meta property="og:title" content="..."/>
<meta property="og:image" content="..."/>
<meta property="og:description" content="..."/>
Make sure you URL encode the link you want to share on Google+ via the Google+ share link.
For example: if you want to share the link http://example.com?a=b&c=d, first URL encode the link to look like:
http%3A%2F%2Fexample.com%3Fa%3Db%26c%3Dd
Now you can share the link on Google+ through the share link:
https://plus.google.com/share?url=http%3A%2F%2Fexample.com%3Fa%3Db%26c%3Dd
function googleplusbtn(url) {
sharelink = "https://plus.google.com/share?url="+url;
newwindow=window.open(sharelink,'name','height=400,width=600');
if (window.focus) {newwindow.focus()}
return false;
}
var url="www.google.com";
googleplusbtn(url);
Refer this link
The share link is intended for native client applications, Flash applications, highly privacy-sensitive sites, and others who may not be able to use the +1 or share button. Adding the following markup to your site will include a simple icon which will pop open a share dialog for your visitors.
<a href="https://plus.google.com/share?url=https://stackoverflow.com/questions/11868291/google-plus-share-and-parameters-in-url" onclick="javascript:window.open(this.href,
'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img
src="https://www.gstatic.com/images/icons/gplus-64.png" alt="Share on Google+"/></a>
The answer is very poor. You should use api for login then share content.
require_once 'google-api-php-client-master/src/Google/Client.php';
$client = new Google_Client();
$client->setClientId('YOUR_CLIENT_ID');
$client->setClientSecret('YOUR_CLIENT_SECRET');
$client->setRedirectUri('YOUR_REDIRECT_URI');
$plus = new Google_PlusService($client);
$authUrl = $client->createAuthUrl();
$visibleActions = array(
'http://schema.org/AddAction',
'http://schema.org/ReviewAction');
$authUrl .= '&request_visible_actions=' .
urlencode(implode(' ', $visibleActions));
print 'Sign in with Google';
I´m implementing facebook comments boxes on my news pages. And it works. The problem is that if I make a comment on one page, it will display on ALL pages which contains fb comment boxes.
Currently my code looks like this:
<b><div class="fb-comments" data-href="http://selandia-ceu.dk/selandia/nyheder.aspx" data-num-posts="3" data-width="500"></div>
<script>
var fb-comments = document.getElementById('fb-comments');
mydiv.innerHTML =
'<div class="fb-comments" data-href="' + document.location.href + '" data-num-posts="3" data-width="500"></fb:comments>';
FB.XFBML.parse(fb-comments);
</script></b>
The website is using Microsoft Server. The url in the code is supposed to refer to the current page one is viewing. Anyone know what I´m supposed to do? :)
The comments are temporary disabled on the pages.
I got the extra bit of code (FB.XFBML.parse) from this thread:
Different Facebook comment box after each ajax call
You may need to clean up your Open Graph tags, as the URL that each comments plugin is pointed to will be scraped by the Open Graph linter and used to determine the canonical URL. The problem is likely that your comments plugins all end up pointing to the same canonical URL:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fselandia-ceu.dk%2Fselandia%2Fnyheder.aspx
Use this Debug tool to inspect your Open Graph tags and ensure each page has it's own canonical URL. You also need to correct the fb:admins tag that you have in your HTML as suggested by the debugger.
We are trying to use either the facebook send social plugin, or the fb.ui send dialog. In both cases, we have found the link or href we pass to facebook only mostly works. There are 3 places a link is placed in the message and they are:
The title of the message
A link right below the title
an image to the left of the description
1 and 3 seem to respect the link parameter, but 2 is not. Here is an example of the code we are using:
FB.ui({
method: 'send',
name: 'Referral',
link: 'https://www.oursite.com/?refer=123',
picture: 'http://www.oursite.com/assets/images/logo.png',
name:'heres a name',
description:'description'
});
When this gets sent the link https://www.oursite.com/?refer=123 works for the name and the picture, but not the link output right below the name. Here is the code we're using for the social plugin which yields the same effect:
<div class="fb-send" data-href="https://www.oursite.com/?refer=123"></div>
This happens because Facebook doesn't use your link parameter: it uses the og:url meta of the page you want to share.
If you use the fb-send plugin, you can have a look to the data-ref attribute : it should do the job :)
You should also have a look here: https://developers.facebook.com/tools/debug to know what URL Facebook will use at the end.
Good luck