I built a quotation mashup. I added a bunch of social sharing buttons. It worked.
I decide to add Google+ and it does not get along with the other JavaScript / HTML. So I commented out all the other social sharing buttons and the Google+ button still doesn't work. Then I try a different quotation, one without a YouTube video it works, one with a YouTube video does not show a Google+ button. That is what I have discovered.
Switching YouTube display code does help, but Facebook like doesn't seem to work now, but Facebook Share does and I'm not 100% sold on my OpenGraph and thus Google+ meta data. Facebook updated their button recently and now I find 'Share' works better than 'Like'. Both can be tracked in Google Analytics in theory. I would like the quotation to appear in the description, that was working for Facebook but I can't get that to happen on Google+. Perhaps I need more meta data. I changed to og:type article that seems to help.
Quotation Collection
Quotation with Video
Quotation with no YouTube Video
I use PHP to build the JavaScript but the Google+ button as far as I can tell gets everything from the metadata. There also might be something wrong with my metadata as I don't do it as cleanly as I do on this page I've revised much of my meta data to try and get my shares to look their best. I need last.fm to provide bigger images or to revisit what I can get out of the wikipedia.
I got all four buttons well 5 social sharing buttons working on my blog, but I used two plugins, the Pinterest button is probably not tracked by Google Analytics but the other four are. I'm pretty sure I almost had it working last night, scarily the li tag seems to make a difference if you use divs and a bunch of CSS it seems to work better than using a list with one button in each item.
<!-- Professional Share Plugin--><div class="ProfessionalShareBox"><div class="PSBtn"><script type="IN/Share" data-counter="right" data-showzero="true" data-onsuccess="LinkedInShare"></script></div><div class="PSBtn"></div><div class="PSBtn"><div class="g-plusone" data-size="medium"></div></div><div class="PSBtn"><div class="fb-like" data-href="http://blog.muschamp.ca/2013/11/24/back-from-mexico/" data-send="false" data-width="90" data-layout="button_count" data-show-faces="false" data-action="recommend"></div></div></div><div id="fb-root"></div><div class='yarpp-related yarpp-related-none'>
I might switch to not using an ordered list of buttons and I also might steal from arguments from Ken's plugin seeing as I already gave him advice on how I would do it. ;-) Twitter Cards FTW!
I solved my basic problem. I changed how I was including YouTube videos, switching from probably the iFrame based include to the object include. Now I need to tweak my meta data to get it to display even better in Google+. I also tweaked my OpenGraph and Twitter Card meta data and am trying to find larger images through various APIs. My best effort at this can be seen in this blog post.
Related
I'm trying to build my own social sharing links on blogger
but the problem is that data:post.url doesn't retrieve the URL of the current post, it seems like it doesn't work at all.
And here's what I'm trying to do in more details:
1) I'd like to create my own sharing links so that my website runs faster than using third party plugins/websites — which usually inject tracking .JS and are not SEO optimized.
2) I'm totally aware that for data:post.url to work, I should first add the expression expr followed by href... for ex: expr:href
3) So the final code for a facebook sharing button is like this:
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank' title='Facebook Share'><i class="fa fa-facebook" aria-hidden="true"></i></a>
When I hover my cursor over Facebook sharing button (or click on it), I get http://www.facebook.com/sharer.php?u= without the current URL which means that data:post.url is not working
Is there a solution or an explanation to this?
Thank you.
Problem solved!
After that I posted this question here, I opened an old blog I made a long time ago for testing purposes and started observing the code until I found a similar one, which means that the above is correct.
I did a test, I pasted this one right before the closing </body> as I used to do and it didn't work. I then tried to paste it in front of the original code and guess what? It worked with no problem!
Well, it's totally normal, thanks to an article I read after that, I found out that there are two types of data: Those that can be accessed anywhere in the theme (Global) and those that can be accessed only under their appropriate widget (Local).
So data:post.url is a local type of data which can be accessed only under Post widget!
If you'd like to see a similar code functioning, search for Blog posts widget and paste it there under it.
To find Blog Posts widget, open the HTML of your theme, then on your keyboard click on CTRL+F and type Blog posts, you will be directed to title='Blog posts', paste your code anywhere between <b:widget title='Blog posts'... and </b:widget>. Save the changes and then visit your website to see how that perfectly works!
For my share buttons, I used another type of data that can be accessed anywhere in the theme: instead of data:post.url, I typed data:blog.url so that I can put the code right before </body>.
If you'd like to see how it works on my blog: Click Here
It should be work. But if not, have you try to remove that double quotes on that facebook link? 'http://www.facebook.com/sharer.php?u=+data:post.url' how it goes?
I have a search plugin that is more like a filter within a page (it's Swiftfilter and isotope filter). But I want the search to include all the pages on my website.
For example :
I am doing a travel website. When people search on index.html for "Italy". I want the search result directly link to italy.html page.
How can I do that?
What does this call?
Where can I learn/get this plugin?
Can swiftfilter or isotope filter enhance this?
Your problem can get a bit complicated. I'm afraid it's not a simple as finding a single plugin that can do this. It sounds to me like you have a static website, where content is stored across different, hard-coded pages. A static website can get complicated because number one, it would be slow/clunky to search hard-coded files on a website. Number two, you would have to deal with caching systems to speed it up.
If you want to implement a search feature, I suggest that you have a template-driven/database enabled website instead. Why don't you consider moving your site and all its pages over to something like Wordpress?
All your pages would get stored in a database and WP already has its own built-in search functionality. It works really well and I think you should consider it if you have a lot of pages on your website.
I just set up Facebook social plugin comments on my site, but I'm having a little trouble with them. When I get a notification saying that someone commented on something I commented on, if I click on that link I see no comments, but if I reload the page without the ?fb_comment_id=... then I can see the comments.
For instance:
http://www.5crideshare.jessepollak.me/rides/17?fb_comment_id=fbc_10150513336718064_21937866_10150513339773064&ref=notif¬if_t=open_graph_comment#f82002554
shows no comments, but
http://www.5crideshare.jessepollak.me/rides/17
shows comments.
Any ideas on what might be causing this?
Thank you very much,
Jesse
Because Facebook supposes that they are two different pages. While you are adding the plugin to your page, pay attention to data-href value.
Make your data-href value constant for the same page, although it may be requested with different URLs with extra querystrings.
When I look at your page source, clicked from notification:
<div class='fb-comments' data-href='http://www.5crideshare.jessepollak.me/rides/17?fb_comment_id=fbc_10150513336718064_21937866_10150513339773064&ref=notif¬if_t=open_graph_comment' data-num='{:posts=>2}' data-width='500'></div>
</div>
On this page, data-href value should be without unnecessary querystrings. It should be like this same with clear one: http://www.5crideshare.jessepollak.me/rides/17
Please have a look at http://500px.com/photo/3977429?from=popular. Down in the right corner, theres a sharing box. It looks pretty similar to sharethis. But, afaik, sharethis doesnt have embed or submit for example, and im looking for those options. Does anyone know which plugin is used here? Thanks
On the page you linked to, they didn't use anything like sharethis or addthis - they rolled their own. Looking at the code, its clear that they went to facebook, got the facebook like button, embedded it - then wen to google, got the google plus button, etc... and made a grid of them.
You can stylize the sharethis buttons with css to pretty much any extent,
or you can add a grid like that of your own.
The available alternatives to sharethis.com are :
addthis.com
addtoany.com
socialmarker.com
I'm sure there a a lot more out there, but those seem to be the most popular.
If you want something custom like they have and want access to the buttons
here are some sets of images you may be able to use:
http://speckyboy.com/2009/01/26/30-amazingly-creative-social-bookmarks-icon-sets/
Inspecting the source leads me to believe that it is custom work. The images, links and such are placed in the HTML serverside. Only the stumbleupon is pulled from stumbleupon itself. But also not trough some third party service like sharethis.
My webapp uses both Rails and JS and I would like users to be able to embed the images they upload to any blog/site.
What do I need to know, from a development point-of-view to allow me to create the functionality that generates an 'embed' link. It can be either a link like YouTube does, or a JS snippet or anything.
Just want to get a high-level overview of what I need to be able to do and how to proceed.
Thanks.
I would try using iframe. I created a widget which used javascript and I put it all into a single html file hosted on my website. Then I gave away an iframe snippet like this for example...
<iframe src="http://mywesbite.com/myWidget.html"></iframe>
The user can simply place the iframe snippet into their website and that's it!
I'm a little bit late to the party here, but I just wanted to add to Jacob's answer.
You can easily allow the user to customize the embedded content (perhaps choose light on dark vs. dark on light text to more closely match the page's environment/design) by using query params within the iframe src:
<iframe src="http://___.com/widget?theme=light&size=large"></iframe>
of course you'd probably want to build a UI to allow the user to make these distinct changes... you can't expect average user's to do that by hand:)
Vimeo's UI for customizing embedded videos is pretty nice if you want a best case scenario.