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
Related
Over the past month I've been working on a new website which is based on a WordPress theme. The site is a pseudo one-page design, where the primary page serves as the main page for information. However, it also has a gallery where you can enter several individual portfolio projects - which effectively takes you to another page (and therefore the use of "pseudo"). So that's the design and layout of the site...
On the main page of the site I added anchor links to the various sections for ease of use, which will scroll/take the user to the desired section of choice, by simply clicking on the navigation menu. The links all work fine, but a problem arises when you've entered and returned from a portfolio project.
The problem:
After having clicked on an anchor link, a hashtag is then added to the URL "www.example.com/#anchor". If the user enters a different page and then returns the hashtag/anchor is then reactivated and scrolls to the linked section. This is a real pain and anything but user-friendly, since it is taking the user away from where it was.
I've been trying as many Javascript/JQuery codes I can find, many from this very site, but none has managed to solve the problem... I need to find a way to effectively remove the hashtag after use so the URL is left with only "www.example.com" again.
EDIT: Forgot to add that I also need to be able to click on the navigation menu whilst in a portfolio project and having the menu call to open the main page and take the user to the section of choice.
Does anyone have a solution? I am all out of ideas here.
Please also tell me where to add the piece of code if you are so kind to help.
Thank you!
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.
We recently made a J2EE project in our class which required 58 different webpages. But a lot of them were redundant in my opinion. How? Let me give you a simple example. After the "login" page, where both the admin and a common user logs in, one is redirected to a common page, where there are several buttons. Some buttons are common for a user and the admin, but an admin can see some extra buttons in that very same page. So what we did- we made first the common part of the page and then made another page copy-pasting the code for the common page and then added some extra buttons for admins privileges. So after confirming a user, we redirected him to the common page, again if the user is confirmed as the admin, we redirected him to the extra buttons added page.
I personally feel this approach is redundant. We should have made a single page for admin view and then should have made arrangements so that if the user is confirmed to be an admin, he can see everything, but if he is confirmed to be a user, the extra buttons would hide automatically. Is htere a way to do so in HTML pages? Along with HTML, we used a little CSS and Javascript (Alert etc.)
For common pieces of HTML, you can:
Use Templates
Use hidden sections of HTML that you make visible upon demand
Use Dynamically loaded HTML (loaded upon demand from a common source via javascript)
Use popup HTML windows (not generally recommended)
Use server-side includes to include a common section in many pages
There are many different choices that don't involve copying the same HTML across many different pages and which to select depends upon the particular circumstances and, in some cases, which tools you are using and what their capabilities make simple.
You can check if a user is Admin or not. Then you can use Javascript to change the display-value to hidden on the buttons, the user shouldent be able to see.
An example
<input type="button" value="3" name="3" id="button_3" display="inline">
if(!admin) /* However you wanna chek if he is admin or not */
{
document.getElementById("button_3").display = "none";
}
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.