Blogger: Custom Social Share Links With Page URL - social-networking

I'm working on a Blogger template with custom social sharing buttons. The problem I'm having is adding the Current Blog URL to the link.
Here is my code:
<li class="googleplus"><span>Google+</span></li>
If I leave it like that, then when I click to share the webpage, it actually shows data:blog.url, instead of the actual webpage URL.
I tried using:
<li class="googleplus"><a expr:href="https://plus.google.com/share?url=data:blog.url"><span>Google+</span></a></li>
However, that just makes the whole menu not appear at all(even omitted from source).
Is there a solution for this, or am I gonna have to use jQuery to grab the URL and insert it into the link?

This is what i use and it works perfectly
expr:share_url='data:post.url'
OR
<li class='google'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600");return false;' rel='nofollow' title='Share this on Google+'>
<strong>
Google+
</strong>
</a>
</li>

use this code :
<a expr:href='"https://plus.google.com/share?url=" + data:post.url.canonical' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' target='_blank'><span>Google+</span></a>

Related

refreshing page after router redirection

In my project (laravel+vuejs) i want to list the gantt chart of each project so when i click to the link of a specific project it redirect me to his gantt But in my case the the first click it work fine but one i click to choose other project it just change the url and dont refreshing the page (it didnt redirect me) it always work with the just first try.Any help guys?
this is the MainApp.vue:
<ul class="nav nav-treeview" >
<li class="nav-item" v-for="projet in projects.projets" :key="projet.id" v-if="currentUser.role==='admin'">
<router-link :to="`/gantt/${projet.id}`" class="nav-link ">
<i class="fas fa-circle" style="color:#05dfd7"> </i>
<p>Gantt:{{ projet.name }} </p>
</router-link>
</li>
</ul>
You need to add a :key attribute to your <router-view>
<router-view :key="$route.fullPath"></router-view>
Your ${projet.id} will be different each time, hence reload will be triggered.
Edit
$route.fullPath Vue API
type: string
The full resolved URL including query and hash.

Laravel Routing to Views in Subdirectories

I'm using Laravel, and have a view structure like such:
Each of my pages have a navbar at the top, and the navbar has a few links on it:
<ul class="uk-nav uk-navbar-dropdown-nav">
<li>KENNEL INFORMATION</li>
<li>SIRES & DAMS</li>
<li>LITTERS</li>
<li>HELP</li>
</ul>
If I click one of these links (lets say info) from the homepage (home.blade.php), it redirects to the following url:
localhost:8080/mykennel/info
However, if I'm already on a view that is in the mykennel subfolder (again, lets say I'm on the info page), and I click a link from the navbar, it redirects to:
localhost:8080/mykennel/mykennel/info
Which throws a 404. I understand WHY this is happening but I can't seem to find how to fix it. How can I create an href in my anchor tag that knows to use only a single /mykennel/ prefix, regardless of where the user is currently situated on the site?
Any help is appreciated.
Try to use an absolute path instead, by adding / at the beginning of the href so links:
<ul class="uk-nav uk-navbar-dropdown-nav">
<li>KENNEL INFORMATION</li>
<li>SIRES & DAMS</li>
<li>LITTERS</li>
<li>HELP</li>
</ul>

Google Analytics Events for li items

I'm trying to add Google Analytics click tracking events to li list items (active thumbnails) used in a responsive grid application, and can't get it working. I've researched here and in the Google developer forums without success. I'm sure there is something simple I'm doing wrong. I have the latest GA script code installed (page view analytics are working fine). Here is a code sample:
<ul>
<li data-type="link" data-url="http://www.dianagabaldon.com/books/outlander-series/" data-target="_self" >
</li>
<li data-thumbnail-path="outlander_files/thumbnails/outlanderbookseries1.png" ></li>
<li data-thumbnail-text >
<p class="largeLabel" >Diana Gabaldon - Outlander Series</p></li>
</ul>
Hope you can help. Feel free to suggest a better way of doing it.
Update: I'm still digging, and the GA code has been updated for Universal Analytics and looks like this:
<ul>
<li data-type="link" data-url="http://www.dianagabaldon.com/books/outlander-series/" data-target="_self" >
</li>
<li data-thumbnail-path="outlander_files/thumbnails/outlanderbookseries1.png" ></li>
<li data-thumbnail-text >
<p class="largeLabel" >Diana Gabaldon - Outlander Series</p></li>
</ul>
Update 2: I tried opening the outbound link target in a new page to see if a lack of callBack might be the problem. No success. Following are two views of the code, one with the contained inside the li with the outbound link, the other in a separate li with the same parent ul. Neither works. Does anyone know which syntax is correct? Thx.
Example 1: With href in it's own li:
<ul>
<li></li>
<li data-type="link" data-url="http://www.dianagabaldon.com/books/outlander-series/" data-target="_blank" ></li>
<li data-thumbnail-path="outlander_files/thumbnails/outlanderbookseries1.png" ></li>
<li data-thumbnail-text >
<p class="largeLabel" >Diana Gabaldon - Outlander Series</p></li>
</ul>
Example 2: With href inside outbound link li:
<ul>
<li data-type="link" data-url="http://www.starz.com/outlandercommunity/home.html" data-target="_blank" >
</li>
<li data-thumbnail-path="outlander_files/thumbnails/community1.png" ></li>
<li data-thumbnail-text >
<p class="largeLabel" >Starz: Outlander Community</p></li>
</ul>
The syntax you are using for the event tracking uses the classic GA syntax (_gaq.push), but if you are using Universal Analytics (assuming that is what you mean by using the "latest GA script code"), the syntax needs to be updated:
onClick="ga('send', 'event', 'GridLinks', 'Click', 'Outlander Clicks 1');"
I'm not familiar with Responsive Grid, but the likely explanation is that the call to ga only adds the event to a queue for asynchronous processing, and that the event is lost because the current document is immediately replaced afterwards (stopping the JavaScript execution for the current page). You would need to use a hit callback as described in the Google Analytics help, but I'm not sure how this would be integrated with Responsive Grid. Also note that there are a couple of other pitfalls you need to be aware of.

place span tag between anchor tag using Action Link Helper

I got website templates and using it for my website. I am new to asp.net mvc 3 and razor. It is very difficult to modify html tag using html helper. How can I place the span tag between anchor tag using ActionLink Helper. I have used razor and html helper for producing link.
I want to produce following tags:
<li><span class="glyph logout"></span> Logout</li>
I have try this
<li>#Html.ActionLink("<span class='glyph logout'></span> Log out", "LogOff", "Account") </li>
I am confuse how to do that. It is not the correct way that produces span tag as string. How can I produce correct tags.
What you want to use is #Url.Action to create the URL while having your custom HTML.
<li>
<a href="#Url.Action("LogOff","Account")" title="Logout">
<span class="glyph logout"></span> Logout
</a>
</li>
This way you have control over the URL and be able to add your own custom HTML. #Html.ActionLink doesn't allow you to add custom HTML inside the tags natively.
If you need to customize, what's inside your anchor tag, you should use the Html.Action method instead of the Html.ActionLink
<li>
<a href="#Html.Action("LogOff", "Account")" title="Logout">
<span class="glyph logout"></span> Log
</a>
</li>

JQ Touch and AJAX

I am a little new to this so apologies if I am a little vaugue but I will do my best.
I am attempting to create an iphone friendly version of a site using JQtouch. I understand that normally this would be done all in one HTML file with pages seperated by DIV's. However, I am wanting to load the content from exisitng pages of a website.
The next part to the problem is that my iphone.html page does not sit in the same directory as my current website, so the normal behaviour of JQtouch doesnt seem to work.
So far I have set up a page as follows:
<div id="home">
<div class="toolbar">
<h1>Title</h1></div>
<ul class="rounded">
<li class="arrow"> HOME</li>
<li class="arrow"> ABOUT US</li>
<li class="arrow"> GNWR</li>
<li class="arrow"> GNER</li>
<li class="arrow"> NEWS</li>
<li class="arrow"> FAQS</li>
<li class="arrow"> CONTACT</li>
</ul>
</div>
<div id="content"></div>
<div id="about"></div>
<div id="journal"></div>
<div id="faqs"></div>
<div id="contact"></div>
</body>
</html>
I then have :
<script>
$(document).ready(function(){
$('#content').load('http://www.mysite.co.uk' + ' #content');
$('#about').load('http://www.mysite.co.uk/about' + ' #content');
}
</script>
This loads the content I am after and the page animations work fine. The only problem is that a couple of links exist in the content I am loading and when clicked they obviously dont work.
Is there a way I can check the href of a link when clicked and if it points to www.mysite.co.uk/about change it to point to #about and force it to navigate there?
Hope this makes sense if you need more info let me know.
Regards
Chris.
You are asking quite a few questions inside a single question... You should really break them up into several questions. It's easier for people to answer. Anyways, I'll give it a shot.
First of all, you don't have to have all contents in one html; you can load contents via AJAX. See the AJAX > "GET Example" in this demo, as well as the page content loaded via AJAX.
As far as I know, the pages you want to load do not have to be in the same directory structure. The pages you want to load via AJAX need to contain a valid jQTouch page, i.e. the whole page is enclosed in a <div>.
Is there a way I can check the href of
a link when clicked and if it points
to www.mysite.co.uk/about change it to
point to #about and force it to
navigate there?
If I understand you correctly, you essentially want to replace all the links to www.mysite.co.uk/about with #about. This has to be done with jQuery:
$('a[href="http://www.mysite.co.uk/about"]').attr('href', '#about');
You may want to do that when each page loads:
$(document).ready(function(e){
$('body>div').bind('pageAnimationEnd', function(event, info){
$('a[href="http://www.mysite.co.uk/about"]').attr('href', '#about');
})
});

Resources