How can I add open graph meta tags in blog widget?

Posted by Community Admin on 18-May-2016 00:00

Hi all. Hoping for a little help. I'm no developer -- just trying to tweak the blog widget so it dynamically adds open graph meta to the head tag, but I'm not sure if it's possible with my limited knowlege. I was thinking it could be done with something like this:

<asp:PlaceHolder ID="Head" Runat="Server">

<meta property="og:image" content='<%# Eval("MediaUrl") %>' />

</asp:PlaceHolder>

If I recollect, one of my many tests removed the ID="Head" portion -- it added the code to my page, but it was in the body, which Facebook doesn't "like."

Am I even in the ballpark here? Really, really wish I understood more about this.

Thanks for any and all attempts to help out this noob.

Posted by Community Admin on 18-May-2016 00:00

Hey Andrew,

Not sure where or how you're trying to add this code but you should check your template (.master page) and see if it has a content placeholder region for the head section, if not then you need to add it with something like this:

<head id="head">

<asp:ContentPlaceHolder ID="cph_head" runat="server" />

</head>

Then inside that head section you can add it.

Ideally however (even if you're not a developer) you make a user control that adds it dynamically to the head section and gives you the option to add more tags and information as well so you could take advantage of things like Instant Articles

If you use Thunder for VisualStudio, it'll be a breeze. Check out this two links to copy-paste it together:

http://stackoverflow.com/questions/1982099/asp-net-dynamically-insert-code-into-head

http://docs.sitefinity.com/thunder-widgets-and-widget-templates

Posted by Community Admin on 18-May-2016 00:00

Thanks Jochem. I have Visual Studio, but I don't even know where to start with it. I'm not sure if our developers used .master pages (if they did, they're not in App_Data). However, I've had luck creating new widget templates (non-MVC) and editing them to suit my purposes. Since I don't need open graph meta tags in all pages, just blog posts, I was hoping there was something I could add to the widget template that would do the trick. I didn't know if it was possible to modify the head tag from here. If not, it's probably beyond my capabilities right now, but I'm trying to learn.

<%@ Control Language="C#" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>

<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>

<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit"

Assembly="Telerik.Sitefinity" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Comments.Web.UI.Frontend" TagPrefix="comments" %>

<%@ Import Namespace="Telerik.Sitefinity" %>

<%@ Import Namespace="Telerik.Sitefinity.Web.UI" %>

<%@ Import Namespace="Telerik.Sitefinity.Modules.Comments" %>

<sf:SitefinityLabel id="title" runat="server" WrapperTagName="div" HideIfNoText="true" HideIfNoTextMode="Server" />

<telerik:RadListView ID="SingleItemContainer" ItemPlaceholderID="ItemContainer" AllowPaging="False"

runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">

<layouttemplate>

<%-- <div class="sfpostLinksWrp">

<sf:MasterViewHyperLink class="sfpostBack sfback" Text="<%$ Resources:BlogResources, allposts %>" runat="server" />

</div> --%>

<asp:PlaceHolder ID="ItemContainer" runat="server" />

</layouttemplate>

<itemtemplate>

<div class="sfpostDetails sfdetails"

data-sf-provider='<%# Eval("Provider.Name")%>'  data-sf-id='<%# Eval("Id")%>' data-sf-type="Telerik.Sitefinity.Blogs.Model.BlogPost">

<sf:FieldListView ID="PostTitle" runat="server"

Text="0" Properties="Title"

WrapperTagName="h3" WrapperTagCssClass="sfpostTitle sftitle crh-detail-title" EditableFieldType="ShortText"

/>

<div class="sfpostAuthorAndDate sfmetainfo">

<asp:Literal ID="Literal2" Text="<%$ Resources:Labels, By %>" runat="server" />

<sf:PersonProfileView runat="server" />

<sf:FieldListView ID="PostDate" runat="server"

Format=" | PublicationDate.ToLocal():MMM dd, yyyy"

/>

<comments:CommentsCountControl runat="server"

ThreadKey='<%# ControlUtilities.GetLocalizedKey(Eval("Id"), null, CommentsBehaviorUtilities.GetLocalizedKeySuffix(Container.DataItem.GetType().FullName)) %>'

AllowComments='<%# Eval("AllowComments") %>'

ThreadType='<%# Container.DataItem.GetType().FullName %>'

NavigateUrl="#commentsWidget"

DisplayMode="ShortText"/>

<comments:CommentsAverageRatingControl runat="server"

ThreadKey='<%# ControlUtilities.GetLocalizedKey(Eval("Id"), null, CommentsBehaviorUtilities.GetLocalizedKeySuffix(Container.DataItem.GetType().FullName)) %>'

ThreadType='<%# Container.DataItem.GetType().FullName %>'

NavigateUrl="#commentsWidget"

DisplayMode="FullText"/>

</div>

<div class="sfMultiRelatedItmsWrp">

<h2 class="sfrelatedItmTitle"></h2>

<div class="sfrelatedList">

<asp:Repeater runat="server" DataSource='<%# Eval("Image") %>'>

<ItemTemplate>

<div class="sfrelatedListItem">

<a href='<%# Eval("MediaUrl") %>'>

<img

src='<%# Eval("MediaUrl")%>' class="responsive-image bloggy-img" alt='<%# Eval("AlternativeText")%>' title='<%# Eval("Title") %>' />

</a>

</div>

</ItemTemplate>

</asp:Repeater>

</div>

<sf:FieldListView ID="PostContent" runat="server"

Text="0" Properties="Content"

WrapperTagName="div" WrapperTagCssClass="sfpostContent sfcontent" EditableFieldType="LongText"

/>

<asp:PlaceHolder ID="socialOptionsContainer" runat="server">

</asp:PlaceHolder>

<comments:CommentsWidget runat="server"

ThreadKey='<%# ControlUtilities.GetLocalizedKey(Eval("Id"), null, CommentsBehaviorUtilities.GetLocalizedKeySuffix(Container.DataItem.GetType().FullName)) %>'

AllowComments='<%# Eval("AllowComments") %>' ThreadTitle='<%# Eval("Title") %>' ThreadType='<%# Container.DataItem.GetType().FullName %>'

GroupKey='<%# ControlUtilities.GetUniqueProviderKey("Telerik.Sitefinity.Modules.Blogs.BlogsManager", Eval("Provider.Name").ToString()) %>'

DataSource='<%# Eval("Provider.Name")%>' />

<br />

<a class="arrow backtoht" href="#" onclick="goBack()">Back</a>

<script>

function goBack()

window.history.back();

</script>

</div>

</itemtemplate>

</telerik:RadListView>

This thread is closed

All Replies