I researche it quite a bit, and thus it seems simple, I couldnt find the answer.
So I have a website that has different articles,each with a custom facebook share button. Every time the user wants to share, I activate javascript sdk and it works. However it shares the opengraph tags that are defined in the header. How would I do that dynamically ? I want to share the specific content of the article ? Is opengraph the right way ?
I assume that your use case is something like the main page in a blog,
where you wish to display several articles in the same page,
and have a like button for each one.
However, the way Facebook crawls your page, it looks at the open graph meta tags for this main page only.
You wish for each of the share buttons to be specific to each post instead.
Have a read of the instructions on this page
In your situation, her is what you will need to do:
Set the data-href attribute of the individual page that the share button is for
For the individual pages, set the open graph meta tags appropriately
This way, when facebook queries your page open graph meta tags, it will not do so on the main page, but instead on the pages you have specified.
Another approach, that will give you more fine grained control, would be to use Facebook's Javascript SDK.
The one that you are looking for, in this case, would be the Share Dialog.
Essentially, here you create your own buttons by hand, and trigger the Facebook Share API using Javascript manually too.
Related
I am creating a music player, and each track have a share button. The following is my method for sharing:
Share on Facebook
So I want to give this share button specific image, and description. As far as I know the Facebook meta tags must be located in the header of the page. So how can I have various meta tags for each track that I am sharing?
If you have a list of tracks in a view model / data object of sorts, I would suggest iterating over them, generating meta tags, and inserting them into your header. Your meta data does not have to be in line with your share button (as you alluded to in your question).
If you have multiple tracks on the page, it makes sense that you would have multiple meta tags.
Perhaps you need a feature in your app that segregates songs allowing you to present a "song page" where you could be specific with your meta data. This would have the advantage of displaying all details appropriately when shared.
I suggest you check out the developer reference for object types and structure your tags appropriately.
https://developers.facebook.com/docs/reference/opengraph#object-type
One might also think to use jQuery / Javascript to conditionally add / remove tags.
This is unlikely to work:
Is it possible to use javascript to change the meta-tags of the page?
Outside of the generic reference facebook also has open graph music, which appears to be restricted to approved partners only, but may be worth a look : https://developers.facebook.com/docs/opengraph/music
I am using this Social Sharing tool called "Sharethis".
I gives you some header J.S. links to add to your HTML header.
Then, you'll need to add some SPAN in your code to add the social buttons, like this:
<span class='st_fblike_hcount' displayText='Facebook Like'></span>
Then, on load, you'll see your buttons to click on and get some social activity feedback.
Look at my page, if you have no idea how it looks like: http://www.seoroger.com/seo_quotes_archive.php
Problem is, I make dynamic pages like: /seo_quotes_archive.php?page=2, page=3, etc.
And this widget considers each of these pages a separate one (which is true somehow), and keeps each page's statistics separately.
I think the right thing to do for this instance, is to have one account for all of these pages and if the user clicks on facebook button on /seo_quotes_archive.php?page=5, for example, it increments the general facebook count.
If you agree, and you know how this is feasible, please help!
Thanks in advance!
PS. This case is the opposite of Multiple Sharethis buttons per page. In Fact, it's looking for a way to have one Sharethis statistics for Multiple pages.
You can add a "st_url" Parameter to specify the shared url. Insert the current url without the page-parameter to share the same url across multiple pages.
<span class='st_fblike_hcount' st_url='http://www.example.com/seo_quotes_archive.php' displayText='Facebook Like'></span>
Source: http://support.sharethis.com/customer/portal/articles/475079-share-properties-and-sharing-custom-information#sthash.EoamLhNZ.dpbs
I have a task to make things with social networks.
As far as I have discovered, there are 2 options. One is through your News Feed and the other is through the Sharer. In the diagram below, I show both.
The first uses dialog/feed, and the second uses sharer.php.
There is a difference as to how content is shared. The first shares it how I would like it, the second shows it in a way that I dislike.
I do not like the fact that the second one shares the whole page. I want that share icon for every image in the page and to share that specific icon, but not the whole page. Is it possible to make the share icon to look like the second image, but share content like the first? How should it look in Javascript/HTML?
If you need any code, that I used, just ask.
For the second option to look like the first one - and to use a specific image - you have to use Open Graph tags in the shared URL: http://ogp.me/
The second option is made with the "sharer.php", i guess. It just takes the URL of the site as parameter, the rest of the information is loaded from the Open Graph tags in the page. You can also define more than one share icon btw, so the user can browse through them before sharing.
For example, if you want a specific image to show up, you need this tag:
<meta property="og:image" content="http://mydomain.com/myimage.jpg" />
Btw, you can always test the Open Graph tags in the Facebook debugger:
https://developers.facebook.com/tools/debug
It also refreshes the tags, if they don´t show up correctly in the share window, just put the link into the debugger again.
I am currently doing some work on a research database where they have decided that they want to be able to share links to articles from the site on social networks (Facebook, Twitter, LinkedIn and Google+).
Preferably this should be done through the share buttons provided by the respective networks. I quickly got the buttons working and displayed correctly on the site by following the implementation instructions from each network.
My problem is a consequence of that the site offers the possiblity to show 1000 (1K) post on a single search result page. This means that when such a page is created it needs to create 1000 share buttons for each social network (effectively 4000).
Sadly this seems to overwhelm the browser as it offers to stop the javascript provided by the social networks and whether you choose to stop it or not - the page ends up in deadlock waiting for a response from the social networks and never finishes the page loading process.
I have an idea that the problem may be that the large number of asynchronous requests means that the browser somehow misses some of the responses and thus ends up waiting forever for a response that will never come.
As mentioned it is only a problem with such a large number of posts, if a page for example displays 100 posts (effectively 400 share buttons) it works perfectly.
While it could be argued that 1000 post on a single page is overkill, limiting the maximum number of displayed post is sadly not an option.
My question therefore is whether any of you know of a way to solve this kind of problem or if my only real option is to create custom share buttons that doesn't need to be created through the javascript provided by the social networks ?
The following references leads to the documentation for each of the share buttons.
Twitter
Facebook
LinkedIn
Google+
For all these buttons, there is a main js file which does the heavy work.
So, for LinkedIn, add the script tag:
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
once in the page. And use the below script as a placeholder for your linkedin button whereever you need it. (don't forget to replace the data-url attribute in below script)
<script type="IN/Share" data-url="http://developer.linkedin.com/plugins/share-plugin-generator" data-counter="top"></script>
For Twitter similarly, the below script tag needs to be added once in the page as it's job is to get the main js file and add it to the page.
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
The below script needs to be added multiple times whereever you want. Replace the data-url attribute with your url which needs to be tweeted when you click on it.
Tweet
When you get the code for FB or Google Plus like, you will get a script which needs to be added once and then the code to be added where ever you need.
EDIT:
Based on your comment below: The scripts will surely cause issue because they need to convert each and every placeholder into a good looking 'like' button. Below are few ways to improve the performance:
run these scripts only on page load (i.e., add the main scripts at load time)
using setTimeout or setInterval, work on every 100 placeholders at a time (requires change in main scripts)
Lazy load the init of like buttons. When the user scrolls the page and the like buttons will show up in the page, then initialize the buttons (requires change in main scripts)
Recommended Approach: Keep just one set of like buttons. When user hovers over a search result, then add this set of buttons to that div and change the attributes related to url in the buttons. With this way, only one set of buttons will be shown and won't take time at all to init them.
I want to show my first-time users different functions of my web-app. To do this, I want to make an in-page tutorial that will guide the users through different parts of the page.
I would like to use tooltip modals with instructional content. When the modal is showing, the page element in question will be exposed while the rest of the page is darkened. When the user presses "next" on the instructional modal, another set of instructions will show up and another part of the page will be exposed and the rest of the page will still be dimmed.
What's the best approach to take for this? Please advise. thanks!
jQuery Tools expose should take care of that nicely.